React Query 如何在无限查询中设置分页参数？

React Query 的无限查询功能允许开发者实现无限滚动或者加载更多内容的特性。要在无限查询中设置分页参数，你需要使用 useInfiniteQuery 钩子，并定义一个函数来获取你的数据页。这个函数通常会接收分页信息，比如页码或者是上一次加载的最后一项。

以下是一个使用 useInfiniteQuery 来设置分页参数的基本例子。

假设我们有一个API，它按页码提供数据，并且每一页有固定数量的项目，API的分页参数为 page：

javascript
import { useInfiniteQuery } from 'react-query';

// 假设此函数负责获取数据并返回分页信息
const fetchProjects = async ({ pageParam = 1 }) => {
  const response = await fetch('/api/projects?page=' + pageParam);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function Projects() {
  const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetching,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery(
    'projects', // 查询的唯一键
    ({ pageParam = 1 }) => fetchProjects({ pageParam }),
    {
      // getNextPageParam 是一个函数，根据当前页的信息返回下一页的参数
      getNextPageParam: (lastPage, pages) => {
        if (lastPage.hasNextPage) {
          return pages.length + 1; // 假设每一页都有 hasNextPage 字段
        } else {
          return undefined; // 没有更多页面时，返回 undefined
        }
      },
    }
  );

  if (status === 'loading') {
    return <p>Loading...</p>;
  }

  if (status === 'error') {
    return <span>Error: {error.message}</span>;
  }

  return (
    <>
      {data.pages.map((group, i) => (
        <React.Fragment key={i}>
          {group.items.map(project => (
            <p key={project.id}>{project.name}</p>
          ))}
        </React.Fragment>
      ))}
      <div>
        <button
          onClick={() => fetchNextPage()}
          disabled={!hasNextPage || isFetchingNextPage}
        >
          {isFetchingNextPage
            ? 'Loading more...'
            : hasNextPage
            ? 'Load More'
            : 'Nothing more to load'}
        </button>
      </div>
      <div>{isFetching && !isFetchingNextPage ? 'Fetching...' : null}</div>
    </>
  );
}

在这个例子中，useInfiniteQuery 的第二个参数是一个获取数据的异步函数，它接收一个对象包含 pageParam 属性，这个属性就是当前请求的页码。getNextPageParam 函数根据当前页返回下一页的页码，如果没有更多页了，就返回 undefined。

当用户触发 fetchNextPage 函数时，React Query 会使用 getNextPageParam 函数的返回值作为下一页的 pageParam，从而实现分页查询。通过这种方式，开发者可以实现无限滚动或者“加载更多”功能，而不需要手动管理分页逻辑。