Uporabite te tehnike za ustvarjanje uporabnih vmesnikov za krmarjenje po nizih podatkov.

Večina aplikacij, ki jih boste razvili, bo upravljala podatke; ko se programi še naprej širijo, jih je lahko vedno več. Ko aplikacije ne uspejo učinkovito upravljati velikih količin podatkov, delujejo slabo.

Paginacija in neskončno drsenje sta dve priljubljeni tehniki, ki ju lahko uporabite za optimizacijo delovanja aplikacije. Lahko vam pomagajo pri učinkovitejšem upravljanju upodabljanja podatkov in izboljšajo splošno uporabniško izkušnjo.

Paginacija in neskončno drsenje z uporabo poizvedbe TanStack

Poizvedba TanStack—prilagoditev React Query—je robustna knjižnica za upravljanje stanja za aplikacije JavaScript. Ponuja učinkovito rešitev za upravljanje stanja aplikacije, med drugimi funkcijami, vključno z nalogami, povezanimi s podatki, kot je predpomnjenje.

Paginacija vključuje razdelitev velikega nabora podatkov na manjše strani, kar uporabnikom omogoča krmarjenje po vsebini v obvladljivih kosih z uporabo navigacijskih gumbov. Nasprotno pa neskončno drsenje zagotavlja bolj dinamično izkušnjo brskanja. Ko se uporabnik pomika, se novi podatki samodejno naložijo in prikažejo, kar odpravlja potrebo po izrecni navigaciji.

instagram viewer

Paginacija in neskončno drsenje sta namenjena učinkovitemu upravljanju in predstavitvi velikih količin podatkov. Izbira med obema je odvisna od podatkovnih zahtev aplikacije.

Tukaj lahko najdete kodo tega projekta GitHub repozitorij.

Nastavitev projekta Next.js

Za začetek ustvarite projekt Next.js. Namestite najnovejšo različico Next.js 13, ki uporablja imenik aplikacij.

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

Nato namestite paket TanStack v svoj projekt z uporabo npm, upravitelj paketov Node.

npm i @tanstack/react-query

Integrirajte poizvedbo TanStack v aplikacijo Next.js

Če želite integrirati TanStack Query v svoj projekt Next.js, morate ustvariti in inicializirati nov primerek TanStack Query v korenu aplikacije – layout.js mapa. Če želite to narediti, uvozite QueryClient in QueryClientProvider iz poizvedbe TanStack. Nato otroški rekvizit ovijte s QueryClientProvider kot sledi:

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

Ta nastavitev zagotavlja, da ima TanStack Query popoln dostop do stanja aplikacije.

Implementirajte paginacijo s kavljem useQuery

The useQuery hook poenostavi pridobivanje in upravljanje podatkov. Z zagotavljanjem parametrov paginacije, kot so številke strani, lahko preprosto pridobite določene podnabore podatkov.

Poleg tega kavelj ponuja različne možnosti in konfiguracije za prilagoditev vaše funkcije pridobivanja podatkov, vključno z nastavitvijo možnosti predpomnilnika, kot tudi učinkovito ravnanje s stanji nalaganja. S temi funkcijami lahko brez težav ustvarite brezhibno izkušnjo označevanja strani.

Zdaj, če želite implementirati paginacijo v aplikaciji Next.js, ustvarite a Pagination/page.js datoteka v src/app imenik. Znotraj te datoteke izvedite naslednje uvoze:

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

Nato definirajte funkcionalno komponento React. Znotraj te komponente morate definirati funkcijo, ki bo pridobila podatke iz zunanjega API-ja. V tem primeru uporabite JSONPlaceholder API da pridobite niz objav.

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
}

Zdaj definirajte kljuko useQuery in kot objekte določite naslednje parametre:

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

The ohrani PreviousData vrednost je prav, ki zagotavlja, da pri pridobivanju novih podatkov aplikacija ohrani prejšnje podatke. The queryKey parameter je matrika, ki vsebuje ključ za poizvedbo, v tem primeru končno točko in trenutno stran, za katero želite pridobiti podatke. Nazadnje, poizvedbaFn parameter, fetchPosts, sproži klic funkcije za pridobivanje podatkov.

Kot smo že omenili, kavelj ponuja več stanj, ki jih lahko razpakirate, podobno kot bi uničenje nizov in objektov, in jih uporabite za izboljšanje uporabniške izkušnje (upodabljanje ustreznih uporabniških vmesnikov) med postopkom pridobivanja podatkov. Ta stanja vključujejo isLoading, jazsError, in več.

Če želite to narediti, vključite naslednjo kodo za upodobitev različnih zaslonov sporočil glede na trenutno stanje potekajočega procesa:

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

Na koncu vključite kodo za elemente JSX, ki bodo upodobljeni na strani brskalnika. Ta koda služi tudi dvema drugim funkcijama:

  • Ko aplikacija pridobi objave iz API-ja, bodo shranjene v podatke spremenljivka, ki jo zagotavlja kljuka useQuery. Ta spremenljivka pomaga upravljati stanje aplikacije. Nato lahko preslikate seznam objav, shranjenih v tej spremenljivki, in jih upodabljate v brskalniku.
  • Če želite dodati dva navigacijska gumba, Prejšnja in Naslednji, da bi uporabnikom omogočili poizvedovanje in ustrezno prikazovanje dodatnih paginiranih podatkov. 
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 koncu zaženite razvojni strežnik.

npm run dev

Nato pojdite na http://localhost: 3000/Paginacija v brskalniku.

Ker ste vključili Paginacija mapo v aplikacija imenik, ga Next.js obravnava kot pot, ki vam omogoča dostop do strani na tem URL-ju.

Neskončno drsenje zagotavlja brezhibno izkušnjo brskanja. Dober primer je YouTube, ki samodejno pridobi nove videoposnetke in jih prikaže, ko se pomaknete navzdol.

The useInfiniteQuery hook vam omogoča implementacijo neskončnega drsenja s pridobivanjem podatkov s strežnika na straneh ter samodejnim pridobivanjem in upodabljanjem naslednje strani podatkov, ko se uporabnik pomika navzdol.

Če želite implementirati neskončno drsenje, dodajte InfiniteScroll/page.js datoteka v src/app imenik. Nato izvedite naslednje uvoze:

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

Nato ustvarite funkcionalno komponento React. Znotraj te komponente, podobno kot implementacija paginacije, ustvarite funkcijo, ki bo pridobila podatke o objavah.

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 razliko od izvedbe paginacije ta koda uvaja dvosekundno zakasnitev pri pridobivanju podatkov v omogočajo uporabniku, da raziskuje trenutne podatke, medtem ko se pomika, da sproži ponovni prenos novega niza podatke.

Zdaj definirajte kavelj useInfiniteQuery. Ko se komponenta prvotno namesti, bo kavelj pridobil prvo stran podatkov s strežnika. Ko se uporabnik pomakne navzdol, bo kavelj samodejno pridobil naslednjo stran podatkov in jo upodobil v 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 objave spremenljivka združi vse objave z različnih strani v en sam niz, kar ima za posledico sploščeno različico podatke spremenljivka. To vam omogoča enostavno preslikavo in upodabljanje posameznih objav.

Če želite slediti pomikanju uporabnikov in naložiti več podatkov, ko je uporabnik blizu dna seznama, lahko določite funkcija, ki uporablja API Intersection Observer za zaznavanje, kdaj se elementi sekajo z vidno polje.

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 koncu vključite elemente JSX za objave, ki se upodabljajo v brskalniku.

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

    •

Ko opravite vse spremembe, obiščite http://localhost: 3000/InfiniteScroll da jih vidim v akciji.

Poizvedba TanStack: več kot le pridobivanje podatkov

Paginacija in neskončno drsenje sta dobra primera, ki poudarjata zmogljivosti poizvedbe TanStack. Preprosto povedano, to je vsestranska knjižnica za upravljanje podatkov.

Z obsežnim naborom funkcij lahko poenostavite procese upravljanja podatkov vaše aplikacije, vključno z učinkovitim ravnanjem s stanjem. Poleg drugih opravil, povezanih s podatki, lahko izboljšate splošno delovanje svojih spletnih aplikacij in uporabniško izkušnjo.