React-Query useInfiniteQuery配合getStaticProps预取无数据问题

使用react-query的useInfiniteQuery拉取分页数据时出现异常：无法成功获取数据，react-query-devtools中也没有对应数据展示，相关实现代码如下：

Page.tsx #

export async function getStaticProps(): Promise<
  GetStaticPropsResult<{ dehydratedState: DehydratedState }>
> {
  await queryClient.prefetchInfiniteQuery(['randomVideos'], fetchRandomVideos);
return {
    props: {
      dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient)))
    },
    revalidate: 60 * 60
  };
}

Requests.ts #

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'],
    ({ pageParam }) => fetchRandomVideos({ pageParam })(),
    {
      getNextPageParam: (lastPageData) => lastPageData?.data.next_page_url
    }
  );
}

一共两个核心问题：

1. 查询函数调用语法错误
   fetchRandomVideos接收参数后，本身就会返回请求Promise对象。你在useInfiniteQuery的查询回调末尾多写了一对括号()，相当于拿到Promise之后又尝试把Promise当函数调用，会直接抛出TypeError: Promise is not a function错误，导致查询全程执行失败，自然拿不到数据，devtools也不会生成有效缓存记录。
2. 下一页参数返回值不符合接口要求
   你的接口分页参数page需要接收数字类型的页码，但getNextPageParam返回的是完整的next_page_url字符串，后续触发加载更多时，会把这个字符串作为pageParam传入请求，直接导致接口参数错误，无法正常返回分页数据。

• 删掉查询回调末尾多余的括号，直接返回fetchRandomVideos的执行结果即可
• 调整getNextPageParam的逻辑，从接口返回值中解析出下一页对应的数字页码，没有下一页时返回undefined标识分页结束
  修正后的useRandomVideosQuery参考代码：

export function useRandomVideosQuery() {
  return useInfiniteQuery(
    ['randomVideos'],
    ({ pageParam = 1 }) => fetchRandomVideos({ pageParam }),
    {
      getNextPageParam: (lastPageData) => {
        // 按自己接口实际返回结构解析下一页页码，无下一页返回undefined
        return lastPageData?.data.next_page ?? undefined
      }
    }
  );
}

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