Gebruik deze technieken om bruikbare interfaces te creëren voor het navigeren door datasets.

De meeste apps die u gaat ontwikkelen, zullen gegevens beheren; naarmate programma's zich blijven uitbreiden, kan er een steeds grotere hoeveelheid ervan ontstaan. Wanneer applicaties er niet in slagen grote hoeveelheden gegevens effectief te beheren, presteren ze slecht.

Paginering en oneindig scrollen zijn twee populaire technieken die u kunt gebruiken om de app-prestaties te optimaliseren. Ze kunnen u helpen de gegevensweergave efficiënter af te handelen en de algehele gebruikerservaring te verbeteren.

Paginering en oneindig scrollen met behulp van TanStack Query

TanStack-query– een aanpassing van React Query – is een robuuste statusbeheerbibliotheek voor JavaScript-applicaties. Het biedt een efficiënte oplossing voor het beheren van de applicatiestatus, naast andere functionaliteiten, inclusief gegevensgerelateerde taken zoals caching.

Bij paginering wordt een grote dataset in kleinere pagina's verdeeld, zodat gebruikers met behulp van navigatieknoppen in beheersbare delen door de inhoud kunnen navigeren. Oneindig scrollen zorgt daarentegen voor een meer dynamische browse-ervaring. Terwijl de gebruiker scrollt, worden nieuwe gegevens automatisch geladen en weergegeven, waardoor expliciete navigatie overbodig wordt.

instagram viewer

Paginering en oneindig scrollen zijn bedoeld om grote hoeveelheden gegevens efficiënt te beheren en presenteren. De keuze tussen beide hangt af van de gegevensvereisten van de applicatie.

Je kunt de code van dit project hierin vinden GitHub opslagplaats.

Een Next.js-project opzetten

Maak een Next.js-project om aan de slag te gaan. Installeer de nieuwste versie van Next.js 13 die de App-directory gebruikt.

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

Installeer vervolgens het TanStack-pakket in uw project met behulp van npm, de knooppuntpakketbeheerder.

npm i @tanstack/react-query

Integreer TanStack Query in de Next.js-applicatie

Om TanStack Query in uw Next.js-project te integreren, moet u een nieuw exemplaar van TanStack Query in de root van de applicatie maken en initialiseren: de layout.js bestand. Om dat te doen, importeert u QueryClient En QueryClientProvider van TanStack-query. Wikkel vervolgens het kinderrekwisiet in QueryClientProvider als volgt:

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

Deze opstelling zorgt ervoor dat TanStack Query volledige toegang heeft tot de status van de applicatie.

Implementeer paginering met behulp van de useQuery Hook

De gebruikQuery hook stroomlijnt het ophalen en beheren van gegevens. Door pagineringsparameters op te geven, zoals paginanummers, kunt u eenvoudig specifieke subsets met gegevens ophalen.

Bovendien biedt de hook verschillende opties en configuraties om uw functionaliteit voor het ophalen van gegevens aan te passen, inclusief het instellen van cache-opties en het efficiënt verwerken van laadstatussen. Met deze functies kunt u moeiteloos een naadloze pagineringservaring creëren.

Om paginering in de Next.js-app te implementeren, maakt u nu een Paginering/page.js bestand in de src/app map. Voer in dit bestand de volgende importbewerkingen uit:

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

Definieer vervolgens een functionele React-component. Binnen dit onderdeel moet u een functie definiëren die gegevens van een externe API ophaalt. Gebruik in dit geval de JSONPlaceholder-API om een ​​reeks berichten op te halen.

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
}

Definieer nu de useQuery-hook en geef de volgende parameters op als objecten:

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

De behoudenVorigeGegevens waarde is WAAR, wat ervoor zorgt dat de app tijdens het ophalen van nieuwe gegevens de eerdere gegevens behoudt. De querySleutel parameter is een array die de sleutel voor de query bevat, in dit geval het eindpunt en de huidige pagina waarvoor u gegevens wilt ophalen. Tenslotte de vraagFn parameter, berichten ophalen, activeert de functieaanroep om gegevens op te halen.

Zoals eerder vermeld, biedt de haak verschillende toestanden die u kunt uitpakken, vergelijkbaar met hoe u dat zou doen destructureer arrays en objecten, en gebruik ze om de gebruikerservaring te verbeteren (het weergeven van de juiste gebruikersinterfaces) tijdens het ophalen van gegevens. Deze staten omvatten Laadt, isFout, en meer.

Om dat te doen, voegt u de volgende code toe om verschillende berichtschermen weer te geven op basis van de huidige status van het lopende proces:

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

Voeg ten slotte de code toe voor de JSX-elementen die op de browserpagina worden weergegeven. Deze code heeft ook twee andere functies:

  • Zodra de app de berichten uit de API ophaalt, worden ze opgeslagen in de gegevens variabele geleverd door de useQuery-hook. Deze variabele helpt bij het beheren van de status van de applicatie. Vervolgens kunt u de lijst met berichten die in deze variabele zijn opgeslagen in kaart brengen en deze in de browser weergeven.
  • Om twee navigatieknoppen toe te voegen, Vorig En Volgende, zodat gebruikers aanvullende gepagineerde gegevens kunnen opvragen en weergeven. 
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>
 );

Start ten slotte de ontwikkelingsserver.

npm run dev

Ga dan naar http://localhost: 3000/paginatie in een browser.

Omdat je de Paginering map in de app directory, behandelt Next.js het als een route, waardoor u via die URL toegang krijgt tot de pagina.

Oneindig scrollen zorgt voor een naadloze browse-ervaring. Een goed voorbeeld is YouTube, dat nieuwe video's automatisch ophaalt en toont terwijl je naar beneden scrollt.

De gebruikInfiniteQuery Met hook kunt u oneindig scrollen implementeren door gegevens van een server in pagina's op te halen en automatisch de volgende pagina met gegevens op te halen en weer te geven terwijl de gebruiker naar beneden scrolt.

Om oneindig scrollen te implementeren, voegt u een InfiniteScroll/page.js bestand in de src/app map. Voer vervolgens de volgende importbewerkingen uit:

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

Maak vervolgens een functionele React-component. Maak binnen deze component, vergelijkbaar met de pagineringsimplementatie, een functie die de gegevens van de berichten ophaalt.

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
}

In tegenstelling tot de pagineringsimplementatie introduceert deze code een vertraging van twee seconden bij het ophalen van gegevens naar Hiermee kan een gebruiker de huidige gegevens verkennen terwijl hij scrollt om een ​​nieuwe set gegevens opnieuw op te halen gegevens.

Definieer nu de useInfiniteQuery hook. Wanneer de component voor het eerst wordt geactiveerd, haalt de hook de eerste pagina met gegevens op van de server. Terwijl de gebruiker naar beneden scrolt, haalt de hook automatisch de volgende pagina met gegevens op en geeft deze in de component weer.

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

De berichten variabele combineert alle berichten van verschillende pagina's in een enkele array, wat resulteert in een afgeplatte versie van de gegevens variabel. Hierdoor kunt u de afzonderlijke berichten eenvoudig in kaart brengen en weergeven.

Om het scrollen van gebruikers bij te houden en meer gegevens te laden wanneer de gebruiker bijna onderaan de lijst staat, kunt u dit definiëren een functie die de Intersection Observer API gebruikt om te detecteren wanneer elementen elkaar kruisen uitkijk postje.

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

Voeg ten slotte de JSX-elementen toe voor de berichten die in de browser worden weergegeven.

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

    •

Nadat u alle wijzigingen heeft aangebracht, gaat u naar http://localhost: 3000/Oneindig scrollen om ze in actie te zien.

TanStack Query: meer dan alleen gegevens ophalen

Paginering en oneindig scrollen zijn goede voorbeelden die de mogelijkheden van TanStack Query benadrukken. Simpel gezegd: het is een allesomvattende bibliotheek voor gegevensbeheer.

Met de uitgebreide reeks functies kunt u de gegevensbeheerprocessen van uw app stroomlijnen, inclusief een efficiënte verwerking van de status. Naast andere gegevensgerelateerde taken kunt u de algehele prestaties van uw webapplicaties en de gebruikerservaring verbeteren.