使用 `react-apollo-hooks` 和 `useSubscription` 钩子时如何避免 "auto-update" 缓存

Question

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

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

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

但是，我需要在收到响应之后对缓存进行更新之前。

有谁知道使用useSubscription钩子的方法，不会自动更新缓存吗？

响应最终总会有一个包含 __typename 的实体。

Answer 1

您可以为每个订阅更改 fetchPolicy。默认值为 cache-first。要禁用缓存必须将 fetchPolicy 设置为 no-cache。有关详细信息，请参阅 apollo official document。

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

Answer 2

因此，您可以进行手动缓存更新，它看起来像这样

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

使用 `react-apollo-hooks` 和 `useSubscription` 钩子时如何避免 "auto-update" 缓存

How can I avoid "auto-update" cache when using `react-apollo-hooks` and `useSubscription` hook

reactjs

graphql

react-apollo

apollo-cache-inmemory