Bruk disse teknikkene til å lage brukbare grensesnitt for å navigere i datasett.

De fleste apper du vil utvikle vil administrere data; etter hvert som programmene fortsetter å skalere, kan det bli en stadig større mengde av det. Når applikasjoner ikke klarer å administrere store datamengder effektivt, gir de dårlige resultater.

Paginering og uendelig rulling er to populære teknikker du kan bruke for å optimalisere appytelsen. De kan hjelpe deg med å håndtere datagjengivelse mer effektivt og forbedre den generelle brukeropplevelsen.

Paginering og uendelig rulling ved hjelp av TanStack Query

TanStack-spørring—en tilpasning av React Query — er et robust tilstandsadministrasjonsbibliotek for JavaScript-applikasjoner. Den tilbyr en effektiv løsning for å administrere applikasjonstilstand, blant andre funksjoner, inkludert datarelaterte oppgaver som hurtigbufring.

Paginering innebærer å dele et stort datasett i mindre sider, slik at brukerne kan navigere innholdet i håndterbare deler ved hjelp av navigasjonsknapper. I kontrast gir uendelig rulling en mer dynamisk nettleseropplevelse. Når brukeren ruller, lastes og vises nye data automatisk, noe som eliminerer behovet for eksplisitt navigering.

instagram viewer

Paginering og uendelig rulling har som mål å effektivt administrere og presentere store datamengder. Valget mellom de to avhenger av applikasjonens datakrav.

Du finner dette prosjektets kode i denne GitHub oppbevaringssted.

Sette opp et Next.js-prosjekt

For å komme i gang, lag et Next.js-prosjekt. Installer siste versjon av Next.js 13 som bruker appkatalogen.

npx create-next-app@latest next-project --app

Installer deretter TanStack-pakken i prosjektet ditt ved å bruke npm, Node-pakkebehandleren.

npm i @tanstack/react-query

Integrer TanStack Query i Next.js-applikasjonen

For å integrere TanStack Query i Next.js-prosjektet ditt, må du opprette og initialisere en ny forekomst av TanStack Query i roten av applikasjonen – layout.js fil. For å gjøre det, importer QueryClient og QueryClientProvider fra TanStack Query. Pakk deretter inn rekvisitten til barna QueryClientProvider følgende:

"use client"
import React from'react'
import { QueryClient, QueryClientProvider } from'@tanstack/react-query';
const metadata = {
 title: 'Create Next App',
 description: 'Generated by create next app',
};


exportdefaultfunctionRootLayout({ children }) {
const queryClient = new QueryClient();


return (
"en">



 {children}
 </QueryClientProvider>
 </body>
 </html>
 );
}
export { metadata };

Dette oppsettet sikrer at TanStack Query har full tilgang til applikasjonens tilstand.

Implementer paginering ved å bruke useQuery Hook

De useQuery hook effektiviserer henting og administrasjon av data. Ved å oppgi pagineringsparametere, for eksempel sidetall, kan du enkelt hente spesifikke delsett av data.

I tillegg gir kroken ulike alternativer og konfigurasjoner for å tilpasse datahentingsfunksjonaliteten din, inkludert innstilling av hurtigbufferalternativer, samt håndtering av lastetilstander effektivt. Med disse funksjonene kan du enkelt lage en sømløs pagineringsopplevelse.

Nå, for å implementere paginering i Next.js-appen, lag en Paginering/page.js fil i src/app katalog. Inne i denne filen gjør du følgende importer:

"use client"
import React, { useState } from'react';
import { useQuery} from'@tanstack/react-query';
import'./page.styles.css';

Definer deretter en React funksjonell komponent. Inne i denne komponenten må du definere en funksjon som skal hente data fra en ekstern API. I dette tilfellet, bruk JSONPlaceholder API for å hente et sett med innlegg.

exportdefaultfunctionPagination() {
const [page, setPage] = useState(1);
const fetchPosts = async () => {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts?
 _page=${page}&_limit=10`);


if (!response.ok) {
thrownewError('Failed to fetch posts');
 }


const data = await response.json();
return data;
 } catch (error) {
console.error(error);
throw error;
 }
 };
// add the following code here
}

Definer nå useQuery-kroken, og spesifiser følgende parametere som objekter:

const { isLoading, isError, error, data } = useQuery({
 keepPreviousData: true,
 queryKey: ['posts', page],
 queryFn: fetchPosts,
 });

De keepPreviousData verdien er ekte, som sikrer at appen bevarer de tidligere dataene mens den henter nye data. De queryKey parameter er en matrise som inneholder nøkkelen for spørringen, i dette tilfellet endepunktet og den gjeldende siden du vil hente data for. Til slutt, den queryFn parameter, hente innlegg, utløser funksjonskallet for å hente data.

Som nevnt tidligere, gir kroken flere tilstander som du kan pakke ut, på samme måte som du ville gjort destrukturere matriser og objekter, og bruke dem til å forbedre brukeropplevelsen (gjengivelse av passende brukergrensesnitt) under datahentingsprosessen. Disse statene inkluderer er Laster, JegsFeil, og mer.

For å gjøre det, ta med følgende kode for å gjengi forskjellige meldingsskjermer basert på den nåværende tilstanden til den pågående prosessen:

if (isLoading) {
return (<h2>Loading...h2>);
 }
if (isError) {
return (<h2className="error-message">{error.message}h2>); 
 }

Til slutt inkluderer du koden for JSX-elementene som skal gjengis på nettlesersiden. Denne koden har også to andre funksjoner:

  • Når appen henter innleggene fra API-en, vil de bli lagret i data variabel levert av useQuery-kroken. Denne variabelen hjelper til med å administrere applikasjonens tilstand. Du kan deretter kartlegge listen over innlegg som er lagret i denne variabelen, og gjengi dem i nettleseren.
  • For å legge til to navigasjonsknapper, Tidligere og Neste, for å tillate brukere å spørre og vise ytterligere paginerte data tilsvarende. 
return (


"header">Next.js Pagination</h2> 
 {data && (
"card">
    "post-list"> 
     {data.map((post) => (
  • "post-item">{post.title}</li> 
     ))}
     </ul>
     </div>
     )}
    'btn-container'>
     onClick={() => setPage(prevState =>Math.max(prevState - 1, 0))}
     disabled={page 1}
     className="prev-button"
     >Prev Page</button>

    

    • 







 onClick={() => setPage(prevState => prevState + 1)}
 className="next-button"
 >Next Page</button>
 </div>
 </div>
 );

Til slutt, start utviklingsserveren.

npm run dev

Gå deretter over til http://localhost: 3000/Page i en nettleser.

Siden du inkluderte Paginering mappe i app katalogen, behandler Next.js den som en rute, slik at du får tilgang til siden på den nettadressen.

Uendelig rulling gir en sømløs nettleseropplevelse. Et godt eksempel er YouTube, som henter nye videoer automatisk og viser dem mens du ruller nedover.

De bruk InfiniteQuery hook lar deg implementere uendelig rulling ved å hente data fra en server i sider og automatisk hente og gjengi neste side med data når brukeren ruller nedover.

For å implementere uendelig rulling, legg til en InfiniteScroll/page.js fil i src/app katalog. Foreta deretter følgende importer:

"use client"
import React, { useRef, useEffect, useState } from'react';
import { useInfiniteQuery } from'@tanstack/react-query';
import'./page.styles.css';

Deretter oppretter du en React-funksjonell komponent. Inne i denne komponenten, lik pagineringsimplementeringen, lag en funksjon som vil hente postenes data.

exportdefaultfunctionInfiniteScroll() {
const listRef = useRef(null);
const [isLoadingMore, setIsLoadingMore] = useState(false);
const fetchPosts = async ({ pageParam = 1 }) => {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts?
 _page=${pageParam}&_limit=5`);


if (!response.ok) {
thrownewError('Failed to fetch posts');
 }


const data = await response.json();
awaitnewPromise((resolve) => setTimeout(resolve, 2000));
return data;
 } catch (error) {
console.error(error);
throw error;
 }
 };
// add the following code here
}

I motsetning til pagineringsimplementeringen, introduserer denne koden en to-sekunders forsinkelse når data hentes til la en bruker utforske gjeldende data mens de ruller for å utløse en gjenhenting av et nytt sett med data.

Definer nå useInfiniteQuery-kroken. Når komponenten først monteres, vil kroken hente den første siden med data fra serveren. Når brukeren ruller nedover, henter kroken automatisk neste side med data og gjengir den i komponenten.

const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery({
 queryKey: ['posts'],
 queryFn: fetchPosts,
 getNextPageParam: (lastPage, allPages) => {
if (lastPage.length < 5) {
returnundefined;
 }
return allPages.length + 1;
 },
 });
const posts = data? data.pages.flatMap((page) => page): [];

De innlegg variabel kombinerer alle innleggene fra forskjellige sider til en enkelt matrise, noe som resulterer i en flatet versjon av data variabel. Dette lar deg enkelt kartlegge og gjengi de enkelte innleggene.

For å spore brukerrulling og laste inn mer data når brukeren er nær bunnen av listen, kan du definere en funksjon som bruker Intersection Observer API for å oppdage når elementer krysser hverandre med viewport.

const handleIntersection = (entries) => {
if (entries[0].isIntersecting && hasNextPage && !isFetching && !isLoadingMore) {
 setIsLoadingMore(true);
 fetchNextPage();
 }
 };
 useEffect(() => {
const observer = new IntersectionObserver(handleIntersection, { threshold: 0.1 });


if (listRef.current) {
 observer.observe(listRef.current);
 }


return() => {
if (listRef.current) {
 observer.unobserve(listRef.current);
 }
 };
 }, [listRef, handleIntersection]);
 useEffect(() => {
if (!isFetching) {
 setIsLoadingMore(false);
 }
 }, [isFetching]);

Til slutt inkluderer JSX-elementene for innleggene som gjengis i nettleseren.

return (


"header">Infinite Scroll</h2>
    "post-list">
     {posts.map((post) => (
  • "post-item">
     {post.title}
     </li>
     ))}
     </ul>
    "loading-indicator">
     {isFetching? 'Fetching...': isLoadingMore? 'Loading more...': null}
     </div>
     </div>
     );
    

    •

Når du har gjort alle endringene, besøk http://localhost: 3000/InfiniteScroll å se dem i aksjon.

TanStack Query: Mer enn bare datahenting

Paginering og uendelig rulling er gode eksempler som fremhever mulighetene til TanStack Query. Enkelt sagt, det er et allsidig databehandlingsbibliotek.

Med det omfattende sett med funksjoner kan du strømlinjeforme appens databehandlingsprosesser, inkludert effektiv håndtering av staten. Ved siden av andre datarelaterte oppgaver kan du forbedre den generelle ytelsen til nettapplikasjonene dine, så vel som brukeropplevelsen.