Naudokite šiuos metodus, kad sukurtumėte tinkamas sąsajas duomenų rinkiniams naršyti.

Dauguma jūsų sukurtų programų tvarkys duomenis; programoms ir toliau plečiantis, jų gali būti vis daugiau. Kai programos nesugeba efektyviai valdyti didelio duomenų kiekio, jos veikia prastai.

Puslapių spausdinimas ir begalinis slinkimas yra du populiarūs metodai, kuriuos galite naudoti norėdami optimizuoti programos našumą. Jie gali padėti efektyviau tvarkyti duomenis ir pagerinti bendrą vartotojo patirtį.

Puslapių spausdinimas ir begalinis slinkimas naudojant TanStack užklausą

TanStack užklausa– „React Query“ pritaikymas – tai tvirta „JavaScript“ programų būsenos valdymo biblioteka. Jis siūlo efektyvų programos būsenos valdymo sprendimą, be kitų funkcijų, įskaitant su duomenimis susijusias užduotis, pvz., talpyklą.

Puslapių kūrimas apima didelio duomenų rinkinio padalijimą į mažesnius puslapius, leidžiančius vartotojams naršyti turinį valdomomis dalimis naudojant naršymo mygtukus. Priešingai, begalinis slinkimas suteikia dinamiškesnę naršymo patirtį. Kai naudotojas slenka, nauji duomenys įkeliami ir rodomi automatiškai, todėl nereikia aiškios naršymo.

instagram viewer

Puslapių spausdinimas ir begalinis slinkimas skirtas efektyviai valdyti ir pateikti didelius duomenų kiekius. Pasirinkimas tarp dviejų priklauso nuo programos duomenų reikalavimų.

Šio projekto kodą rasite čia GitHub saugykla.

„Next.js“ projekto nustatymas

Norėdami pradėti, sukurkite Next.js projektą. Įdiekite naujausia Next.js 13 versija, kuri naudoja programų katalogą.

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

Tada įdiekite TanStack paketą savo projekte naudodami npm, mazgo paketų tvarkyklė.

npm i @tanstack/react-query

Integruokite TanStack užklausą į Next.js programą

Norėdami integruoti TanStack Query į Next.js projektą, turite sukurti ir inicijuoti naują TanStack Query egzempliorių programos šaknyje – layout.js failą. Norėdami tai padaryti, importuokite QueryClient ir QueryClientProvider iš TanStack Query. Tada apvyniokite vaikišką atramą QueryClientProvider taip:

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

Ši sąranka užtikrina, kad „TanStack Query“ turėtų visišką prieigą prie programos būsenos.

Įdiekite puslapių tvarkymą naudodami „useQuery Hook“.

The useQuery „hook“ supaprastina duomenų gavimą ir valdymą. Pateikdami puslapių skirstymo parametrus, pvz., puslapių numerius, galite lengvai gauti konkrečius duomenų pogrupius.

Be to, kabliukas suteikia įvairių parinkčių ir konfigūracijų, leidžiančių tinkinti duomenų gavimo funkcijas, įskaitant talpyklos parinkčių nustatymą, taip pat efektyvų įkėlimo būsenų valdymą. Naudodamiesi šiomis funkcijomis galite be vargo sukurti sklandžią puslapių spausdinimo patirtį.

Dabar, norėdami įdiegti puslapių rūšiavimą programoje Next.js, sukurkite a Puslapiai/puslapis.js failą src/app katalogas. Šiame faile atlikite šiuos importavimo veiksmus:

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

Tada apibrėžkite „React“ funkcinį komponentą. Šiame komponente turite apibrėžti funkciją, kuri gaus duomenis iš išorinės API. Tokiu atveju naudokite JSONPlaceholder API norėdami gauti pranešimų rinkinį.

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
}

Dabar apibrėžkite useQuery kabliuką ir nurodykite šiuos parametrus kaip objektus:

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

The išlaikyti Ankstesni duomenys vertė yra tiesa, kuri užtikrina, kad, gaudama naujus duomenis, programa išsaugo ankstesnius duomenis. The queryKey parametras yra masyvas, kuriame yra užklausos raktas, šiuo atveju galutinis taškas ir dabartinis puslapis, kurio duomenis norite gauti. Galiausiai, užklausaFn parametras, fetchPosts, suaktyvina funkcijos iškvietimą duomenims gauti.

Kaip minėta anksčiau, kabliukas suteikia keletą būsenų, kurias galite išpakuoti, panašiai kaip tai darytumėte sunaikinti masyvus ir objektus, ir naudokite juos, kad pagerintumėte naudotojo patirtį (perteiktų atitinkamas vartotojo sąsajas) duomenų gavimo proceso metu. Šios valstybės apima iskraunama, isError, ir dar.

Norėdami tai padaryti, įtraukite šį kodą, kad būtų pateikti skirtingi pranešimų ekranai, atsižvelgiant į dabartinę vykstančio proceso būseną:

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

Galiausiai įtraukite JSX elementų, kurie bus pateikti naršyklės puslapyje, kodą. Šis kodas taip pat atlieka dvi kitas funkcijas:

  • Kai programa paims įrašus iš API, jie bus saugomi duomenis kintamasis, kurį teikia useQuery kabliukas. Šis kintamasis padeda valdyti programos būseną. Tada galite susieti šiame kintamajame saugomų įrašų sąrašą ir pateikti juos naršyklėje.
  • Norėdami pridėti du naršymo mygtukus, Ankstesnis ir Kitas, kad vartotojai galėtų pateikti užklausą ir atitinkamai rodyti papildomus puslapių duomenis. 
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>
 );

Galiausiai paleiskite kūrimo serverį.

npm run dev

Tada eikite į http://localhost: 3000 / Puslapiai naršyklėje.

Kadangi įtraukėte Puslapių rašymas aplanke esančiame programėlė kataloge, Next.js traktuoja jį kaip maršrutą, leidžiantį pasiekti puslapį tuo URL.

Begalinis slinkimas užtikrina sklandų naršymą. Geras pavyzdys yra „YouTube“, kuri automatiškai gauna naujus vaizdo įrašus ir rodo juos slenkant žemyn.

The useInfiniteQuery „hook“ leidžia įgyvendinti begalinį slinkimą puslapiuose paimant duomenis iš serverio ir automatiškai nusiunčiant bei pateikiant kitą duomenų puslapį, kai vartotojas slenka žemyn.

Norėdami įgyvendinti begalinį slinkimą, pridėkite an InfiniteScroll/page.js failą src/app katalogas. Tada atlikite šiuos importavimo veiksmus:

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

Tada sukurkite funkcinį „React“ komponentą. Šiame komponente, panašiai kaip puslapių puslapiuose, sukurkite funkciją, kuri paims įrašų duomenis.

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
}

Skirtingai nuo puslapių kūrimo, šis kodas įveda dviejų sekundžių delsą, kai gaunami duomenys leisti vartotojui naršyti dabartinius duomenis, kol jie slenka, kad suaktyvintų naujo rinkinio gavimą duomenis.

Dabar apibrėžkite useInfiniteQuery kabliuką. Kai komponentas iš pradžių bus prijungtas, kabliukas paims pirmąjį duomenų puslapį iš serverio. Kai vartotojas slenka žemyn, kabliukas automatiškai pateiks kitą duomenų puslapį ir pateiks jį 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 pranešimų kintamasis sujungia visus įrašus iš skirtingų puslapių į vieną masyvą, todėl gaunama išlyginta duomenis kintamasis. Tai leidžia lengvai susieti ir pateikti atskirus įrašus.

Norėdami stebėti naudotojo slinkimus ir įkelti daugiau duomenų, kai vartotojas yra arti sąrašo apačios, galite nustatyti funkcija, kuri naudoja Intersection Observer API, kad nustatytų, kada elementai susikerta su peržiūros sritis.

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

Galiausiai įtraukite JSX elementus į įrašus, kurie pateikiami naršyklėje.

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

    •

Atlikę visus pakeitimus, apsilankykite http://localhost: 3000/InfiniteScroll pamatyti juos veikiant.

TanStack užklausa: daugiau nei tik duomenų gavimas

Puslapių spausdinimas ir begalinis slinkimas yra geri pavyzdžiai, išryškinantys TanStack Query galimybes. Paprasčiau tariant, tai visapusiška duomenų valdymo biblioteka.

Naudodami platų funkcijų rinkinį galite supaprastinti programos duomenų valdymo procesus, įskaitant efektyvų būsenos tvarkymą. Be kitų su duomenimis susijusių užduočių, galite pagerinti bendrą žiniatinklio programų našumą ir vartotojo patirtį.