So verwenden Sie Infinity Queries (TanStack Query), um unendliches Scrollen durchzuführen-js-Tutorial-php.cn

So verwenden Sie Infinity Queries (TanStack Query), um unendliches Scrollen durchzuführen

Mary-Kate Olsen

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

Original

612 Leute haben es durchsucht

Hier ist Ihr Beitrag ins Englische übersetzt:

In diesem Beitrag zeige ich Ihnen, wie Sie mit TanStack Query, insbesondere mit Infinity Queries, unendliches Scrollen implementieren. Wir erstellen einen Foto-Feed mit Vite und richten das unendliche Scrollen ein. Öffnen Sie zunächst Ihr Terminal und führen Sie den folgenden Befehl aus, um ein Projekt mit Grundkonfigurationen zu klonen:

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

cd photos-feed
npm i

Nach dem Login kopieren

Alles klar! Lassen Sie uns nun die Funktion zum unendlichen Scrollen mithilfe der TanStack Query-Bibliothek implementieren. Installieren Sie es mit dem folgenden Befehl:

npm i @tanstack/react-query
npm i axios

Nach dem Login kopieren

In der App.tsx-Datei sehen Sie, dass Ihr Code so aussieht:

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

Zuerst ersetzen wir useEffect durch useInfiniteQuery, den Hook, der für die Verwaltung unserer unendlichen Anfragen verantwortlich ist. Wir müssen es mit zwei Eigenschaften versehen: queryKey und queryFn, wie folgt:

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

Nach dem Login kopieren

Erläuterung der einzelnen Parameter:

queryFn: Die Funktion, die für die Rückgabe unserer Anfragedaten verantwortlich ist; es erhält die aktuelle Seite als Parameter.
queryKey: Dient als Kennung für Ihre Anfrage und fungiert auch als Abhängigkeitsarray. Jedes Mal, wenn sich eine darin übergebene Variable ändert, ruft useInfiniteQuery automatisch erneut ab.
initialPageParam: Der anfängliche Standardwert.
getNextPageParam: Empfängt alles, was Ihre queryFn-Funktion zurückgibt, und muss die nächste anzufordernde Seitenzahl zurückgeben.

Wir müssen die fetchPhotos-Funktion ändern:

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

Nach dem Login kopieren

Der useInfiniteQuery-Hook gibt die Daten in Seiten zurück, sodass sich unser Rendering geringfügig ändert:

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

Nach dem Login kopieren

Jetzt werden die Daten jedes Mal, wenn der Benutzer das Ende des Bildlaufs erreicht und auf die Schaltfläche „Mehr laden“ klickt, automatisch angehängt.

Um die nächste Seite abzurufen, wenn der Benutzer das Ende des Bildlaufs erreicht, ohne auf die Schaltfläche klicken zu müssen, fügen Sie einfach die folgende Funktion hinzu:

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

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

Nach dem Login kopieren

Und fügen Sie das onScroll-Ereignis in das Div ein, das Ihre Liste umschließt, und rufen Sie dort die Funktion auf. Erledigt! Jetzt werden jedes Mal, wenn der Benutzer bis zum Ende scrollt, automatisch neue Daten geladen.

Am Ende sollte Ihr Code so aussehen:

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

Nach dem Login kopieren

Vielen Dank!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Infinity Queries (TanStack Query), um unendliches Scrollen durchzuführen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!