React Query:何时使用useInfiniteQuery或usePaginatedQuery进行分页

import { useInfiniteQuery } from 'react-query';

const fetchNextPage = async (pageParam = 0) => {
  const response = await fetch(`https://api.example.com/posts?page=${pageParam}`);
  const data = await response.json();
  return data;
};

const ExampleComponent = () => {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery('posts', fetchNextPage, {
    getNextPageParam: (lastPage) => lastPage.nextPage // 获取下一页数据的参数
  });

  return (
    <div>
      {data.pages.map((page, index) => (
        <React.Fragment key={index}>
          {page.posts.map((post) => (
            <div key={post.id}>{post.title}</div>
          ))}
        </React.Fragment>
      ))}
      <button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage}>
        {isFetchingNextPage ? '加载中...' : hasNextPage ? '加载更多' : '没有更多数据了'}
      </button>
    </div>
  );
};

import { usePaginatedQuery } from 'react-query';

const fetchPage = async (page = 1) => {
  const response = await fetch(`https://api.example.com/posts?page=${page}`);
  const data = await response.json();
  return data;
};

const ExampleComponent = () => {
  const { resolvedData, latestData, fetchNextPage, fetchPreviousPage } = usePaginatedQuery('posts', fetchPage);

  return (
    <div>
      {resolvedData.pages.map((page, index) => (
        <React.Fragment key={index}>
          {page.posts.map((post) => (
            <div key={post.id}>{post.title}</div>
          ))}
        </React.Fragment>
      ))}
      <button onClick={() => fetchPreviousPage()} disabled={!resolvedData.previousPage}>
        加载上一页
      </button>
      <button onClick={() => fetchNextPage()} disabled={!resolvedData.nextPage}>
        加载下一页
      </button>
    </div>
  );
};