Question

"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组件仅在第二次调用时得到更新。

我在这里想念什么？

Answer 1

ApolloClient.subscribe的下一个功能与Apollo Client的mutate函数中的updateQueries的工作原理非常相似，但是cache.writeQuery不会广播更改（如果未从Mutation的update函数中调用该更改）。

>

解决方案：使用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

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

1 个答案: