React+GraphQL+Apollo服务端分页：如何仅渲染当前页数据

问题根源 #

Apollo Client默认对数组类型的查询结果执行合并追加逻辑，当你切换页码时，新请求的数据会被合并到同名字段的缓存中，导致表格渲染所有合并后的数据。

解决方法：自定义缓存策略区分分页条目 #

通过配置Apollo Client的缓存规则，让不同页码、排序条件的查询结果单独存储，避免合并。

1. 配置Apollo Client的typePolicies #

在创建Apollo Client实例时，为你的查询字段设置缓存区分规则：

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

const client = new ApolloClient({
  uri: '你的GraphQL接口地址',
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          // 替换成你实际的查询字段名（对应Document中的查询字段）
          getYourData: {
            // 指定用来区分不同缓存条目的变量：ID、页码、排序字段、排序方向
            keyArgs: ['id', 'input.page', 'input.sort', 'input.order'],
            // 直接用新数据替换旧数据，不执行合并
            merge(existing, incoming) {
              return incoming;
            },
          },
        },
      },
    },
  }),
});

2. 修正查询变量的语法错误 #

你的代码中variables里的id,,存在语法错误，修正后确保分页变量正确传递：

const { data } = useQuery(Document, {
  variables: {
    id: 你的实际ID值, // 移除多余逗号
    input: {
      count: 25,
      page: page + 1,
      sort: sortField,
      order: sortOrder,
    },
  },
  notifyOnNetworkStatusChange: true,
  fetchPolicy: 'cache-first', // 保留该策略，回退到已加载页面时直接读取缓存
});

预期效果 #

• 切换分页时，表格仅渲染当前页的新数据，不会追加到现有数据之后；
• 回退到之前加载过的页面时，Apollo会直接从缓存读取该页的原始数据，无需重新发起网络请求。

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