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本地状态文档的'Direct writes'部分，最后得到以下内容：

<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状态？

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

0 个答案: