Izmantojiet šīs metodes, lai izveidotu izmantojamas saskarnes datu kopu navigācijai.

Lielākā daļa jūsu izstrādāto lietotņu pārvaldīs datus; programmām turpinot mērogot, to daudzums var būt arvien lielāks. Ja lietojumprogrammas nespēj efektīvi pārvaldīt lielu datu apjomu, tās darbojas slikti.

Lapu šķirošana un bezgalīga ritināšana ir divas populāras metodes, kuras varat izmantot, lai optimizētu lietotņu veiktspēju. Tie var palīdzēt jums efektīvāk apstrādāt datu renderēšanu un uzlabot vispārējo lietotāja pieredzi.

Lapu šķirošana un bezgalīga ritināšana, izmantojot TanStack vaicājumu

TanStack vaicājums— React Query adaptācija — ir spēcīga JavaScript lietojumprogrammu stāvokļa pārvaldības bibliotēka. Tas piedāvā efektīvu risinājumu lietojumprogrammas stāvokļa pārvaldībai, kā arī citas funkcijas, tostarp ar datiem saistītus uzdevumus, piemēram, kešatmiņu.

Lapu ievietošana ietver lielas datu kopas sadalīšanu mazākās lapās, ļaujot lietotājiem pārvietoties saturā pārvaldāmās daļās, izmantojot navigācijas pogas. Turpretim bezgalīga ritināšana nodrošina dinamiskāku pārlūkošanas pieredzi. Lietotājam ritinot, jaunie dati tiek automātiski ielādēti un parādīti, tādējādi novēršot vajadzību pēc skaidras navigācijas.

Lapu šķirošanas un bezgalīgas ritināšanas mērķis ir efektīvi pārvaldīt un parādīt lielu datu apjomu. Izvēle starp diviem ir atkarīga no lietojumprogrammas datu prasībām.

Jūs varat atrast šī projekta kodu GitHub krātuve.

Next.js projekta iestatīšana

Lai sāktu, izveidojiet Next.js projektu. Instalējiet jaunākā Next.js 13 versija, kas izmanto lietotņu direktoriju.

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

Pēc tam instalējiet TanStack pakotni savā projektā, izmantojot npm, mezgla pakotņu pārvaldnieks.

npm i @tanstack/react-query

Integrējiet TanStack vaicājumu lietojumprogrammā Next.js

Lai integrētu TanStack Query savā Next.js projektā, jums ir jāizveido un jāinicializē jauna TanStack Query instance lietojumprogrammas saknē — izkārtojums.js failu. Lai to izdarītu, importējiet QueryClient un QueryClientProvider no TanStack Query. Pēc tam aptiniet bērnu balstu ar QueryClientProvider sekojoši:

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

Šī iestatīšana nodrošina, ka TanStack Query ir pilnīga piekļuve lietojumprogrammas stāvoklim.

Ieviesiet lappusi, izmantojot useQuery Hook

The useQuery hook racionalizē datu iegūšanu un pārvaldību. Nodrošinot lappušu šķirošanas parametrus, piemēram, lappušu numurus, varat viegli izgūt noteiktas datu apakškopas.

Turklāt āķis nodrošina dažādas opcijas un konfigurācijas, lai pielāgotu datu iegūšanas funkcionalitāti, tostarp kešatmiņas opciju iestatīšanu, kā arī efektīvu ielādes stāvokļu apstrādi. Izmantojot šīs funkcijas, varat bez piepūles izveidot nevainojamu lappušu pārlūkošanas pieredzi.

Tagad, lai lietotnē Next.js ieviestu lappusi, izveidojiet a Lapu šķirošana/lapa.js failu mapē src/app direktoriju. Šajā failā veiciet tālāk norādītās importēšanas darbības.

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

Pēc tam definējiet React funkcionālo komponentu. Šajā komponentā ir jādefinē funkcija, kas iegūs datus no ārējā API. Šajā gadījumā izmantojiet JSONPlaceholder API lai iegūtu ziņu kopu.

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
}

Tagad definējiet useQuery āķi un norādiet šādus parametrus kā objektus:

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

The saglabāt Iepriekšējos datus vērtība ir taisnība, kas nodrošina, ka, ienesot jaunus datus, lietotne saglabā iepriekšējos datus. The queryKey parametrs ir masīvs, kurā ir vaicājuma atslēga, šajā gadījumā galapunkts un pašreizējā lapa, kurai vēlaties iegūt datus. Visbeidzot, queryFn parametrs, fetchPosts, aktivizē funkcijas izsaukumu datu iegūšanai.

Kā minēts iepriekš, āķis nodrošina vairākus stāvokļus, kurus varat izpakot, līdzīgi kā jūs to darītu masīvu un objektu iznīcināšana, un izmantot tos, lai uzlabotu lietotāja pieredzi (renderējot atbilstošus lietotāja interfeisus) datu iegūšanas procesa laikā. Šie stāvokļi ietver Notiek ielāde, isError, un vēl.

Lai to izdarītu, iekļaujiet šādu kodu, lai renderētu dažādus ziņojumu ekrānus, pamatojoties uz notiekošā procesa pašreizējo stāvokli:

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

Visbeidzot, iekļaujiet kodu JSX elementiem, kas tiks renderēti pārlūkprogrammas lapā. Šis kods veic arī divas citas funkcijas:

  • Kad lietotne ienes ziņas no API, tās tiks saglabātas mapē datus mainīgais, ko nodrošina useQuery āķis. Šis mainīgais palīdz pārvaldīt lietojumprogrammas stāvokli. Pēc tam varat kartēt šajā mainīgajā saglabāto ziņu sarakstu un renderēt tās pārlūkprogrammā.
  • Lai pievienotu divas navigācijas pogas, Iepriekšējais un Nākamais, lai lietotāji varētu attiecīgi meklēt un parādīt papildu lappušu datus. 
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>
 );

Visbeidzot, palaidiet izstrādes serveri.

npm run dev

Pēc tam dodieties uz http://localhost: 3000/lappušu skaits pārlūkprogrammā.

Tā kā jūs iekļāvāt Lapu šķirošana mapē lietotne direktorijā, Next.js to uzskata par maršrutu, ļaujot piekļūt lapai ar šo URL.

Bezgalīga ritināšana nodrošina netraucētu pārlūkošanas pieredzi. Labs piemērs ir YouTube, kas automātiski ienes jaunus videoklipus un parāda tos, ritinot uz leju.

The useInfiniteQuery hook ļauj ieviest bezgalīgu ritināšanu, ielādējot datus no servera lapās un automātiski ienesot un renderējot nākamo datu lapu, kad lietotājs ritina uz leju.

Lai ieviestu bezgalīgu ritināšanu, pievienojiet InfiniteScroll/page.js failu mapē src/app direktoriju. Pēc tam veiciet šādu importēšanu:

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

Pēc tam izveidojiet React funkcionālo komponentu. Šajā komponentā, līdzīgi kā lappušu ieviešanā, izveidojiet funkciju, kas ienes ziņu datus.

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
}

Atšķirībā no lappušu ievietošanas, šis kods ievieš divu sekunžu aizkavi, ienesot datus ļauj lietotājam izpētīt pašreizējos datus, kamēr viņš ritina, lai aktivizētu jaunas kopas ielādi datus.

Tagad definējiet useInfiniteQuery āķi. Kad komponents sākotnēji tiek uzstādīts, āķis ienesīs pirmo datu lapu no servera. Lietotājam ritinot uz leju, āķis automātiski ienes nākamo datu lapu un atveidos to komponentā.

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 ziņas mainīgais apvieno visas ziņas no dažādām lapām vienā masīvā, kā rezultātā tiek iegūta saplacināta datus mainīgs. Tas ļauj viegli kartēt un renderēt atsevišķas ziņas.

Lai izsekotu lietotāja ritināšanu un ielādētu vairāk datu, kad lietotājs atrodas tuvu saraksta apakšai, varat definēt funkcija, kas izmanto Intersection Observer API, lai noteiktu, kad elementi krustojas ar skata logs.

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

Visbeidzot, iekļaujiet JSX elementus ziņām, kas tiek renderētas pārlūkprogrammā.

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

    •

Kad esat veicis visas izmaiņas, apmeklējiet http://localhost: 3000/InfiniteScroll lai redzētu viņus darbībā.

TanStack vaicājums: vairāk nekā tikai datu ienešana

Lapu šķirošana un bezgalīga ritināšana ir labi piemēri, kas izceļ TanStack Query iespējas. Vienkārši sakot, tā ir visaptveroša datu pārvaldības bibliotēka.

Izmantojot tās plašo funkciju kopumu, varat racionalizēt savas lietotnes datu pārvaldības procesus, tostarp efektīvu stāvokļa apstrādi. Līdztekus citiem ar datiem saistītiem uzdevumiem varat uzlabot savu tīmekļa lietojumprogrammu vispārējo veiktspēju, kā arī lietotāja pieredzi.