如何在Apollo Client中按变量区分分页查询缓存？

我在执行带分页参数的GraphQL查询，传入page和pageSize变量的代码如下：

const {data} = useQuery(PAGINATED_QUERY, {
    variables: {
        page: 1,
        pageSize: 10,
    }
});

切换到第二页时数据能正常更新，但切回第一页时，Apollo Client认为该查询已缓存（变量相同），却返回第二页的数据。推测是不同变量的查询写入了同一缓存空间。现有方案只有设置fetchPolicy: 'no-cache'，不符合我的需求——我不想关闭缓存，但需要支持服务端分页查询。

要让Apollo Client按变量分离缓存结果，有以下几种可行方案：

1. 配置keyArgs区分缓存条目 #

在初始化InMemoryCache时，通过typePolicy为分页查询字段指定keyArgs，将page和pageSize纳入缓存键的生成逻辑，让不同参数的查询对应不同缓存条目：

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        // 替换为你的实际分页查询字段名
        paginatedItems: {
          keyArgs: ['page', 'pageSize'],
          // 纯分页场景下直接返回新数据即可，无需合并
          merge(existing, incoming) {
            return incoming;
          },
        },
      },
    },
  },
});

2. 确保实体有唯一标识（辅助方案） #

如果分页查询返回的是实体列表，确保每个实体包含唯一id（或自定义唯一字段），并通过dataIdFromObject让Apollo Client正确识别实体身份。这能避免实体级别的缓存混淆，配合keyArgs使用效果更稳定：

const cache = new InMemoryCache({
  dataIdFromObject: (object) => {
    return object.id || `${object.__typename}:${object.uniqueKey}`;
  },
});

3. 配合默认缓存策略使用 #

完成上述配置后，使用默认的cache-first策略即可，不同分页参数的查询会自动读取对应缓存数据，无需禁用缓存。

内容的提问来源于stack exchange，提问作者Moritz Roessler