Apollo fetchMore 全局更新数据答案

【问题标题】：Apollo fetchMore updates data globallyApollo fetchMore 全局更新数据
【发布时间】：2022-07-21 00:27:33
【问题描述】：

我有两个 TaskList 组件使用相同的查询 GET_TASKS。

两者都使用不同的filter 查询变量，该变量在props 中作为queryVars 传递给它们。

我在类型策略中定义了一个标准的合并函数来将传入的和现有的数据合并在一起。

TaskList 组件使用

const { data, fetchMore } = useQuery<Response, Variables>(GET_TASKS, { variables: queryVars })

检索数据。

Fetch more 按钮在 onClick 属性中具有 () => fetchMore({ variables: queryVars })。

当我单击左侧的 Fetch more 按钮时，右侧的任务也会更新，但是，没有应用过滤器，因此 分配给我的数据过滤器也被放入由我分配任务列表，反之亦然。

合并函数基本上重写了使用给定查询的每个数据对象。

如何告诉 Apollo 只更新绑定到定义了 fetchMore 的组件的数据？

【问题讨论】：

标签： javascript reactjs apollo react-apollo

【解决方案1】：

您应该能够将过滤器添加到 keyArgs 属性。这应该会根据过滤器创建不同的缓存结果。

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        tasks: {
          keyArgs: ["filter"],
          merge(existing, incoming, { args: { offset = 0 }}) {
            //Custom merge
          },
        },
      },
    },
  },
});

【讨论】：