如何使用无限查询（TanStack Query）进行无限滚动

这是您的帖子翻译成英文：

---

在这篇文章中，我将教您如何使用 TanStack 查询（特别是无限查询）实现无限滚动。我们将使用 Vite 创建照片源并设置无限滚动。首先，打开终端并运行以下命令来克隆具有基本配置的项目：

git clone --branch start https://github.com/DAVI-REZENDE/photos-feed.git

cd photos-feed
npm i

一切就绪！现在，让我们使用 TanStack 查询库实现无限滚动功能。使用以下命令安装它：

npm i @tanstack/react-query
npm i axios

在 App.tsx 文件中，您会看到代码如下所示：

首先，我们将使用 useInfiniteQuery 替换 useEffect，useInfiniteQuery 是负责管理无限请求的钩子。我们必须为其提供两个属性：queryKey 和 queryFn，如下所示：

const { 
  data, 
  isLoading,
  fetchNextPage,
  isFetchingNextPage, 
  isFetching, 
  hasNextPage 
} = useInfiniteQuery({
    queryFn: fetchPhotos,
    queryKey: ['photos'],
    initialPageParam: 1,
    getNextPageParam: (lastPage) => {
      return lastPage.nextPage
    }
})

各参数说明：

• queryFn：负责返回我们请求数据的函数；它接收当前页面作为参数。
• queryKey：用作请求的标识符，也充当依赖项数组。每次您在其中传递的变量发生变化时，useInfiniteQuery 都会自动重新获取。
• initialPageParam: 初始默认值。
• getNextPageParam：接收 queryFn 函数返回的所有内容，并且必须返回要请求的下一个页码。

我们需要修改 fetchPhotos 函数：

async function fetchPhotos({ pageParam }: { pageParam: number }) {
  const response = await api.get<ImageData[]>('/photos', {
    params: {
      page: pageParam,
      per_page: 5,
    }
  })

  return {
    data: response.data,
    nextPage: pageParam + 1
  }
} 

useInfiniteQuery 钩子返回页面中的数据，因此我们的渲染会略有变化：

<main className="h-screen w-screen bg-zinc-950 flex flex-col gap-6 p-6 items-center text-white overflow-auto">
  {isLoading ? 'Loading...' : (
    <>
      {data?.pages.map((group, i) => (
        <div className="flex flex-col gap-6" key={i}>
          {group.data.map(({ id, urls }) => (
            <img className="aspect-square rounded-md h-[550px] object-cover" src={urls.regular} key={id} />
          ))}
        </div>
      ))}
      <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>
    </>
  )}
</main>

现在，每次用户到达滚动末尾并单击“加载更多”按钮时，数据都会自动附加。

要在用户到达滚动末尾时获取下一页而不需要单击按钮，只需添加以下函数：

function handleScroll(event: UIEvent<HTMLElement>) {
  const { scrollTop, clientHeight, scrollHeight } = event.currentTarget

  if (scrollTop + clientHeight >= scrollHeight) {
    fetchNextPage()
  }
}

并在包装列表的 div 中添加 onScroll 事件，并调用那里的函数。完毕！现在，每次用户滚动到末尾时，都会自动加载新数据。

最后，您的代码应如下所示：

import { useInfiniteQuery } from "@tanstack/react-query"
import { UIEvent } from "react"
import { api } from "./lib/api"

type ImageData = {
  id: string,
  urls: {
    regular: string
  }
}

export function Home() {
  async function fetchPhotos({ pageParam }: { pageParam: number }) {
    const response = await api.get<ImageData[]>('/photos', {
      params: {
        page: pageParam,
        per_page: 5,
      }
    })

    return {
      data: response.data,
      nextPage: pageParam + 1
    }
  } 

  const { data, isLoading, fetchNextPage, isFetchingNextPage, isFetching, hasNextPage } = useInfiniteQuery({
    queryFn: fetchPhotos,
    queryKey: ['photos'],
    initialPageParam: 1,
    getNextPageParam: (lastPage) => {
      return lastPage.nextPage
    }
  })

  function handleScroll(event: UIEvent<HTMLElement>) {
    const { scrollTop, clientHeight, scrollHeight } = event.currentTarget

    if (scrollTop + clientHeight >= scrollHeight) {
      fetchNextPage()
    }
  };


  return (
    <main className="h-screen w-screen bg-zinc-950 flex flex-col gap-6 p-6 items-center text-white overflow-auto" onScroll={handleScroll}>
      {isLoading ? 'Loading...' : (
        <>
          {data?.pages.map((group, i) => (
            <div className="flex flex-col gap-6" key={i}>
              {group.data.map(({ id, urls }) => (
                <img className="aspect-square rounded-md h-[550px] object-cover" src={urls.regular} key={id} />
              ))}
            </div>
          ))}
          <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>
        </>
      )}
    </main>
  )
}

谢谢！

以上是如何使用无限查询（TanStack Query）进行无限滚动的详细内容。更多信息请关注PHP中文网其他相关文章！