Használja ezeket a technikákat az adatkészletek navigálásához használható interfészek létrehozásához.

A legtöbb fejlesztett alkalmazás kezelni fogja az adatokat; ahogy a programok folyamatosan bővülnek, egyre nagyobb mennyiségben lehet belőle. Ha az alkalmazások nem tudnak hatékonyan kezelni nagy mennyiségű adatot, akkor rosszul teljesítenek.

A lapozás és a végtelen görgetés két népszerű technika, amellyel optimalizálhatja az alkalmazások teljesítményét. Segítségükkel hatékonyabban kezelheti az adatok megjelenítését, és javíthatja az általános felhasználói élményt.

Lapozás és végtelen görgetés a TanStack Query használatával

TanStack lekérdezés– a React Query adaptációja – egy robusztus állapotkezelő könyvtár JavaScript-alkalmazásokhoz. Hatékony megoldást kínál az alkalmazások állapotának kezelésére, egyéb funkciók mellett, beleértve az adatokkal kapcsolatos feladatokat, például a gyorsítótárat.

A lapozás magában foglalja egy nagy adathalmaz kisebb oldalakra való felosztását, lehetővé téve a felhasználók számára, hogy a navigációs gombok segítségével kezelhető darabokban navigálhassanak a tartalom között. Ezzel szemben a végtelen görgetés dinamikusabb böngészési élményt nyújt. Ahogy a felhasználó görget, az új adatok automatikusan betöltődnek és megjelennek, így nincs szükség az explicit navigációra.

instagram viewer

A lapozás és a végtelen görgetés célja a nagy mennyiségű adat hatékony kezelése és bemutatása. A kettő közötti választás az alkalmazás adatigényeitől függ.

A projekt kódját itt találja meg GitHub adattár.

Next.js projekt beállítása

A kezdéshez hozzon létre egy Next.js projektet. Telepítse a a Next.js 13 legújabb verziója, amely az App könyvtárat használja.

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

Ezután telepítse a TanStack csomagot a projektbe a használatával npm, a Node csomagkezelő.

npm i @tanstack/react-query

Integrálja a TanStack lekérdezést a Next.js alkalmazásba

A TanStack Query Next.js projektbe való integrálásához létre kell hoznia és inicializálnia kell a TanStack Query új példányát az alkalmazás gyökerében – a layout.js fájlt. Ehhez importálja QueryClient és QueryClientProvider a TanStack Querytől. Ezután tekerje be a gyermekkelléket QueryClientProvider alábbiak szerint:

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

Ez a beállítás biztosítja, hogy a TanStack Query teljes hozzáféréssel rendelkezzen az alkalmazás állapotához.

Végezze el a lapozást a useQuery Hook segítségével

A useQuery hook leegyszerűsíti az adatok lekérését és kezelését. Lapozási paraméterek, például oldalszámok megadásával könnyedén lekérheti az adatok meghatározott részhalmazait.

Ezenkívül a hook különféle lehetőségeket és konfigurációkat kínál az adatlekérési funkciók testreszabásához, beleértve a gyorsítótár-beállítások beállítását, valamint a betöltési állapotok hatékony kezelését. Ezekkel a funkciókkal könnyedén létrehozhat zökkenőmentes lapozási élményt.

Most az oldalszámozás megvalósításához a Next.js alkalmazásban hozzon létre egy Lapozás/oldal.js fájl a src/app Könyvtár. Ebben a fájlban hajtsa végre a következő importálásokat:

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

Ezután definiáljon egy React funkcionális komponenst. Ezen az összetevőn belül meg kell határoznia egy függvényt, amely adatokat kér egy külső API-tól. Ebben az esetben használja a JSONPlaceholder API hogy lekérjen egy bejegyzést.

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
}

Most határozza meg a useQuery hook-ot, és adja meg objektumként a következő paramétereket:

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

A KeepPreviousData érték az igaz, amely biztosítja, hogy az új adatok lekérése közben az alkalmazás megőrizze a korábbi adatokat. A queryKey A paraméter egy tömb, amely tartalmazza a lekérdezés kulcsát, ebben az esetben a végpontot és az aktuális oldalt, amelyhez adatokat szeretne lekérni. Végül a queryFn paraméter, fetchPosts, elindítja a függvényhívást az adatok lekéréséhez.

Amint korábban említettük, a horog számos olyan állapotot biztosít, amelyeket kicsomagolhat, hasonlóan ahhoz, ahogy tenné tömbök és objektumok megsemmisítése, és használja őket a felhasználói élmény javítására (megfelelő felhasználói felületek megjelenítésére) az adatlekérési folyamat során. Ezek az állapotok magukban foglalják isBetöltés, isError, és több.

Ehhez adja meg a következő kódot, hogy a folyamatban lévő folyamat aktuális állapota alapján különböző üzenetképernyőket jelenítsen meg:

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

Végül adja meg a JSX elemek kódját, amelyek megjelennek a böngésző oldalon. Ez a kód két másik funkciót is ellát:

  • Miután az alkalmazás lekéri a bejegyzéseket az API-ból, azok a következő helyen tárolódnak adat a useQuery hook által biztosított változó. Ez a változó segít az alkalmazás állapotának kezelésében. Ezután leképezheti az ebben a változóban tárolt bejegyzések listáját, és megjelenítheti őket a böngészőben.
  • Két navigációs gomb hozzáadásához, Előző és Következő, hogy a felhasználók lekérdezhessenek és ennek megfelelően további oldalszámozott adatokat is megjeleníthessenek. 
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>
 );

Végül indítsa el a fejlesztőkiszolgálót.

npm run dev

Aztán irány a http://localhost: 3000/Oldalszám böngészőben.

Mivel belevetted a Lapszámozás mappában a kb könyvtárban, a Next.js útvonalként kezeli, lehetővé téve az oldal elérését az adott URL-címen.

A végtelen görgetés zökkenőmentes böngészési élményt biztosít. Jó példa erre a YouTube, amely automatikusan letölti az új videókat, és lefelé görgetés közben megjeleníti azokat.

A useInfiniteQuery A hook lehetővé teszi a végtelen görgetés megvalósítását azáltal, hogy adatokat kér le a szerverről oldalakon, és automatikusan lekéri és megjeleníti az adatok következő oldalát, amikor a felhasználó lefelé görget.

A végtelen görgetés megvalósításához adjon hozzá egy InfiniteScroll/page.js fájl a src/app Könyvtár. Ezután hajtsa végre a következő importálást:

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

Ezután hozzon létre egy React funkcionális komponenst. Ezen a komponensen belül, a lapozás megvalósításához hasonlóan, hozzon létre egy függvényt, amely lekéri a bejegyzések adatait.

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
}

A lapozási megvalósítástól eltérően ez a kód két másodperces késleltetést vezet be az adatok lekérésekor lehetővé teszi a felhasználó számára az aktuális adatok felfedezését, miközben görgetéssel elindítja az új készlet visszaolvasását adat.

Most határozza meg a useInfiniteQuery hookot. Amikor az összetevő először felcsatolódik, a hook lekéri az adatok első oldalát a szerverről. Ahogy a felhasználó lefelé görget, a hook automatikusan lekéri az adatok következő oldalát, és megjeleníti az összetevőben.

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

A hozzászólások változó egyetlen tömbbe egyesíti a különböző oldalak összes bejegyzését, ami egy lapított változatot eredményez adat változó. Ez lehetővé teszi az egyes bejegyzések egyszerű leképezését és renderelését.

A felhasználói görgetések nyomon követéséhez és több adat betöltéséhez, amikor a felhasználó a lista alján van, megadhatja egy funkció, amely az Intersection Observer API-t használja annak észlelésére, amikor az elemek metszik egymást a nézetablak.

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

Végül adja meg a JSX elemeket a böngészőben megjelenő bejegyzésekhez.

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

    •

Miután elvégezte az összes módosítást, látogasson el http://localhost: 3000/InfiniteScroll hogy lássam őket működés közben.

TanStack lekérdezés: több, mint adatlekérés

A lapozás és a végtelen görgetés jó példák arra, hogy kiemelik a TanStack Query képességeit. Egyszerűen fogalmazva, ez egy teljes körű adatkezelési könyvtár.

Széleskörű szolgáltatáskészletével egyszerűsítheti alkalmazása adatkezelési folyamatait, beleértve az állapotkezelést is. Egyéb adatokkal kapcsolatos feladatok mellett javíthatja webalkalmazásainak általános teljesítményét, valamint a felhasználói élményt.