React Query v3 useInfiniteQuery分页查询异常问题排查

基础信息 #

• 技术栈版本：
  • typescript: 4.7.2
  • react-query: ^3.39.1
  • next: 12.1.6
  • react/react-dom: ^18.1.0
• 实现目标：基于Next.js+TypeScript项目实现随机视频列表无限分页加载
• 问题现象：分页逻辑运行异常，无法定位代码问题

问题代码 #

export function fetchRandomVideos({ pageParam = 1 }) {
  return Request.get<PaginatedResponseBody<TRandomVideo>>(
    endpoints.RANDOM_VIDEOS,
    {
      params: {
        page: pageParam,
        per_page: 10
      }
    }
  );
}

export function useRandomVideosQuery() {
  return useInfiniteQuery('randomVideos', fetchRandomVideos, {
    getNextPageParam: (lastPageData: PaginatedResponseBody<TRandomVideo>) => {
      console.log(lastPageData);
      return lastPageData.data.next_page_url;
    }
  });
}

异常截图 #

错误点与修复方案 #

1. pageParam类型不匹配（核心错误） #

你的fetchRandomVideos函数默认将pageParam作为数字类型页码处理（初始默认值为1，直接赋值给请求参数page），但getNextPageParam返回的是next_page_url完整URL字符串。
触发第二页加载时，传入fetch函数的pageParam会是URL字符串，直接传给page参数会导致接口无法识别正确页码，请求异常。

修复方案（适配现有fetch逻辑，返回数字页码）：

getNextPageParam: (lastPageData: PaginatedResponseBody<TRandomVideo>) => {
  // 无下一页时返回undefined，终止无限加载
  if (!lastPageData.data.next_page_url) return undefined;
  // 从下一页地址中解析出数字页码
  const nextPageUrl = new URL(lastPageData.data.next_page_url);
  return Number(nextPageUrl.searchParams.get('page'));
}

如果你需要直接使用next_page_url作为请求地址，需要同步修改fetch函数逻辑，识别pageParam为URL时直接发起请求，不再拼接固定endpoint和page参数。

2. Query Key格式不规范 #

React Query v3 官方推荐query key使用数组格式，字符串格式虽然兼容，但后续如果需要给查询追加参数、匹配缓存时容易出现隐式问题，建议将key从字符串'randomVideos'改为数组['randomVideos']。

3. 返回值取值层级校验 #

你当前代码从lastPageData.data.next_page_url取值，需要核对Request封装的返回结构：如果你的Request是基于Axios封装，Axios会把接口响应体放在自身的data字段下，若接口返回的分页结构本身也有data字段，实际next_page_url的路径应为lastPageData.data.data.next_page_url，可以结合你代码中console打印的lastPageData结构核对，避免取值为undefined导致无法触发下一页加载。

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