如何同时实现分页与筛选 解决Apollo Client带缓存的无限滚动搜索问题

解决方案 #

1. 优先修正Apollo Client缓存配置，隔离不同搜索词的分页上下文

你遇到的问题核心原因是Apollo Client默认没有将搜索关键词作为分页缓存的分组依据，不同筛选条件的拉取结果被合并到了同一个缓存列表中，导致offset计算完全错误。
你可以在初始化InMemoryCache时，为自动补全的查询字段配置keyArgs，明确按搜索关键词分组缓存：

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

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        // 替换为你实际的自动补全查询字段名
        autocompleteOptions: {
          // 按搜索关键词分组，不同关键词对应完全独立的分页缓存
          keyArgs: ['keyword'],
          // 自定义合并逻辑
          merge(existing = [], incoming, { args }) {
            // offset为0说明是新触发的搜索，直接替换原有列表
            if (args.offset === 0) return incoming;
            // 滚动加载的场景，将新数据追加到现有列表末尾
            return [...existing, ...incoming];
          }
        }
      }
    }
  }
});

配置后每次修改搜索关键词， offset都会从0开始重新计算，不会复用其他搜索词的已拉取列表长度，就能避免你遇到的漏数、重复问题。

2. 长期方案：替换偏移量分页为游标分页（Keyset Pagination）

偏移量分页本身天生不适合筛选+无限滚动的场景：如果后台数据在两次拉取之间有新增/删除，或者筛选条件变化，offset很容易出现跳错、重复拉取的问题。
改成游标分页后，每次滚动加载只需要传递上一次拉取到的最后一条数据的id作为游标，后台直接查询大于该游标、符合筛选条件的N条数据即可：

• 性能远高于offset分页：不需要跳过大量前序数据，直接走主键索引查询
• 完全不会出现漏数、重复问题：游标是和具体数据绑定的，不受已拉取数量、数据变更的影响
• 换搜索关键词时直接清空游标，从头拉取即可

3. 临时兼容方案（无需修改后台接口）

如果暂时无法调整后台分页逻辑，每次修改搜索关键词时，手动重置offset为0，调用查询的refetch方法传入新的搜索词和offset=0，直接覆盖当前缓存的列表数据即可，不要用现有列表的长度计算新搜索词的offset。

内容的提问来源于stack exchange，提问作者Gergő Horváth