Apollo Client中useQuery按ID查询后分页功能异常问题

问题分析 #

执行单个设施详情查询后，分页查询的fetchMore仅返回新获取的数据，而非缓存中的完整列表，但Apollo DevTools显示缓存数据完整。原因是relayStylePagination的默认合并逻辑在缓存节点被更新（单个查询新增字段）后，无法正确拼接现有分页数据与新数据，导致useQuery返回的分页信息和列表不完整。

解决方案 #

1. 手动实现fetchMore的updateQuery函数 #

放弃依赖默认的分页合并逻辑，显式合并现有数据与新获取的数据，确保完整保留已加载的列表：

const { data, fetchMore } = useQuery(GET_FACILITIES, {
  variables: { first: 15, order: [...], where: {...} },
  notifyOnNetworkStatusChange: true,
});

const loadMore = () => {
  fetchMore({
    variables: {
      after: data?.facilities?.pageInfo?.endCursor,
    },
    updateQuery: (prev, { fetchMoreResult }) => {
      if (!fetchMoreResult) return prev;
      return {
        facilities: {
          ...fetchMoreResult.facilities,
          edges: [...prev.facilities.edges, ...fetchMoreResult.facilities.edges],
          pageInfo: fetchMoreResult.facilities.pageInfo,
        },
      };
    },
  });
};

2. 确认缓存策略配置正确性 #

确保Apollo Client初始化时，relayStylePagination正确绑定到分页字段，且设施类型的缓存键配置无误：

import { ApolloClient, InMemoryCache, relayStylePagination } from '@apollo/client';

const client = new ApolloClient({
  uri: '/your-graphql-endpoint',
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          facilities: relayStylePagination(),
        },
      },
      FacilityModel: { // 需与GraphQL Schema中的设施类型名一致
        keyFields: ['id'], // 显式指定id为缓存主键，确保节点关联正确
      },
    },
  }),
});

3. 排查查询变量一致性 #

确认执行单个查询前后，分页查询的order、where等变量未发生变化——relayStylePagination会为不同的变量组合维护独立的缓存条目，变量变化会导致读取新的缓存列表。

4. 临时缓存重置（仅应急使用） #

若上述方法无效，可在单个查询后重置分页查询的缓存（会丢失已加载数据，不推荐长期使用）：

import { useApolloClient } from '@apollo/client';

const client = useApolloClient();

// 执行单个查询后调用
const resetPaginationCache = () => {
  client.cache.evict({ 
    query: GET_FACILITIES, 
    variables: { first: 15, order: [...], where: {...} } 
  });
  client.cache.gc();
};

验证方式 #

1. 执行单个设施查询后调用loadMore，检查data.facilities.edges是否包含历史数据与新数据的完整列表。
2. 通过Apollo DevTools查看Query.facilities的缓存条目，确认edges数组长度与已加载数据总量一致。

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