使用react-query的infiniteQuery结合动态参数时的分页参数传递问题

你当前的代码里，useInfiniteQuery 的查询函数没有接收分页参数，导致调用 searchPosts 时没传递 page，自然接口URL里不会出现?page=参数。

解决方案 #

修改查询函数，接收 useInfiniteQuery 传入的 pageParam 参数，并将其传递给 searchPosts：

const {
    status,
    data: Articles,
    error,
    isLoading,
    isFetchingNextPage,
    fetchNextPage,
    hasNextPage,
} = useInfiniteQuery(
    ['get-By-Query-Param', q], 
    // 接收上下文参数，获取pageParam，默认第一页为1
    ({ pageParam = 1 }) => searchPosts({ search: q, page: pageParam }),
    {
        getNextPageParam: (lastPage) => 
            lastPage?.current_page < lastPage?.last_page 
                ? lastPage?.current_page + 1 
                : undefined,
    },
)

关键说明 #

• useInfiniteQuery 的查询函数会接收一个上下文对象，其中的 pageParam 就是你在 getNextPageParam 里返回的分页值
• 首次请求时 pageParam 不存在，所以给它设默认值1，确保第一页也能传递正确的page参数
• 把 page: pageParam 加入 searchPosts 的参数中，这样接口请求就会带上?page=参数

另外要确保 searchPosts 函数内部会把传入的 page 参数拼接到请求URL里，比如：

async function searchPosts({ search, page }) {
    const response = await fetch(`/api/posts?search=${search}&page=${page}`);
    return response.json();
}

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