Apollo React Native分页失效问题求助（附相关代码）

核心问题定位 #

从提供的代码来看，分页失效主要源于以下几个关键错误：

1. 分页策略中参数判断与字段名不匹配 #

在cursorPagination的merge函数里存在两处错误：

• 判断下一页时错误访问args?.pagination?.afterCursor，实际变量嵌套在input中，应改为args?.input?.afterCursor
• 合并结果返回results字段，但GraphQL查询返回的列表字段是data，导致缓存无法正确合并数据

修改后的分页策略代码：

import { FieldPolicy } from "@apollo/client/cache/inmemory/policies";
import unionBy from "lodash.unionby";
type KeyArgs = FieldPolicy<string>["keyArgs"];

export const cursorPagination = (
  keyArgs: KeyArgs = ["input.afterCursor"], // 修正keyArgs路径
  unionByField = "__ref"
): FieldPolicy => ({
  keyArgs,
  merge(existing, incoming, { args }) {
    const incomingResult = incoming ? incoming.data : [];
    const existingResult = existing ? existing.data : [];
    // 修正参数路径
    const hasNextCursor = Boolean(args?.input?.afterCursor);
    if (hasNextCursor) {
      const resultPagination = unionBy(
        existingResult,
        incomingResult,
        unionByField
      );
      return {
        ...incoming,
        data: resultPagination, // 改为查询对应的data字段
      };
    }
    return incoming;
  },
});

2. useState类型定义语法错误 #

afterCursor的状态声明存在语法错误，导致类型推断异常：

// 错误写法
const [afterCursor, setAfterCursor] = (useState < string) | null | (undefined > null);
// 正确写法
const [afterCursor, setAfterCursor] = useState<string | null | undefined>(null);

3. getMorePosts依赖数组缺失 #

getMorePosts的useCallback依赖数组为空，闭包无法捕获最新的afterCursor值，每次调用都使用初始值：

const getMorePosts = useCallback(async () => {
  if (afterCursor) {
    const response = await fetchMore({
      variables: {
        input: { limit: 10, afterCursor, type: PostFilterType.New },
      },
    });
    setAfterCursor(response.data?.posts.pageInfo?.afterCursor);
  }
}, [afterCursor, fetchMore]); // 添加依赖

4. 缓存配置的keyArgs路径问题 #

原缓存配置的keyArgs设置为["afterCursor"]，但变量嵌套在input中，需修正为["input.afterCursor"]，确保Apollo能正确区分不同分页状态的缓存条目（对应上面分页策略中的keyArgs修改）。

额外排查建议 #

• 确认defaultCursorPagination是否就是你定义的cursorPagination函数，确保缓存配置引用正确
• 在merge函数中打印args，确认实际传入的参数结构是否符合预期
• 调用getMorePosts前打印当前afterCursor值，确认是否为有效游标
• 检查GraphQL返回的pageInfo.afterCursor在最后一页是否为null，避免无效重复请求

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