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

Posted

技术标签:

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

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

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

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

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

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

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

【问题讨论】:

【参考方案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;
      
      ...

【讨论】:

以上是关于使用`react-apollo-hooks`和`useSubscription`钩子时如何避免“自动更新”缓存的主要内容,如果未能解决你的问题,请参考以下文章

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

React-Apollo-Hooks 使用Mutation 传递空变量?

将参数传递给 react-apollo-hooks useQuery

react-apollo-hooks 中的 useMutation 没有传递变量

仅在第一次以惯用方式和优雅方式呈现组件时执行 react-apollo-hooks useQuery

渲染的钩子比上一次渲染时更多