Apollo Client缓存分页中fetchMore不更新组件状态问题

问题现象 #

在React应用中使用Apollo Client实现缓存分页，将filter参数设为缓存对象的唯一keyArgs，但遇到两个核心问题：

1. 调用带filter的fetchMore时，新数据已通过merge函数合并到缓存，但组件未触发重渲染。
2. 重复调用带/不带filter的fetchMore会重复发送HTTP请求，未命中预期缓存。

核心原因 #

1. 复杂Filter的缓存键匹配失效：Apollo Client默认对keyArgs做浅比较，嵌套结构的filter对象无法被正确识别为同一缓存键，导致缓存条目不匹配，既无法触发组件订阅更新，也无法复用已有缓存。
2. fetchMore的使用场景错误：fetchMore设计用于同一查询条件下加载更多数据，而非切换查询条件（如修改filter）。直接用fetchMore切换filter会创建新的缓存条目，但组件仍订阅初始查询的缓存键，因此不触发重渲染。
3. 变量传递不完整：调用fetchMore时未传递完整的分页变量（如offset、first），或filter对象引用频繁变化，进一步导致缓存键失效。

解决方案 #

1. 自定义keyArgs序列化逻辑 #

针对复杂嵌套的filter，将其序列化为稳定字符串作为缓存键，确保相同filter生成一致的缓存标识：

const client = new ApolloClient({
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          shells: {
            // 自定义keyArgs，将filter转为稳定JSON字符串
            keyArgs: (args) => {
              return args.filter ? JSON.stringify(args.filter) : 'default';
            },
            merge: (existing, incoming) => {
              return mergeObjectsAndNestedArrays<ShellsConnection>(
                existing,
                incoming,
                'nodes',
              );
            },
          },
        },
      },
    },
  })
});

2. 区分查询条件切换与加载更多的场景 #

• 切换filter（查询条件）：通过组件状态更新useQuery的variables，让Apollo自动匹配对应缓存键，触发组件重渲染：

const ControlCenter = () => {
  const [page, setPage] = useState(1);
  const [activeFilter, setActiveFilter] = useState(null);
  // 根据当前filter和page变量发起查询
  const { data, loading, fetchMore } = useShellsQuery({
    variables: {
      first: 5,
      offset: (page - 1) * 5,
      filter: activeFilter,
    },
  });

  const onCounterpartiesChange = async (counterparties) => {
    // 切换filter时更新状态，触发查询（命中缓存则无HTTP请求）
    const newFilter = { shellCounterParties: { some: { orgId: { in: '20584' } } } };
    setActiveFilter(newFilter);
    setPage(1); // 切换filter后重置分页
    setQuery({ counterparties });
  };

  // 加载更多当前filter下的数据，使用fetchMore
  const loadMore = async () => {
    await fetchMore({
      variables: {
        offset: data?.shells?.nodes.length || 0,
        filter: activeFilter,
      },
    });
  };

  const shells = data?.shells?.nodes;
};

3. 确保变量引用稳定 #

如果filter对象需要动态生成，可通过memoization（如useMemo）保持引用稳定，避免不必要的缓存键变化：

const activeFilter = useMemo(() => {
  return query.counterparties 
    ? { shellCounterParties: { some: { orgId: { in: query.counterparties } } } }
    : null;
}, [query.counterparties]);

验证效果 #

• 切换filter时，组件会自动订阅对应缓存键，缓存命中时无HTTP请求，且数据更新后触发重渲染。
• 同一filter下调用fetchMore，会合并缓存数据并触发组件重渲染，重复调用相同参数的fetchMore不会发送重复请求。

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