Käytä näitä tekniikoita luodaksesi käyttökelpoisia rajapintoja tietojoukkojen navigointiin.

Useimmat kehittämäsi sovellukset hallitsevat tietoja; ohjelmien skaalautuessa niitä voi olla yhä enemmän. Kun sovellukset eivät pysty hallitsemaan suuria tietomääriä tehokkaasti, ne toimivat huonosti.

Sivutus ja loputon vieritys ovat kaksi suosittua tekniikkaa, joita voit käyttää sovellusten suorituskyvyn optimointiin. Ne voivat auttaa sinua käsittelemään tietojen hahmontamista tehokkaammin ja parantamaan yleistä käyttökokemusta.

Sivutus ja ääretön vieritys TanStack-kyselyn avulla

TanStack-kysely— React Queryn adaptaatio — on vankka tilanhallintakirjasto JavaScript-sovelluksille. Se tarjoaa tehokkaan ratkaisun sovelluksen tilan hallintaan muiden toimintojen ohella, mukaan lukien tietoihin liittyvät tehtävät, kuten välimuisti.

Sivutus sisältää suuren tietojoukon jakamisen pienemmiksi sivuiksi, jolloin käyttäjät voivat navigoida sisällössä hallittavissa olevissa osissa navigointipainikkeiden avulla. Sitä vastoin ääretön vieritys tarjoaa dynaamisemman selauskokemuksen. Kun käyttäjä rullaa, uudet tiedot latautuvat ja tulevat näkyviin automaattisesti, mikä eliminoi selkeän navigoinnin tarpeen.

instagram viewer

Sivutus ja loputon vieritys pyrkivät hallitsemaan ja esittämään tehokkaasti suuria tietomääriä. Valinta näiden kahden välillä riippuu sovelluksen tietovaatimuksista.

Löydät tämän projektin koodin tästä GitHub arkisto.

Next.js-projektin määrittäminen

Aloita luomalla Next.js-projekti. Asenna Next.js 13:n uusin versio, joka käyttää sovellushakemistoa.

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

Asenna seuraavaksi TanStack-paketti projektiisi käyttämällä npm, Node-pakettien hallinta.

npm i @tanstack/react-query

Integroi TanStack-kysely Next.js-sovellukseen

Integroidaksesi TanStack Queryn Next.js-projektiisi, sinun on luotava ja alustettava uusi TanStack Query -esiintymä sovelluksen juureen - layout.js tiedosto. Voit tehdä sen tuomalla QueryClient ja QueryClientProvider TanStack Querysta. Kääri sitten lasten rekvisiitta QueryClientProvider seuraavasti:

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

Tämä asennus varmistaa, että TanStack Queryllä on täydellinen pääsy sovelluksen tilaan.

Toteuta sivutus käyttämällä useQuery Hookia

The useQuery koukku virtaviivaistaa tietojen hakemista ja hallintaa. Antamalla sivutusparametreja, kuten sivunumeroita, voit helposti hakea tiettyjä tietojen osajoukkoja.

Lisäksi koukku tarjoaa erilaisia ​​vaihtoehtoja ja määrityksiä tietojen noutotoimintojen mukauttamiseen, mukaan lukien välimuistiasetusten asettaminen sekä lataustilojen tehokas käsittely. Näiden ominaisuuksien avulla voit luoda vaivattomasti saumattoman sivutuskokemuksen.

Ota nyt sivutus käyttöön Next.js-sovelluksessa luomalla a Sivutus/sivu.js tiedosto tiedostoon src/app hakemistosta. Tee tämän tiedoston sisällä seuraavat tuonnit:

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

Määritä sitten React-toiminnallinen komponentti. Tämän komponentin sisällä sinun on määritettävä toiminto, joka hakee tiedot ulkoisesta API: sta. Käytä tässä tapauksessa JSONPlaceholder API hakeaksesi joukon viestejä.

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
}

Määritä nyt useQuery-koukku ja määritä seuraavat parametrit objekteiksi:

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

The säilyttää EdellinenData arvo on totta, joka varmistaa, että sovellus säilyttää aiemmat tiedot noudettaessa uusia tietoja. The queryKey parametri on taulukko, joka sisältää kyselyn avaimen, tässä tapauksessa päätepisteen ja nykyisen sivun, jonka tiedot haluat hakea. Lopuksi, queryFn parametri, hae Viestit, laukaisee funktiokutsun tietojen hakemiseksi.

Kuten aiemmin mainittiin, koukku tarjoaa useita tiloja, jotka voit purkaa, samalla tavalla kuin tekisit tuhota taulukoita ja objekteja, ja käyttää niitä parantamaan käyttökokemusta (renderöimällä asianmukaisia ​​käyttöliittymiä) tiedonhakuprosessin aikana. Nämä valtiot sisältävät isLadataan, isError, ja enemmän.

Voit tehdä tämän sisällyttämällä seuraavan koodin eri viestiruutujen luomiseksi käynnissä olevan prosessin nykyisen tilan perusteella:

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

Lisää lopuksi koodi JSX-elementeille, jotka hahmonnetaan selainsivulla. Tämä koodi palvelee myös kahta muuta toimintoa:

  • Kun sovellus hakee viestit API: sta, ne tallennetaan sovellukseen tiedot useQuery-koukun tarjoama muuttuja. Tämä muuttuja auttaa hallitsemaan sovelluksen tilaa. Voit sitten kartoittaa tähän muuttujaan tallennettujen viestien luettelon ja hahmontaa ne selaimessa.
  • Jos haluat lisätä kaksi navigointipainiketta, Edellinen ja Seuraava, jotta käyttäjät voivat tehdä hakuja ja näyttää lisää sivutettuja tietoja vastaavasti. 
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>
 );

Lopuksi käynnistä kehityspalvelin.

npm run dev

Suuntaa sitten http://localhost: 3000/sivutus selaimessa.

Koska sisällytit Sivunumerointi -kansiossa sovellus hakemistoon, Next.js käsittelee sitä reittinä, jonka avulla voit käyttää kyseisen URL-osoitteen sivua.

Rajaton vieritys tarjoaa saumattoman selauskokemuksen. Hyvä esimerkki on YouTube, joka hakee uudet videot automaattisesti ja näyttää ne, kun vierität alaspäin.

The käytä InfiniteQueryä koukun avulla voit toteuttaa loputtoman vierityksen hakemalla tietoja palvelimelta sivuilla ja automaattisesti hakemalla ja renderöimällä seuraavan sivun tietoja, kun käyttäjä vierittää alaspäin.

Ota käyttöön ääretön vieritys lisäämällä an InfiniteScroll/page.js tiedosto tiedostoon src/app hakemistosta. Tee sitten seuraavat tuonnit:

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

Luo seuraavaksi React-toiminnallinen komponentti. Luo tämän komponentin sisällä, kuten sivutustoteutuksessa, toiminto, joka hakee viestien tiedot.

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
}

Toisin kuin sivutustoteutus, tämä koodi lisää kahden sekunnin viiveen tietoja haettaessa antaa käyttäjän tutkia nykyisiä tietoja samalla kun he vierittävät käynnistääkseen uuden joukon haun tiedot.

Määritä nyt useInfiniteQuery-koukku. Kun komponentti asennetaan alun perin, koukku hakee ensimmäisen sivun tietoja palvelimelta. Kun käyttäjä rullaa alaspäin, koukku hakee automaattisesti seuraavan sivun tietoja ja hahmontaa sen komponentissa.

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 viestit muuttuja yhdistää kaikki viestit eri sivuilta yhdeksi taulukoksi, jolloin tuloksena on litistetty versio tiedot muuttuja. Tämän avulla voit helposti kartoittaa ja hahmontaa yksittäiset viestit.

Jos haluat seurata käyttäjien vieritystä ja ladata lisää tietoja, kun käyttäjä on lähellä luettelon alaosaa, voit määrittää toiminto, joka käyttää Intersection Observer API: ta havaitsemaan, milloin elementit leikkaavat näkymä.

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

Lisää lopuksi JSX-elementit viesteihin, jotka näkyvät selaimessa.

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

    •

Kun olet tehnyt kaikki muutokset, käy osoitteessa http://localhost: 3000/InfiniteScroll nähdä heidät toiminnassa.

TanStack-kysely: enemmän kuin pelkkä tietojen hakeminen

Sivutus ja loputon vieritys ovat hyviä esimerkkejä, jotka korostavat TanStack Queryn ominaisuuksia. Yksinkertaisesti sanottuna se on monipuolinen tiedonhallintakirjasto.

Laajan ominaisuuksien avulla voit virtaviivaistaa sovelluksesi tiedonhallintaprosesseja, mukaan lukien tehokkaan tilankäsittelyn. Muiden dataan liittyvien tehtävien ohella voit parantaa verkkosovellustesi yleistä suorituskykyä ja käyttökokemusta.