React Query useInfiniteQuery中pageParams为undefined如何解决

问题现象 #

调用useInfiniteQuery拉取列表数据时，接口可正常返回数据，但请求函数中拿到的pageParam始终为undefined，控制台打印效果如下：

问题原因 #

共3处代码/配置错误导致该问题：

• 缺失必填配置项initialPageParam：v4及以上版本的@tanstack/react-query中，useInfiniteQuery必须显式声明初始请求的pageParam值，未配置时首次请求传入的pageParam默认值为undefined
• getNextPageParam返回值错误：当前代码直接返回lastPage?.meta整个对象，没有从中提取下一页请求需要的具体页码值，翻页时传入请求函数的pageParam会是对象类型，不符合接口的数字页码要求
• 接口请求硬编码页码：请求url中写死了pageIndex=0，即便后续拿到正确的pageParam，也没有动态传入请求参数，永远只会拉取第一页数据

修复代码 #

1. 修正useInfiniteQuery配置 #

const useActivityFeedData = () => {
  const {data, fetchNextPage, hasNextPage} = useInfiniteQuery({
    queryKey: ACTIVITY_FEED,
    queryFn: ({pageParam}) => Api.user.getActivityFeedData(pageParam),
    // 配置初始页码，根据你的接口分页规则，第一页从0开始就填0，从1开始就填1
    initialPageParam: 0,
    getNextPageParam: (lastPage) => {
      // 从接口返回的meta中提取分页信息，按实际接口结构调整字段
      const { currentPage, totalPages } = lastPage?.meta || {};
      // 还有下一页时返回下一页的页码，没有则返回undefined（React Query识别为无更多数据）
      return currentPage < totalPages ? currentPage + 1 : undefined;
    },
  });
  console.log(data)
  return { data, fetchNextPage, hasNextPage };
};

2. 修正接口调用逻辑，动态传入页码 #

getActivityFeedData: (pageParam = 0) => {
  console.log(pageParam, 'pageParam');
  // 替换硬编码的pageIndex为传入的pageParam
  return api.get(
    `/rest/s1/eyon/viewer/channel/activity-feed?pageSize=10&pageIndex=${pageParam}`,
    {},
    {},
  );
},

注意：getNextPageParam只有返回非undefined的值时，才会作为下一次请求的pageParam传入，不要直接返回整个分页元数据对象，必须返回接口请求需要的具体参数值（数字页码、游标字符串等）。

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