Apollo 客户端 writeQuery 更新存储，但 UI 组件仅在第二次函数调用后更新答案

【问题标题】：Apollo client writeQuery updates stores, but UI componens only updates after the second function callApollo 客户端 writeQuery 更新存储，但 UI 组件仅在第二次函数调用后更新
【发布时间】：2019-11-14 15:41:24
【问题描述】：

"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>
    );
  }
}

商店在调用后更新，但 UI 组件仅在第二个发布事件时重新呈现。

UI 组件的设置方式如下：

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

通过在调用 writeQuery 后读取缓存，我能够验证存储是否反映了正确的状态，但是 UI 组件只会在第二次调用时更新。

我在这里错过了什么？

【问题讨论】：

标签： apollo react-apollo apollo-client

【解决方案1】：

ApolloClient.subscribe 的 next 函数与 Apollo Client 的 mutate 函数中 updateQueries 的工作方式非常相似，但cache.writeQuery 不会在未从 Mutation 的 update 函数中调用时广播更改。

解决方案：使用client.writeQuery(...) 而不是cache.writeQuery(...)

注意：更新函数接收缓存而不是客户端作为它的第一个参数。这个缓存通常是 InMemoryCache 的一个实例，当客户端运行时提供给 ApolloClient 构造函数创建的。在更新功能的情况下，当您调用 cache.writeQuery，更新内部调用了broadcastQueries，所以侦听更改的查询将更新。但是，这种行为 cache.writeQuery 之后的广播更改仅发生在更新功能。在其他任何地方，cache.writeQuery 只会写入缓存，并且更改不会立即广播到视图层。为了避免这种混淆，当写入缓存。

来源：https://www.apollographql.com/docs/react/essentials/mutations/#updating-the-cache

【讨论】：

老兄，我花了好几个小时搞清楚这个问题。非常感谢。