React -query how to use useInfiniteQuery?

React Query 的 useInfiniteQuery 钩子用于实现无限滚动加载数据模式。这个钩子允许您按页码或任何其他逻辑一步步加载数据，并且随着用户的滚动或交互将更多数据加载到列表中。

在使用 useInfiniteQuery 时，您需要提供一个唯一的缓存键和一个函数来获取数据。这个函数接收一个对象，其中包含获取下一页数据所需的信息，例如 pageParam。

以下是如何使用 useInfiniteQuery 的一个基本示例：

jsx
import { useInfiniteQuery } from 'react-query';
import axios from 'axios';

// 假设我们有一个API，根据页码返回特定页的数据
const fetchProjects = ({ pageParam = 1 }) => {
  return axios.get('/api/projects?page=' + pageParam);
};

function Projects() {
  // 使用 useInfiniteQuery 钩子
  const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery('projects', fetchProjects, {
    // 获取下一页数据的参数
    getNextPageParam: (lastPage, pages) => {
      // 可以根据返回的最后一页数据和已有页面数组来决定下一页的参数
      return lastPage.nextPage ?? false; // 假设API响应中包含了下一页的参数
    },
  });

  // 渲染组件
  return (
    <div>
      {status === 'loading' && <p>Loading...</p>}
      {status === 'error' && <p>Error: {error.message}</p>}

      {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>
  );
}

export default Projects;

在这个示例中，fetchProjects 是一个调用 API 获取项目数据的函数。我们使用 useInfiniteQuery 来加载这些数据，它的第一个参数是缓存键（这里是 'projects'），第二个参数是获取数据的函数，第三个参数是一个配置对象，包含了 getNextPageParam 函数。这个函数用于确定如何获取下一页的数据。

useInfiniteQuery 返回了一组属性和方法，其中：

• data 是一个包含每页加载数据的对象。
• error 包含错误信息。
• fetchNextPage 是一个函数，用于加载下一页数据。
• hasNextPage 是一个布尔值，表示是否还有更多页可以加载。
• isFetchingNextPage 是一个布尔值，表示当前是否正在加载下一页数据。
• status 是请求的状态，可以是 'loading'、'error' 或 'success'。

在 UI 中，我们展开每页加载的数据，并在底部提供一个按钮来加载更多数据。按钮的禁用状态取决于是否有下一页以及是否正在加载下一页。

这只是一个简化的示例，实际应用中可能还需要考虑其他因素，比如缓存管理、数据同步、错误处理等。