使用`react-apollo-hooks`和`useSubscription`钩子时如何避免“自动更新”缓存答案

【问题标题】：How can I avoid "auto-update" cache when using `react-apollo-hooks` and `useSubscription` hook使用`react-apollo-hooks`和`useSubscription`钩子时如何避免“自动更新”缓存
【发布时间】：2020-03-04 07:05:29
【问题描述】：

我有一些 Apollo-Hooks 代码使用useSubscription 来监听订阅中的事件变化：

useSubscription<MySubscriptionUpdated>(MySubscription, {
    onSubscriptionData: async ({ client, subscriptionData: { data } }) => {
      if (!data) {
        return;
      }
      ...

此代码会自动更新响应的缓存，这在大多数情况下都很棒

但是，我需要在收到响应之后进行一些结果处理，但在更新缓存之前。

有谁知道使用useSubscription 钩子的方法，并且没有自动更新缓存？

响应最终将始终包含一个带有__typename 的实体。

【问题讨论】：

标签： reactjs graphql react-apollo apollo-cache-inmemory

【解决方案1】：

所以，你可以手动更新缓存，看起来像这样

apollo.mutate({
  mutation: createTaskMutation,
  variables: item,
  update: (cache, { data }) => {
    try {
      let { allTasks } = cache.readQuery({ query: getTasks });
      allTasks.push(data);
      cache.writeQuery({ //
        query: getTasks,
        data: {
            'allTasks': allTasks
        }
      });
    } catch (e) {
        // We should always catch here,
        // as the cache may be empty or the query may fail
    }
});

【讨论】：

即使您使用update 函数，Apollo 也会在调用您的update 之前进行自动更新，除非您使用fetchPolicy: 'no-cache'。 OP 询问如何防止自动更新。

【解决方案2】：

您可以为每个订阅更改fetchPolicy。默认值为cache-first。要禁用缓存，必须将 fetchPolicy 设置为 no-cache。如需了解更多详情，请参阅apollo official document。

useSubscription<MySubscriptionUpdated>(MySubscription, {
    fetchPolicy: "no-cache",
    onSubscriptionData: async ({ client, subscriptionData: { data } }) => {
      if (!data) {
        return;
      }
      ...

【讨论】：