Kuidas rakendada lõpmatut kerimist ja lehekülgedele lisamist Next.js-i ja TanStacki päringu abil

Enamik teie arendatavaid rakendusi haldab andmeid; programmide mastaapsuse jätkudes võib seda olla üha suurem hulk. Kui rakendused ei suuda suuri andmemahtusid tõhusalt hallata, toimivad need halvasti.

Lehtede lehitsemine ja lõputu kerimine on kaks populaarset tehnikat, mida saate rakenduse jõudluse optimeerimiseks kasutada. Need võivad aidata teil andmete renderdamist tõhusamalt hallata ja parandada üldist kasutajakogemust.

Lehtede lehitsemine ja lõpmatu kerimine TanStacki päringu abil

TanStacki päring— React Query adaptsioon — on JavaScripti rakenduste jaoks tugev olekuhalduse teek. See pakub tõhusat lahendust rakenduse oleku haldamiseks muude funktsioonide, sealhulgas andmetega seotud ülesannete, nagu vahemällu, haldamiseks.

Lehtede lehitsemine hõlmab suure andmestiku jagamist väiksemateks lehtedeks, mis võimaldab kasutajatel navigeerimisnuppude abil sisus hallatavate tükkidena navigeerida. Seevastu lõpmatu kerimine pakub dünaamilisemat sirvimiskogemust. Kui kasutaja kerib, laaditakse ja kuvatakse uued andmed automaatselt, välistades vajaduse selgesõnalise navigeerimise järele.

Lehtede lehitsemise ja lõputu kerimise eesmärk on tõhusalt hallata ja esitada suuri andmemahtusid. Valik nende kahe vahel sõltub rakenduse andmenõuetest.

Next.js projekti seadistamine

Alustamiseks looge projekt Next.js. Installige Next.js 13 uusim versioon, mis kasutab rakenduste kataloogi.

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

Järgmisena installige oma projekti TanStacki pakett kasutades npm, sõlme paketihaldur.

npm i @tanstack/react-query

Integreerige TanStacki päring rakendusse Next.js

TanStack Query integreerimiseks oma Next.js projekti peate looma ja lähtestama uue TanStack Query eksemplari rakenduse juurtes – layout.js faili. Selleks importige QueryClient ja QueryClientProvider TanStack Queryst. Seejärel mähkige laste rekvisiit sellega QueryClientProvider järgnevalt:

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

See seadistus tagab, et TanStack Queryl on täielik juurdepääs rakenduse olekule.

Rakendage lehekülgede lehte kasutades useQuery Hook

The useQuery konks lihtsustab andmete toomist ja haldamist. Lehekülgede parameetrite, näiteks leheküljenumbrite, abil saate hõlpsalt hankida konkreetseid andmete alamhulki.

Lisaks pakub konks erinevaid valikuid ja konfiguratsioone andmete toomise funktsioonide kohandamiseks, sealhulgas vahemälu suvandite seadistamiseks ja laadimisolekute tõhusaks haldamiseks. Nende funktsioonide abil saate hõlpsalt luua sujuva lehekülgede lugemise kogemuse.

Nüüd, et rakendada rakenduses Next.js lehekülgi, looge a Leheküljed/leht.js faili src/app kataloog. Tehke selles failis järgmised impordid:

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

Seejärel määratlege Reacti funktsionaalne komponent. Selle komponendi sees peate määratlema funktsiooni, mis hangib andmeid välisest API-st. Sel juhul kasutage JSONPlaceholder API postituste komplekti toomiseks.

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
}

Nüüd määrake useQuery konks ja määrake objektidena järgmised parameetrid:

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

The hoidke eelmisi andmeid väärtus on tõsi, mis tagab, et uute andmete toomise ajal säilitab rakendus varasemad andmed. The queryKey parameeter on massiiv, mis sisaldab päringu võtit, antud juhul lõpp-punkti ja praegust lehte, mille jaoks soovite andmeid tuua. Lõpuks, queryFn parameeter, tõmba postitusi, käivitab funktsioonikutse andmete toomiseks.

Nagu varem mainitud, pakub konks mitut olekut, mida saate sarnaselt omaga lahti pakkida massiivide ja objektide hävitamine, ja kasutage neid kasutajakogemuse parandamiseks (asjakohaste kasutajaliideste renderdamiseks) andmete toomise protsessi ajal. Need osariigid hõlmavad on laadimine, isError, ja veel.

Selleks lisage käimasoleva protsessi hetkeseisu alusel erinevate sõnumiekraanide renderdamiseks järgmine kood:

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

Lõpuks lisage brauseri lehel renderdatavate JSX-elementide kood. See kood täidab ka kahte muud funktsiooni:

• Kui rakendus on API-st postitused toonud, salvestatakse need rakendusse andmeid muutuja, mille pakub useQuery konks. See muutuja aitab hallata rakenduse olekut. Seejärel saate sellesse muutujasse salvestatud postituste loendi kaardistada ja need brauseris renderdada.
• Kahe navigeerimisnupu lisamiseks Eelmine ja Edasi, et kasutajad saaksid vastavalt päringuid teha ja kuvada täiendavaid lehekülgedega andmeid.

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

Lõpuks käivitage arendusserver.

npm run dev

Seejärel minge edasi http://localhost: 3000 / Lehtede arv brauseris.

Kuna lisasite Leheküljed kaustas rakendus kataloogis käsitleb Next.js seda marsruudina, võimaldades teil sellel URL-il lehele juurde pääseda.

Lõpmatu kerimine pakub sujuvat sirvimiskogemust. Hea näide on YouTube, mis tõmbab uued videod automaatselt ja kuvab need alla kerides.

The kasuta InfiniteQuery konks võimaldab teil rakendada lõpmatut kerimist, hankides lehtedel serverist andmeid ning tuues ja renderdades automaatselt järgmise andmete lehe, kui kasutaja alla kerib.

Lõpmatu kerimise rakendamiseks lisage an InfiniteScroll/page.js faili src/app kataloog. Seejärel tehke järgmised imporditoimingud:

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

Järgmisena looge Reacti funktsionaalne komponent. Selle komponendi sees looge sarnaselt lehekülgede muutmise juurutamisele funktsioon, mis toob postituste andmed.

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
}

Erinevalt lehekülgede muutmisest lisab see kood andmete toomisel kahesekundilise viivituse võimaldavad kasutajal kerimise ajal praeguseid andmeid uurida, et käivitada uue komplekti uuesti toomine andmeid.

Nüüd määratlege konks useInfiniteQuery. Kui komponent algselt paigaldatakse, hangib konks serverist esimese andmete lehe. Kui kasutaja allapoole kerib, tõmbab konks automaatselt järgmise andmete lehe ja renderdab need komponendis.

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 postitusi muutuja ühendab kõik erinevate lehtede postitused üheks massiiviks, mille tulemuseks on lamendatud versioon andmeid muutuv. See võimaldab teil üksikuid postitusi hõlpsalt kaardistada ja renderdada.

Kasutajate kerimise jälgimiseks ja rohkemate andmete laadimiseks, kui kasutaja on loendi lõpus, saate määrata funktsioon, mis kasutab Intersection Observer API-t, et tuvastada, millal elemendid ristuvad vaateava.

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

Lõpuks lisage brauseris kuvatavate postituste jaoks JSX-elemendid.

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

Kui olete kõik muudatused teinud, külastage http://localhost: 3000/InfiniteScroll neid tegutsemas näha.

TanStacki päring: rohkem kui lihtsalt andmete toomine

Lehtede lehitsemine ja lõputu kerimine on head näited, mis toovad esile TanStack Query võimalused. Lihtsamalt öeldes on see kõikehõlmav andmehalduse raamatukogu.

Selle ulatusliku funktsioonide komplekti abil saate oma rakenduse andmehaldusprotsesse, sealhulgas tõhusat olekute haldamist, sujuvamaks muuta. Lisaks muudele andmetega seotud ülesannetele saate parandada oma veebirakenduste üldist jõudlust ja ka kasutuskogemust.