Блог

В моем приложении 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 local state docs и в итоге получил следующее:

 <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>
  

Где я записываю только название компании в локальное состояние Apollo onCompleted . Однако, когда я запускаю это, приложение завершает работу с ошибкой.

Это правильный способ сохранения локального состояния в Apollo или я неправильно понял, как следует использовать локальное состояние Apollo?