Pomocí těchto technik vytvořte použitelná rozhraní pro navigaci datových sad.

Většina aplikací, které budete vyvíjet, bude spravovat data; jak se programy dále rozšiřují, může jich být stále větší množství. Když aplikace selhávají při efektivní správě velkého množství dat, fungují špatně.

Stránkování a nekonečné posouvání jsou dvě oblíbené techniky, které můžete použít k optimalizaci výkonu aplikace. Mohou vám pomoci efektivněji zvládnout vykreslování dat a zlepšit celkovou uživatelskou zkušenost.

Stránkování a nekonečné posouvání pomocí dotazu TanStack

Dotaz TanStack—adaptace React Query — je robustní knihovna pro správu stavu pro aplikace JavaScript. Nabízí efektivní řešení pro správu stavu aplikace, mimo jiné funkce, včetně úloh souvisejících s daty, jako je ukládání do mezipaměti.

Stránkování zahrnuje rozdělení velké datové sady na menší stránky, což uživatelům umožňuje procházet obsah ve spravovatelných částech pomocí navigačních tlačítek. Naproti tomu nekonečné posouvání poskytuje dynamičtější zážitek z prohlížení. Jak uživatel posouvá, nová data se automaticky načítají a zobrazují, takže není potřeba explicitní navigace.

instagram viewer

Stránkování a nekonečné posouvání mají za cíl efektivně spravovat a prezentovat velké množství dat. Volba mezi těmito dvěma závisí na požadavcích aplikace na data.

Zde najdete kód tohoto projektu GitHub úložiště.

Nastavení projektu Next.js

Chcete-li začít, vytvořte projekt Next.js. Nainstalujte nejnovější verzi Next.js 13, která používá adresář App.

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

Dále nainstalujte balíček TanStack do vašeho projektu pomocí npm, správce balíčků Node.

npm i @tanstack/react-query

Integrujte TanStack Query do aplikace Next.js

Chcete-li integrovat TanStack Query do svého projektu Next.js, musíte vytvořit a inicializovat novou instanci TanStack Query v kořenovém adresáři aplikace – layout.js soubor. Chcete-li to provést, importujte QueryClient a QueryClientProvider z TanStack Query. Poté zabalte dětskou rekvizitu QueryClientProvider jak následuje:

"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 nastavení zajišťuje, že TanStack Query má úplný přístup ke stavu aplikace.

Implementujte stránkování pomocí useQuery Hook

The useQuery hook zjednodušuje načítání a správu dat. Poskytnutím parametrů stránkování, jako jsou čísla stránek, můžete snadno načíst konkrétní podmnožiny dat.

Kromě toho hák poskytuje různé možnosti a konfigurace pro přizpůsobení vaší funkce načítání dat, včetně nastavení možností mezipaměti a také efektivního zacházení se stavy načítání. S těmito funkcemi můžete bez námahy vytvořit bezproblémové stránkování.

Chcete-li nyní implementovat stránkování v aplikaci Next.js, vytvořte a Stránkování/stránka.js soubor v src/app adresář. Uvnitř tohoto souboru proveďte následující importy:

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

Poté definujte funkční komponentu React. Uvnitř této komponenty musíte definovat funkci, která bude získávat data z externího API. V tomto případě použijte JSONPlaceholder API k načtení sady příspěvků.

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
}

Nyní definujte háček useQuery a zadejte následující parametry jako objekty:

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

The keepPreviousData hodnota je skutečný, což zajišťuje, že při načítání nových dat aplikace zachová předchozí data. The dotazKey parametr je pole obsahující klíč pro dotaz, v tomto případě koncový bod a aktuální stránku, pro kterou chcete načíst data. Konečně, dotazFn parametr, fetchPosts, spustí volání funkce pro načtení dat.

Jak již bylo zmíněno, hák poskytuje několik stavů, které můžete rozbalit, podobně jako byste to udělali destruovat pole a objekty, a využít je ke zlepšení uživatelské zkušenosti (vykreslování vhodných uživatelských rozhraní) během procesu načítání dat. Mezi tyto státy patří isLoading, isChyba, a více.

Chcete-li to provést, zahrňte následující kód k vykreslení různých obrazovek zpráv na základě aktuálního stavu probíhajícího procesu:

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

Nakonec zahrňte kód pro prvky JSX, které se vykreslí na stránce prohlížeče. Tento kód také slouží dvěma dalším funkcím:

  • Jakmile aplikace načte příspěvky z API, budou uloženy v data proměnná poskytovaná hákem useQuery. Tato proměnná pomáhá spravovat stav aplikace. Poté můžete namapovat seznam příspěvků uložených v této proměnné a vykreslit je v prohlížeči.
  • Chcete-li přidat dvě navigační tlačítka, Předchozí a další, aby uživatelé mohli podle toho vyhledávat a zobrazovat další stránkovaná data. 
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>
 );

Nakonec spusťte vývojový server.

npm run dev

Pak přejděte k http://localhost: 3000/stránkování v prohlížeči.

Vzhledem k tomu, že jste zahrnuli Stránkování složku v aplikace adresář, Next.js s ním zachází jako s trasou, která vám umožní přistupovat ke stránce na dané URL.

Nekonečné posouvání poskytuje bezproblémové procházení. Dobrým příkladem je YouTube, který automaticky načítá nová videa a zobrazuje je při posouvání dolů.

The použijte InfiniteQuery hook vám umožňuje implementovat nekonečné posouvání načítáním dat ze serveru na stránkách a automatickým načítáním a vykreslováním další stránky dat, když uživatel posouvá dolů.

Chcete-li implementovat nekonečné posouvání, přidejte InfiniteScroll/page.js soubor v src/app adresář. Poté proveďte následující importy:

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

Dále vytvořte funkční komponentu React. Uvnitř této komponenty, podobně jako v implementaci stránkování, vytvořte funkci, která bude načítat data příspěvků.

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 rozdíl od implementace stránkování tento kód zavádí dvousekundové zpoždění při načítání dat do umožňují uživateli prozkoumat aktuální data, zatímco se posouvají ke spuštění opětovného načtení nové sady data.

Nyní definujte háček useInfiniteQuery. Když se komponenta zpočátku připojí, hák načte první stránku dat ze serveru. Když uživatel posouvá dolů, hák automaticky načte další stránku dat a vykreslí ji v 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 příspěvky proměnná kombinuje všechny příspěvky z různých stránek do jednoho pole, což má za následek zploštělou verzi data variabilní. To vám umožní snadno mapovat a vykreslovat jednotlivé příspěvky.

Chcete-li sledovat rolování uživatele a načíst další data, když je uživatel blízko konce seznamu, můžete definovat funkce, která využívá rozhraní Intersection Observer API ke zjištění, kdy se prvky protínají s výřez.

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

Nakonec zahrňte prvky JSX pro příspěvky, které se vykreslují v prohlížeč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>
     );
    

    •

Jakmile provedete všechny změny, navštivte http://localhost: 3000/InfiniteScroll vidět je v akci.

TanStack Query: Více než jen načítání dat

Stránkování a nekonečné posouvání jsou dobré příklady, které zvýrazňují možnosti TanStack Query. Jednoduše řečeno, je to všestranná knihovna pro správu dat.

Díky rozsáhlé sadě funkcí můžete zefektivnit procesy správy dat vaší aplikace, včetně efektivního zpracování stavu. Kromě dalších úloh souvisejících s daty můžete zlepšit celkový výkon vašich webových aplikací a také uživatelskou zkušenost.