使用`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 没有传递变量