Клиент Apollo writeQuery обновляет хранилища, но компоненты пользовательского интерфейса обновляются только после второго вызова функции - PullRequest
Новая
       12

Клиент Apollo writeQuery обновляет хранилища, но компоненты пользовательского интерфейса обновляются только после второго вызова функции

0 голосов
/ 04 июля 2019 
"apollo-cache-inmemory": "^1.6.2",
"apollo-client": "^2.6.3",

Я устанавливаю простую подписку с помощью метода client.subscribe и пытаюсь обновить хранилище с помощью метода client.writeQuery 

export default class App extends Component<Props> {
  componentDidMount() {
    this.purchaseSubscription = client.subscribe({
      query: PURCHASE_ASSIGNED_SUBSCRIPTION,
      variables: { status: ['INPREPARATION', 'PROCESSED', 'READYFORCOLLECTION', 'ONTHEWAY', 'ATLOCATION'] },
    }).subscribe({
      next: (subscriptionData) => {
        const { cache } = client;
        const prev = cache.readQuery({
          query: MY_PURCHASES,
          variables: { status: ['INPREPARATION', 'PROCESSED', 'READYFORCOLLECTION', 'ONTHEWAY', 'ATLOCATION'] },
         });
        const newPurchase = subscriptionData.data.purchaseAssignedToMe;
        const data = { myPurchases: [...prev.myPurchases, newPurchase] };

        cache.writeQuery({
          query: MY_PURCHASES,
          variables: { status: ['INPREPARATION', 'PROCESSED', 'READYFORCOLLECTION', 'ONTHEWAY', 'ATLOCATION'] },
          data,
        });
      },
      error: (err) => { console.error('err', err) },
    });
  }

  render() {
    return (
      <ApolloProvider client={client}>
        <AppContainer />
      </ApolloProvider>
    );
  }
}

Хранилище обновляется после вызова, однако компонент пользовательского интерфейсаперерисовывается только во втором событии публикации.

Компоненты пользовательского интерфейса настраиваются следующим образом: 

  <Query
    query={MY_PURCHASES}
    variables={{ status: ['INPREPARATION', 'PROCESSED', 'READYFORCOLLECTION', 'ONTHEWAY', 'ATLOCATION'] }}
    >
   ...
  <Query />

При чтении кеша после вызова writeQuery я смог проверитьчто хранилище отражает правильное состояние, однако компонент пользовательского интерфейса обновляется только при каждом втором вызове.

Что мне здесь не хватает?

1 Ответ

0 голосов
/ 04 июля 2019

Следующая функция ApolloClient.subscribe очень похожа на работу updateQueries в функции mutate клиента Apollo Client, но за исключением того, что cache.writeQuery не передает изменения, если они не вызываются из функции обновления Mutation.

РЕШЕНИЕ: используйте client.writeQuery(...) вместо cache.writeQuery(...)

Примечание: функция обновления получает кеш, а не клиента в качестве первого параметра.Этот кеш, как правило, является экземпляром InMemoryCache, который предоставляется конструктору ApolloClient при создании клиента.В случае функции обновления, когда вы вызываете cache.writeQuery, обновление внутренне вызывает broadcastQueries, поэтому запросы, прослушивающие изменения, будут обновлены. Однако это поведение трансляции изменяется после cache.writeQuery, которое происходит только с функцией обновления.В другом месте cache.writeQuery будет просто записывать в кеш, и изменения не будут немедленно переданы на уровень представления.Чтобы избежать этой путаницы, при записи в кеш предпочитайте client.writeQuery.

Источник: https://www.apollographql.com/docs/react/essentials/mutations/#updating-the-cache

...