ApolloClient fetchMore更新缓存但useQuery返回旧数据

核心原因分析 #

1. keyArgs配置路径不精确
   若skip/take是嵌套在查询参数（比如input对象）里，仅直接写keyArgs: ['skip', 'take']无法正确排除。Apollo Client对嵌套参数的keyArgs匹配需要精确路径，错误配置会让不同skip/take的请求被当成独立缓存条目，导致useQuery只监听初始条目的变化。

2. merge函数未关联同一缓存根
   非顺序分页的merge逻辑必须确保新数据合并到同一个缓存根条目下。如果因keyArgs错误导致根条目不唯一，新数据会被存入独立缓存项，useQuery订阅的初始条目自然不会更新。

3. 无唯一标识导致缓存追踪失效
   数据缺少id字段时，若未配置业务唯一标识，Apollo无法识别数据项归属。即使手动写merge逻辑，缓存系统也可能无法正确追踪合并后的列表，导致useQuery读取不到更新后的数据。

4. networkStatus未更新的本质是缓存不关联
   networkStatus 3（fetchMore加载中）未触发，说明fetchMore请求生成的缓存条目和初始查询不匹配，组件的query observer无法感知状态变化。

具体解决方案 #

1. 修正Type Policy的keyArgs配置 #

根据参数结构精确排除skip/take：
假设查询参数嵌套在input对象中，配置如下：

const typePolicies = {
  Query: {
    fields: {
      productTrackingAggregatedData: {
        keyArgs: (args) => {
          // 提取input中除skip/take外的参数作为缓存标识
          const { skip, take, ...restInput } = args.input;
          return Object.values(restInput);
        },
        merge(existing, incoming) {
          if (!existing) return incoming;
          // 非顺序分页合并逻辑，示例：按业务唯一字段去重合并
          const combined = [...existing, ...incoming];
          return [...new Map(combined.map(item => [item.trackingCode, item])).values()];
        },
      },
    },
  },
};

若参数是平级结构，直接用keyArgs: ['业务固定参数']排除skip/take即可。

2. 为数据类型配置业务唯一标识 #

在type policy中指定数据类型的keyFields，替代默认的id：

const typePolicies = {
  // 替换为你的数据类型名称
  ProductTrackingAggregatedDataItem: {
    // 用业务唯一字段组合作为标识
    keyFields: ['trackingCode', 'productSku'],
  },
  Query: { /* 上述fields配置 */ },
};

这是无id场景下缓存正常工作的关键，确保Apollo能正确追踪数据项的归属。

3. 规范fetchMore的变量传递 #

调用fetchMore时，确保变量仅更新skip/take，不修改keyArgs中保留的参数：

const { data, fetchMore } = useProductTrackingAggregatedDataQuery({
  variables: { input: { skip: 0, take: 10, category: 'electronics' } },
});

const handleLoadMore = () => {
  fetchMore({
    variables: {
      input: {
        ...data.productTrackingAggregatedData.input,
        skip: data.productTrackingAggregatedData.length,
      },
    },
  });
};

避免修改keyArgs中定义的缓存标识参数，防止生成新的独立缓存条目。

4. 验证缓存条目唯一性 #

通过Apollo DevTools查看Query类型下的productTrackingAggregatedData缓存项，确认初始查询和fetchMore查询对应同一个缓存条目。若出现多个条目，说明keyArgs配置仍有问题，需重新调整。

5. 强制监听网络状态变化 #

在useQuery中添加notifyOnNetworkStatusChange: true，确保networkStatus变化触发组件更新：

const { data, fetchMore, networkStatus } = useProductTrackingAggregatedDataQuery({
  variables: { /* ... */ },
  notifyOnNetworkStatusChange: true,
});

此时fetchMore触发时networkStatus应变为3，组件也会同步重新渲染。

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