How to make inifinite scrolling using react- query

在React Query中实现无限滚动加载数据的功能，主要依赖于useInfiniteQuery这个钩子。useInfiniteQuery可以帮助我们方便地处理无限滚动的数据请求、数据存储、缓存更新等功能。下面我将详细介绍如何使用此钩子来实现无限滚动加载数据。

步骤1: 设置查询函数

首先，我们需要定义一个函数，这个函数负责根据页码获取数据。例如，如果我们想从一个API获取文章数据，函数可能看起来像这样：

javascript
const fetchArticles = async ({ pageParam = 1 }) => {
  const response = await fetch(`https://api.example.com/articles?page=${pageParam}`);
  return response.json();
}

这里pageParam是用于API分页的参数，初始时默认为第1页。

步骤2: 使用useInfiniteQuery

在组件中，我们使用useInfiniteQuery并传入我们刚才定义的查询函数：

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

const Articles = () => {
  const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetching,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery('articles', fetchArticles, {
    getNextPageParam: (lastPage, pages) => lastPage.nextPage ?? false,
  });

  // 组件的其它部分...
}

getNextPageParam是一个可选的配置，它决定了如何获取下一页的参数。在这个例子中，我们假设从API返回的结果中包含了下一页的信息。

步骤3: 实现滚动加载

在实际的UI中，我们需要添加逻辑来在用户滚动到页面底部时加载下一页的数据。这通常与一个滚动监听器结合使用：

javascript
useEffect(() => {
  const handleScroll = () => {
    if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight || isFetchingNextPage) return;
    fetchNextPage();
  };

  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, [fetchNextPage, isFetchingNextPage]);

步骤4: 展示数据和加载状态

最后，在您的组件中，您可以根据当前的状态来展示数据和加载状态：

javascript
return (
  <div>
    {status === 'loading' ? (
      <p>Loading...</p>
    ) : status === 'error' ? (
      <p>Error: {error.message}</p>
    ) : (
      <>
        {data.pages.map((group, i) => (
          <React.Fragment key={i}>
            {group.articles.map(article => (
              <p key={article.id}>{article.title}</p>
            ))}
          </React.Fragment>
        ))}
        <div>
          {isFetchingNextPage
            ? 'Loading more...'
            : hasNextPage
            ? 'Load More'
            : 'Nothing more to load'}
        </div>
      </>
    )}
  </div>
);

通过这种方式，我们可以非常简洁地实现无限滚动的功能，同时保持良好的用户体验和性能优化。