Cara menggunakan Infinity Queries (TanStack Query) untuk melakukan penatalan infiniti-tutorial js-php.cn

Cara menggunakan Infinity Queries (TanStack Query) untuk melakukan penatalan infiniti

Mary-Kate Olsen

Lepaskan： 2024-11-10 10:01:02

asal

612 orang telah melayarinya

Berikut ialah siaran anda diterjemahkan ke dalam bahasa Inggeris:

Dalam siaran ini, saya akan mengajar anda cara melaksanakan penatalan infiniti menggunakan TanStack Query, khususnya dengan Infinity Query. Kami akan membuat suapan foto dengan Vite dan menyediakan penatalan tanpa had. Untuk memulakan, buka terminal anda dan jalankan arahan berikut untuk mengklon projek dengan konfigurasi asas:

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

cd photos-feed
npm i

Salin selepas log masuk

Semua siap! Sekarang, mari kita laksanakan fungsi tatal tak terhingga menggunakan perpustakaan Pertanyaan TanStack. Pasangnya dengan arahan di bawah:

npm i @tanstack/react-query
npm i axios

Salin selepas log masuk

Dalam fail App.tsx, anda akan melihat bahawa kod anda kelihatan seperti ini:

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

Pertama, kami akan menggantikan useEffect dengan useInfiniteQuery, cangkuk yang bertanggungjawab untuk mengurus permintaan kami yang tidak terhingga. Kami mesti menyediakannya dengan dua sifat: queryKey dan queryFn, seperti berikut:

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

Salin selepas log masuk

Penjelasan setiap parameter:

queryFn: Fungsi yang bertanggungjawab untuk mengembalikan data permintaan kami; ia menerima halaman semasa sebagai parameter.
queryKey: Berfungsi sebagai pengecam untuk permintaan anda, juga bertindak sebagai tatasusunan kebergantungan. Setiap kali pembolehubah yang anda lalui di dalamnya berubah, useInfiniteQuery akan mengambil semula secara automatik.
initialPageParam: Nilai lalai awal.
getNextPageParam: Menerima semua fungsi queryFn anda dikembalikan dan mesti mengembalikan nombor halaman seterusnya untuk diminta.

Kami perlu mengubah suai fungsi 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
  }
}

Salin selepas log masuk

Kait useInfiniteQuery mengembalikan data dalam halaman, jadi pemaparan kami akan berubah sedikit:

<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>

Salin selepas log masuk

Kini, setiap kali pengguna mencapai penghujung tatal dan mengklik butang ‘Muat Lagi’, data akan ditambahkan secara automatik.

Untuk mengambil halaman seterusnya apabila pengguna mencapai penghujung skrol tanpa perlu mengklik butang, cuma tambah fungsi berikut:

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

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

Salin selepas log masuk

Dan tambahkan acara onScroll dalam div yang membungkus senarai anda, memanggil fungsi di sana. Selesai! Kini, setiap kali pengguna menatal ke penghujung, data baharu akan dimuatkan secara automatik.

Pada akhirnya, kod anda sepatutnya kelihatan seperti ini:

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

Salin selepas log masuk

Terima kasih!

Atas ialah kandungan terperinci Cara menggunakan Infinity Queries (TanStack Query) untuk melakukan penatalan infiniti. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!