Koristite ove tehnike za stvaranje korisnih sučelja za navigaciju skupovima podataka.

Većina aplikacija koje ćete razviti upravljat će podacima; kako se programi nastavljaju širiti, može ih biti sve više. Kada aplikacije ne uspijevaju učinkovito upravljati velikom količinom podataka, rade loše.

Paginacija i beskonačno pomicanje dvije su popularne tehnike koje možete koristiti za optimizaciju performansi aplikacije. Mogu vam pomoći da učinkovitije upravljate prikazom podataka i poboljšate cjelokupno korisničko iskustvo.

Označavanje stranica i beskonačno pomicanje pomoću TanStack upita

TanStack upit—prilagodba React Queryja—je robusna biblioteka za upravljanje stanjem za JavaScript aplikacije. Nudi učinkovito rješenje za upravljanje stanjem aplikacije, među ostalim funkcijama, uključujući zadatke povezane s podacima kao što je predmemorija.

Paginacija uključuje dijeljenje velikog skupa podataka na manje stranice, omogućujući korisnicima da se kreću sadržajem u upravljivim dijelovima pomoću navigacijskih gumba. Nasuprot tome, beskonačno pomicanje pruža dinamičnije iskustvo pregledavanja. Kako se korisnik pomiče, novi se podaci automatski učitavaju i prikazuju, eliminirajući potrebu za eksplicitnom navigacijom.

instagram viewer

Paginacija i beskonačno pomicanje imaju za cilj učinkovito upravljanje i prezentaciju velikih količina podataka. Izbor između to dvoje ovisi o zahtjevima aplikacije za podatke.

Kôd ovog projekta možete pronaći ovdje GitHub spremište.

Postavljanje Next.js projekta

Za početak izradite Next.js projekt. Instalirajte najnovija verzija Next.js 13 koja koristi imenik aplikacija.

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

Zatim instalirajte paket TanStack u svoj projekt pomoću npm, upravitelj paketa Node.

npm i @tanstack/react-query

Integrirajte TanStack upit u aplikaciju Next.js

Da biste integrirali TanStack Query u svoj Next.js projekt, trebate stvoriti i inicijalizirati novu instancu TanStack Query u korijenu aplikacije— izgled.js datoteka. Da biste to učinili, uvezite QueryClient i QueryClientProvider iz TanStack upita. Zatim omotajte dječji rekvizit sa QueryClientProvider kako slijedi:

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

Ova postavka osigurava da TanStack Query ima potpuni pristup stanju aplikacije.

Implementirajte paginaciju pomoću kuke useQuery

The useQuery kuka pojednostavljuje dohvaćanje podataka i upravljanje njima. Davanjem parametara paginacije, kao što su brojevi stranica, možete jednostavno dohvatiti određene podskupove podataka.

Dodatno, kuka pruža različite opcije i konfiguracije za prilagodbu vaše funkcije dohvaćanja podataka, uključujući postavljanje opcija predmemorije, kao i učinkovito rukovanje stanjima učitavanja. S ovim značajkama možete bez napora stvoriti besprijekorno iskustvo označavanja stranica.

Sada, za implementaciju paginacije u aplikaciji Next.js, stvorite Paginacija/stranica.js datoteka u src/aplikacija imenik. Unutar ove datoteke napravite sljedeće uvoze:

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

Zatim definirajte funkcionalnu komponentu Reacta. Unutar ove komponente trebate definirati funkciju koja će dohvaćati podatke iz vanjskog API-ja. U ovom slučaju koristite JSONPlaceholder API dohvatiti skup postova.

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
}

Sada definirajte useQuery kuku i navedite sljedeće parametre kao objekte:

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

The zadržatiPrethodnePodatke vrijednost je pravi, koji osigurava da aplikacija, dok dohvaća nove podatke, čuva prethodne podatke. The queryKey parametar je niz koji sadrži ključ za upit, u ovom slučaju, krajnju točku i trenutnu stranicu za koju želite dohvatiti podatke. Na kraju, upitFn parametar, fetchPosts, pokreće poziv funkcije za dohvaćanje podataka.

Kao što je ranije spomenuto, kuka nudi nekoliko stanja koja možete raspakirati, slično kao što biste to učinili uništavanje nizova i objekata, te ih koristiti za poboljšanje korisničkog iskustva (renderiranje odgovarajućih korisničkih sučelja) tijekom procesa dohvaćanja podataka. Ova stanja uključuju isLoading, isGreška, i više.

Da biste to učinili, uključite sljedeći kod za prikaz različitih zaslona poruka na temelju trenutnog stanja procesa koji je u tijeku:

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

Na kraju uključite kod za JSX elemente koji će se prikazati na stranici preglednika. Ovaj kod također služi dvije druge funkcije:

  • Nakon što aplikacija dohvati postove iz API-ja, oni će biti pohranjeni u podaci varijabla koju pruža useQuery kuka. Ova varijabla pomaže u upravljanju stanjem aplikacije. Zatim možete mapirati popis objava pohranjenih u ovoj varijabli i prikazati ih u pregledniku.
  • Da biste dodali dva gumba za navigaciju, Prethodno i Sljedeći, kako bi se korisnicima omogućilo traženje i prikaz dodatnih paginiranih podataka u skladu s tim. 
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>
 );

Na kraju pokrenite razvojni poslužitelj.

npm run dev

Zatim idite na http://localhost: 3000/Paginacija u pregledniku.

Budući da ste uključili Paginacija mapu u aplikacija imenik, Next.js ga tretira kao rutu, dopuštajući vam pristup stranici na tom URL-u.

Beskonačno pomicanje pruža besprijekorno iskustvo pregledavanja. Dobar primjer je YouTube, koji automatski dohvaća nove videozapise i prikazuje ih dok se pomičete prema dolje.

The useInfiniteQuery hook vam omogućuje implementaciju beskonačnog pomicanja dohvaćanjem podataka s poslužitelja u stranicama i automatskim dohvaćanjem i renderiranjem sljedeće stranice podataka dok se korisnik pomiče prema dolje.

Da biste implementirali beskonačno pomicanje, dodajte InfiniteScroll/page.js datoteka u src/aplikacija imenik. Zatim izvršite sljedeće uvoze:

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

Zatim izradite React funkcionalnu komponentu. Unutar ove komponente, slično implementaciji paginacije, stvorite funkciju koja će dohvaćati podatke o objavama.

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
}

Za razliku od implementacije paginacije, ovaj kod uvodi odgodu od dvije sekunde prilikom dohvaćanja podataka dopustiti korisniku da istraži trenutne podatke dok se pomiče kako bi pokrenuo ponovno dohvaćanje novog skupa podaci.

Sada definirajte useInfiniteQuery kuku. Kada se komponenta inicijalno montira, kuka će dohvatiti prvu stranicu podataka s poslužitelja. Kako se korisnik pomiče prema dolje, kuka će automatski dohvatiti sljedeću stranicu podataka i prikazati je u komponenti.

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): [];

The postovi varijabla kombinira sve postove s različitih stranica u jedno polje, što rezultira spljoštenom verzijom podaci varijabla. To vam omogućuje jednostavno mapiranje i renderiranje pojedinačnih postova.

Da biste pratili kretanje korisnika i učitavali više podataka kada je korisnik blizu dna popisa, možete definirati funkcija koja koristi Intersection Observer API za otkrivanje kada se elementi sijeku s prozor za prikaz.

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]);

Na kraju, uključite JSX elemente za postove koji se prikazuju u pregledniku.

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

    •

Nakon što napravite sve promjene, posjetite http://localhost: 3000/Beskonačni svitak vidjeti ih na djelu.

TanStack upit: Više od pukog dohvaćanja podataka

Paginacija i beskonačno pomicanje dobri su primjeri koji ističu mogućnosti TanStack Queryja. Jednostavno rečeno, to je sveobuhvatna biblioteka za upravljanje podacima.

Uz opsežan skup značajki, možete pojednostaviti procese upravljanja podacima svoje aplikacije, uključujući učinkovito rukovanje stanjem. Uz druge zadatke vezane uz podatke, možete poboljšati cjelokupnu izvedbu svojih web aplikacija, kao i korisničko iskustvo.