如何在urql+GraphQL中结合分页与排序更新缓存？

核心问题分析 #

你的问题出在urql的local resolver分页逻辑中，没有识别到排序参数变化是一个全新的查询维度，仍然沿用了之前的缓存合并逻辑，导致不同排序的数据被错误追加在一起。

具体解决方案 #

1. 确保排序参数完全参与缓存键生成

urql会根据查询和变量生成缓存键，要保证sorting对象的所有属性（比如orderBy、direction）被正确序列化，让不同排序的查询生成完全独立的缓存条目。

• 检查你的查询变量，确保sorting的结构在序列化后（比如JSON.stringify），DESC和ASC的结果完全不同，避免urql将它们识别为同一个缓存键。

2. 修改Local Resolver，增加排序参数判断逻辑

在处理分页合并的resolver中，先对比新旧查询的sorting参数，若不一致则直接返回新数据，跳过合并逻辑：

const readMeaningsResolver = (_parent, args, cache, info) => {
  const { queryKey, fieldKey } = info;
  // 获取新查询的结果
  const newData = cache.readQuery({ 
    query: ReadMeaningsDocument, 
    variables: args,
    context: { force: true }
  });

  // 查找当前缓存中同字段的旧参数
  const cachedField = cache.inspectFields(queryKey).find(f => f.fieldName === fieldKey);
  if (cachedField?.arguments) {
    // 深度对比排序参数（用JSON.stringify或深度比较函数）
    const sortChanged = JSON.stringify(cachedField.arguments.sorting) !== JSON.stringify(args.sorting);
    if (sortChanged) {
      // 排序参数变更，直接返回新数据，不合并旧缓存
      return newData.readMeanings;
    }
  }

  // 排序未变更，执行正常分页合并
  const existingData = cache.readQuery({ query: ReadMeaningsDocument, variables: args });
  if (existingData && newData) {
    return {
      ...newData.readMeanings,
      items: [...existingData.readMeanings.items, ...newData.readMeanings.items],
      hasMore: newData.readMeanings.hasMore
    };
  }

  return newData?.readMeanings;
};

提示：如果sorting结构复杂，建议用深度比较函数（如lodash的isEqual）替代JSON.stringify，避免因属性顺序等问题导致误判。

3. 切换排序时重置分页状态并清理旧缓存（兜底方案）

在前端切换排序的交互逻辑中，手动重置cursor为null，并清除旧排序对应的缓存条目：

const handleSortToggle = (newSortDirection) => {
  const oldSorting = currentVariables.sorting;
  // 清除旧排序的查询缓存
  client.invalidateQuery({
    query: ReadMeaningsDocument,
    variables: { ...currentVariables, sorting: oldSorting }
  });
  // 重置cursor，加载新排序的第一页数据
  setCurrentVariables({
    ...currentVariables,
    sorting: { ...oldSorting, direction: newSortDirection },
    cursor: null
  });
};

这个操作能确保新排序的查询从服务端获取干净的第一页数据，不会和旧缓存产生关联。

4. 验证服务端返回的分页标识

确认服务端在切换排序后，返回的cursor和hasMore是对应新排序的正确值，避免前端因错误的分页标识继续加载旧排序的数据。

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