Pomocou týchto techník vytvorte použiteľné rozhrania na navigáciu množín údajov.

Väčšina aplikácií, ktoré budete vyvíjať, bude spravovať údaje; ako sa programy neustále rozširujú, môže ich byť čoraz väčšie množstvo. Keď aplikácie nedokážu efektívne spravovať veľké množstvo údajov, fungujú zle.

Stránkovanie a nekonečné posúvanie sú dve obľúbené techniky, ktoré môžete použiť na optimalizáciu výkonu aplikácie. Môžu vám pomôcť efektívnejšie zvládnuť vykresľovanie údajov a zlepšiť celkovú používateľskú skúsenosť.

Stránkovanie a nekonečné posúvanie pomocou dotazu TanStack

Dotaz TanStack—adaptácia React Query — je robustná knižnica správy stavu pre aplikácie JavaScript. Ponúka efektívne riešenie pre správu stavu aplikácií, okrem iných funkcií, vrátane úloh súvisiacich s údajmi, ako je ukladanie do vyrovnávacej pamäte.

Stránkovanie zahŕňa rozdelenie veľkého súboru údajov na menšie stránky, čo používateľom umožňuje prechádzať obsahom v spravovateľných častiach pomocou navigačných tlačidiel. Naproti tomu nekonečné posúvanie poskytuje dynamickejší zážitok z prehliadania. Keď používateľ roluje, nové údaje sa načítavajú a zobrazujú automaticky, čím sa eliminuje potreba explicitnej navigácie.

instagram viewer

Stránkovanie a nekonečné posúvanie majú za cieľ efektívne spravovať a prezentovať veľké množstvo údajov. Výber medzi týmito dvoma závisí od požiadaviek aplikácie na údaje.

Kód tohto projektu nájdete v tomto GitHub Úložisko.

Nastavenie projektu Next.js

Ak chcete začať, vytvorte projekt Next.js. Nainštalujte najnovšiu verziu Next.js 13, ktorá používa adresár App.

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

Ďalej nainštalujte balík TanStack vo svojom projekte pomocou npm, správca balíkov Node.

npm i @tanstack/react-query

Integrujte TanStack Query do aplikácie Next.js

Ak chcete integrovať TanStack Query do svojho projektu Next.js, musíte vytvoriť a inicializovať novú inštanciu TanStack Query v koreňovom adresári aplikácie – layout.js súbor. Ak to chcete urobiť, importujte QueryClient a QueryClientProvider z TanStack Query. Potom zabaľte detskú rekvizitu QueryClientProvider nasledovne:

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

Toto nastavenie zaisťuje, že TanStack Query má úplný prístup k stavu aplikácie.

Implementujte stránkovanie pomocou useQuery Hook

The useQuery hák zefektívňuje získavanie a správu údajov. Poskytnutím parametrov stránkovania, ako sú čísla strán, môžete jednoducho získať špecifické podmnožiny údajov.

Okrem toho hák poskytuje rôzne možnosti a konfigurácie na prispôsobenie vašej funkcie načítania údajov vrátane nastavenia možností vyrovnávacej pamäte, ako aj efektívneho spracovania stavov načítania. Pomocou týchto funkcií môžete bez námahy vytvoriť bezproblémové stránkovanie.

Ak chcete teraz implementovať stránkovanie v aplikácii Next.js, vytvorte a Stránkovanie/stránka.js súbor v src/aplikácia adresár. V tomto súbore vykonajte nasledujúce importy:

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

Potom definujte funkčný komponent React. Vo vnútri tohto komponentu musíte definovať funkciu, ktorá bude získavať údaje z externého API. V tomto prípade použite JSONPlaceholder API na načítanie súboru príspevkov.

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
}

Teraz definujte háčik useQuery a zadajte nasledujúce parametre ako objekty:

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

The keepPreviousData hodnota je pravda, čo zaisťuje, že pri načítavaní nových údajov aplikácia zachová predchádzajúce údaje. The queryKey parameter je pole obsahujúce kľúč pre dotaz, v tomto prípade koncový bod a aktuálnu stránku, pre ktorú chcete načítať údaje. Nakoniec, queryFn parameter, fetchPosts, spustí volanie funkcie na načítanie údajov.

Ako už bolo spomenuté, hák poskytuje niekoľko stavov, ktoré môžete rozbaliť, podobne ako by ste to urobili deštruktúrovať polia a objekty, a využiť ich na zlepšenie používateľského zážitku (vykresľovanie vhodných používateľských rozhraní) počas procesu získavania údajov. Tieto štáty zahŕňajú isLoading, isChyba, a viac.

Ak to chcete urobiť, zahrňte nasledujúci kód na vykreslenie rôznych obrazoviek správ na základe aktuálneho stavu prebiehajúceho procesu:

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

Nakoniec zahrňte kód pre prvky JSX, ktoré sa vykreslia na stránke prehliadača. Tento kód má tiež dve ďalšie funkcie:

  • Keď aplikácia načíta príspevky z API, uložia sa do údajov premenná poskytovaná hákom useQuery. Táto premenná pomáha spravovať stav aplikácie. Potom môžete zmapovať zoznam príspevkov uložených v tejto premennej a vykresliť ich v prehliadači.
  • Ak chcete pridať dve navigačné tlačidlá, Predchádzajúce a Ďalšie, aby používatelia mohli podľa toho vyhľadávať a zobrazovať ďalšie stránkované údaje. 
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>
 );

Nakoniec spustite vývojový server.

npm run dev

Potom prejdite na http://localhost: 3000/stránkovanie v prehliadači.

Keďže ste zahrnuli Stránkovanie priečinok v aplikácie adresár, Next.js s ním zaobchádza ako s trasou, ktorá vám umožní pristupovať na stránku na danej URL.

Nekonečné posúvanie poskytuje bezproblémový zážitok z prehliadania. Dobrým príkladom je YouTube, ktorý automaticky načítava nové videá a zobrazuje ich pri posúvaní nadol.

The použite InfiniteQuery hák vám umožňuje implementovať nekonečné posúvanie načítaním údajov zo servera na stránkach a automatickým načítaním a vykreslením ďalšej stránky údajov, keď sa používateľ posúva nadol.

Ak chcete implementovať nekonečné posúvanie, pridajte InfiniteScroll/page.js súbor v src/aplikácia adresár. Potom vykonajte nasledujúce importy:

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

Ďalej vytvorte funkčný komponent React. Vo vnútri tohto komponentu, podobne ako pri implementácii stránkovania, vytvorte funkciu, ktorá načíta údaje z príspevkov.

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
}

Na rozdiel od implementácie stránkovania tento kód zavádza dvojsekundové oneskorenie pri načítavaní údajov do umožňujú používateľovi preskúmať aktuálne údaje počas posúvania, aby sa spustilo opätovné načítanie novej sady údajov.

Teraz definujte háčik useInfiniteQuery. Keď sa komponent na začiatku pripojí, hák načíta zo servera prvú stránku údajov. Keď sa používateľ posúva nadol, hák automaticky načíta ďalšiu stránku údajov a vykreslí ju v komponente.

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 príspevky premenná kombinuje všetky príspevky z rôznych stránok do jedného poľa, čo vedie k sploštenej verzii údajov premenlivý. To vám umožní jednoducho zmapovať a vykresliť jednotlivé príspevky.

Ak chcete sledovať rolovanie používateľa a načítať viac údajov, keď je používateľ blízko konca zoznamu, môžete ho definovať funkcia, ktorá využíva rozhranie Intersection Observer API na zistenie, kedy sa prvky pretínajú s výrez.

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

Nakoniec zahrňte prvky JSX pre príspevky, ktoré sa vykresľujú v prehliadači.

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

    •

Po vykonaní všetkých zmien navštívte http://localhost: 3000/InfiniteScroll vidieť ich v akcii.

TanStack Query: Viac než len načítanie údajov

Stránkovanie a nekonečné posúvanie sú dobré príklady, ktoré zdôrazňujú možnosti TanStack Query. Jednoducho povedané, je to všestranná knižnica na správu údajov.

Vďaka rozsiahlemu súboru funkcií môžete zefektívniť procesy správy údajov vašej aplikácie vrátane efektívneho spracovania stavu. Okrem iných úloh súvisiacich s údajmi môžete zlepšiť celkový výkon vašich webových aplikácií, ako aj používateľskú skúsenosť.