reactjs - 将来自 GraphQL 查询的单个属性存储在本地 Apollo 存储中

Question

在我的 React 应用程序中，当用户访问它时，myapp.com/org/companyname它会加载一个具有以下逻辑的页面，以根据 URL 中的公司名称获取有关公司的一些基本详细信息：

const FIND_COMPANY = gql`
  query CompanyQuery($companyName: String!) {
    company(name: $companyName) {
      ... on Company {
        name
        description
      }
      ... on Error {
        errorMessage
      }
    }
  }
`;

<Query
  query={FIND_COMPANY}
  variables={{
    companyName: this.props.location.pathname.split("org/")[1]
  }}
>
  {({ data }) => {
    if (data.company.errorMessage)
      return <div>{data.company.errorMessage}</div>;

    return (
     <div>
       <h1>{data.company.name}</h1>
       <p>{data.company.description}</p>
     </div>
    );
  }}
</Query>

这很好用，但是我只想将当前公司名称存储在本地 Apollo 状态中，以便其他组件可以轻松访问它，而无需对每个组件中的 URL 进行字符串操作。

为此，我遵循了Apollo 本地状态文档的“直接写入”部分，并最终得到以下内容：

<ApolloConsumer>
  {client => (
    <Query
      query={FIND_COMPANY}
      variables={{
        companyName: this.props.location.pathname.split("org/")[1]
      }}
      onCompleted={data =>
        client.writeData({ data: { companyName: data.company.name } })
      }
    >
      {({ data }) => {
        if (data.company.errorMessage)
          return <div>{data.company.errorMessage}</div>;

        return (
        <div>
          <h1>{data.company.name}</h1>
          <p>{data.company.description}</p>
        </div>
        );
      }}
    </Query>
  }
</ApolloConsumer>

我只将公司名称写到阿波罗当地状态onCompleted。但是，当我运行它时，它会使应用程序崩溃。

这是在 Apollo 中存储本地状态的正确方法还是我误解了应该如何使用本地 Apollo 状态？

标签： reactjsgraphqlapolloreact-apollo