如何使用無限查詢（TanStack Query）進行無限滾動-js教程-PHP中文網

如何使用無限查詢（TanStack Query）進行無限滾動

Mary-Kate Olsen

發布： 2024-11-10 10:01:02

原創

611 人瀏覽過

這是您的貼文翻譯成英文：

在這篇文章中，我將教您如何使用 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 檔案中，您會看到程式碼如下所示：

How to use Infinity Queries (TanStack Query) to do infinite scrolling

首先，我們將使用 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中文網其他相關文章！