React-query useInfiniteQuery的getNextPageParam失效问题求助

问题原因分析 #

你的代码存在两个关键问题，导致getNextPageParam无法触发下一页请求：

1. 查询函数参数匹配错误
   useInfiniteQuery 向查询函数传递的分页参数是pageParam，而非你定义的pars。这会导致调用fetchNextPage时，getNextPageParam返回的下一页参数无法传递到getProductItems中，下一页请求仍使用初始params，相当于重复请求第一页，React Query不会触发重复参数的请求。

2. select函数截断分页数据
   你的select函数仅返回第一页数据data.pages[0].result.data，既丢失了后续页数据，也不利于直观查看分页状态变化，增加调试难度。

修复后的代码 #

const getProductItems = async (par) => {
  console.log("axios :", par);
  const res = await axios.get(`/api/v1/products`, {
    params: par,
  });

  return {
    result: res.data,
  };
};

export default function useGetProductItems(params) {
  const { data, isLoading, fetchNextPage, hasNextPage, isFetching } =
    useInfiniteQuery(
      ["getItems", params], // 将params加入查询键，确保参数变化时重新发起请求
      ({ pageParam = params }) => getProductItems(pageParam), // 修正为接收pageParam参数
      {
        getNextPageParam: (lastPage) => {
          const { pageInfo } = lastPage.result;
          // 必须判断是否存在下一页，示例以当前页小于总页数为例
          const hasMore = pageInfo.page < pageInfo.totalPage;
          // 返回undefined时，hasNextPage会自动设为false，停止触发下一页请求
          if (!hasMore) return undefined;
          
          const nextParams = {
            ...pageInfo,
            page: pageInfo.page + 1,
          };
          console.log("next :", nextParams);
          return nextParams;
        },
        select: (data) => {
          // 合并所有页的数据，而非仅保留第一页
          return data.pages.flatMap(page => page.result.data);
        },
      }
    );

  return {
    data,
    isLoading,
    fetchNextPage,
    hasNextPage,
    isFetching,
  };
}

API返回数据的要求 #

useInfiniteQuery 没有强制的API返回格式，但必须返回足够的分页元数据，让getNextPageParam能判断是否存在下一页并生成下一页请求参数。通常需要包含：

• 当前页码（如page）
• 总页数（如totalPage）或总数据条数（如total）
• 或者直接返回是否有下一页的标识（如hasNext）

如果API未返回这些元数据，将无法准确判断分页边界，要么无法触发下一页请求，要么会发起无限重复请求。

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