Brug disse teknikker til at skabe brugbare grænseflader til at navigere i datasæt.

De fleste apps, du vil udvikle, vil administrere data; efterhånden som programmer fortsætter med at skalere, kan der blive en stadig større mængde af det. Når applikationer ikke klarer store mængder data effektivt, klarer de sig dårligt.

Sideinddeling og uendelig rulning er to populære teknikker, du kan bruge til at optimere appens ydeevne. De kan hjælpe dig med at håndtere datagengivelse mere effektivt og forbedre den overordnede brugeroplevelse.

Sideinddeling og uendelig rulning ved hjælp af TanStack-forespørgsel

TanStack-forespørgsel—en tilpasning af React Query — er et robust tilstandsstyringsbibliotek til JavaScript-applikationer. Det tilbyder en effektiv løsning til styring af applikationstilstand, blandt andre funktioner, herunder datarelaterede opgaver såsom caching.

Sideinddeling involverer opdeling af et stort datasæt i mindre sider, hvilket giver brugerne mulighed for at navigere i indholdet i håndterbare bidder ved hjælp af navigationsknapper. I modsætning hertil giver uendelig rulning en mere dynamisk browsingoplevelse. Når brugeren ruller, indlæses og vises nye data automatisk, hvilket eliminerer behovet for eksplicit navigation.

instagram viewer

Paginering og uendelig rulning sigter mod effektivt at administrere og præsentere store mængder data. Valget mellem de to afhænger af applikationens datakrav.

Du kan finde dette projekts kode i denne GitHub depot.

Opsætning af et Next.js-projekt

For at komme i gang skal du oprette et Next.js-projekt. Installer seneste version af Next.js 13, som bruger App-biblioteket.

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

Installer derefter TanStack-pakken i dit projekt ved hjælp af npm, Node-pakkeadministratoren.

npm i @tanstack/react-query

Integrer TanStack Query i Next.js-applikationen

For at integrere TanStack Query i dit Next.js-projekt skal du oprette og initialisere en ny forekomst af TanStack Query i roden af ​​applikationen – layout.js fil. For at gøre det skal du importere QueryClient og QueryClientProvider fra TanStack Query. Pak derefter børns rekvisitter ind med QueryClientProvider som følger:

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

Denne opsætning sikrer, at TanStack Query har fuld adgang til applikationens tilstand.

Implementer paginering ved hjælp af useQuery Hook

Det useQuery hook strømliner datahentning og -styring. Ved at angive pagineringsparametre, såsom sidetal, kan du nemt hente specifikke delmængder af data.

Derudover giver krogen forskellige muligheder og konfigurationer til at tilpasse din datahentningsfunktionalitet, herunder indstilling af cache-indstillinger, samt håndtering af indlæsningstilstande effektivt. Med disse funktioner kan du nemt skabe en problemfri pagineringsoplevelse.

For at implementere paginering i Next.js-appen skal du oprette en Paginering/side.js fil i src/app vejviser. Foretag følgende importer i denne fil:

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

Definer derefter en React funktionel komponent. Inde i denne komponent skal du definere en funktion, der henter data fra en ekstern API. I dette tilfælde skal du bruge JSONPlaceholder API at hente et sæt indlæg.

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
}

Definer nu useQuery hook, og angiv følgende parametre som objekter:

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

Det keepPreviousData værdi er rigtigt, som sikrer, at appen, mens den henter nye data, bevarer de tidligere data. Det queryKey parameter er et array, der indeholder nøglen til forespørgslen, i dette tilfælde slutpunktet og den aktuelle side, du vil hente data for. Til sidst queryFn parameter, hente indlæg, udløser funktionskaldet for at hente data.

Som tidligere nævnt giver krogen flere tilstande, som du kan pakke ud, svarende til hvordan du ville destrukturere arrays og objekter, og bruge dem til at forbedre brugeroplevelsen (gengivelse af passende brugergrænseflader) under datahentningsprocessen. Disse stater omfatter er Indlæser, dvssFejl, og mere.

For at gøre det skal du inkludere følgende kode for at gengive forskellige meddelelsesskærme baseret på den aktuelle tilstand af den igangværende proces:

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

Til sidst skal du inkludere koden for de JSX-elementer, der gengives på browsersiden. Denne kode tjener også to andre funktioner:

  • Når appen henter indlæggene fra API'et, vil de blive gemt i data variabel leveret af useQuery hook. Denne variabel hjælper med at administrere applikationens tilstand. Du kan derefter kortlægge listen over indlæg gemt i denne variabel og gengive dem i browseren.
  • For at tilføje to navigationsknapper, Tidligere og Næste, for at give brugerne mulighed for at forespørge og vise yderligere paginerede data i overensstemmelse hermed. 
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>
 );

Til sidst skal du starte udviklingsserveren.

npm run dev

Gå derefter over til http://localhost: 3000/Page i en browser.

Siden du inkluderede Sideinddeling mappe i app mappe, behandler Next.js det som en rute, så du kan få adgang til siden på den URL.

Uendelig rulning giver en problemfri browsingoplevelse. Et godt eksempel er YouTube, som henter nye videoer automatisk og viser dem, mens du scroller ned.

Det brug InfiniteQuery hook giver dig mulighed for at implementere uendelig scrolling ved at hente data fra en server i sider og automatisk hente og gengive den næste side med data, når brugeren ruller ned.

For at implementere uendelig rulning skal du tilføje en InfiniteScroll/page.js fil i src/app vejviser. Foretag derefter følgende importer:

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

Opret derefter en React funktionel komponent. Inde i denne komponent, i lighed med pagineringsimplementeringen, skal du oprette en funktion, der henter indlæggenes data.

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
}

I modsætning til pagineringsimplementeringen introducerer denne kode en forsinkelse på to sekunder, når data hentes til tillade en bruger at udforske de aktuelle data, mens de ruller for at udløse en genhentning af et nyt sæt data.

Definer nu useInfiniteQuery-krogen. Når komponenten først monteres, henter krogen den første side med data fra serveren. Når brugeren ruller ned, henter krogen automatisk den næste side med data og gengiver den i komponenten.

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

Det indlæg variabel kombinerer alle indlæg fra forskellige sider i et enkelt array, hvilket resulterer i en fladtrykt version af data variabel. Dette giver dig mulighed for nemt at kortlægge og gengive de enkelte indlæg.

For at spore brugerruller og indlæse flere data, når brugeren er tæt på bunden af ​​listen, kan du definere en funktion, der bruger Intersection Observer API til at detektere, hvornår elementer skærer hinanden med viewport.

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

Til sidst skal du inkludere JSX-elementerne for de indlæg, der gengives i browseren.

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

    •

Når du har foretaget alle ændringerne, besøg http://localhost: 3000/InfiniteScroll at se dem i aktion.

TanStack-forespørgsel: Mere end blot datahentning

Sideinddeling og uendelig rulning er gode eksempler, der fremhæver mulighederne ved TanStack Query. Kort sagt, det er et all-around dataadministrationsbibliotek.

Med dets omfattende sæt funktioner kan du strømline din apps datahåndteringsprocesser, herunder effektiv håndtering af tilstand. Udover andre datarelaterede opgaver kan du forbedre den overordnede ydeevne af dine webapplikationer samt brugeroplevelsen.