A végtelen görgetés és lapozás megvalósítása a Next.js és a TanStack Query segítségével

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.

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 Next.js 13 legújabb verzióját, 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 az npm, a Node csomagkezelő segítségével.

 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ájlban. Ehhez importálja a QueryClient és a QueryClientProvider alkalmazást a TanStack Query alkalmazásból. Ezután csomagolja be a gyerekeknek szánt kelléket a QueryClientProvider-rel az 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',
};

export default function RootLayout({ children }) {
  const queryClient = new QueryClient();

  return (
    <html lang="en">
      <body>
        <QueryClientProvider client={queryClient}>
          {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.

  A rendszerfrissítések letöltésének szüneteltetése Androidon

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 a lapozás megvalósításához a Next.js alkalmazásban hozzon létre egy Lapozás/page.js fájlt az src/app könyvtárban. 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.

 export default function Pagination() {
  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) {
        throw new Error('Failed to fetch posts');
      }

      const data = await response.json();
      return data;
    } catch (error) {
      console.error(error);
      throw error;
    }
  };

  
}

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 igaz, ami biztosítja, hogy az új adatok lekérése közben az alkalmazás megőrizze a korábbi adatokat. A queryKey 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, a fetchPosts, elindítja a függvényhívást az adatok lekéréséhez.

Amint azt korábban említettük, a hook számos olyan állapotot biztosít, amelyeket kicsomagolhat, hasonlóan ahhoz, ahogyan a tömböket és objektumokat megsemmisítené, és felhasználhatja ő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 közé tartozik az isLoading, az isError és egyebek.

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 (<h2 className="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, azokat a useQuery hook által biztosított adatváltozóban tárolja. 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, az Előző és a Következő hozzáadásához, hogy a felhasználók lekérdezhessenek és ennek megfelelően további oldalszámozott adatokat jelenítsenek meg.
   return (
    <div>
      <h2 className="header">Next.js Pagination</h2>
      {data && (
        <div className="card">
          <ul className="post-list">
            {data.map((post) => (
                <li key={post.id} className="post-item">{post.title}</li>
            ))}
          </ul>
        </div>
      )}
      <div className="btn-container">
        <button
          onClick={() => setPage(prevState => Math.max(prevState - 1, 0))}
          disabled={page === 1}
          className="prev-button"
        >Prev Page</button>

        <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 

Ezután lépjen a http://localhost:3000/Pagination oldalra egy böngészőben.

  A 8 legjobb Infrastructure as Code (IaC) eszköz 2023-ban

Mivel az oldalszámozás mappát felvette az alkalmazáskönyvtárba, 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 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ájlt az src/app könyvtárba. 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.

 export default function InfiniteScroll() {
  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) {
        throw new Error('Failed to fetch posts');
      }

      const data = await response.json();
      await new Promise((resolve) => setTimeout(resolve, 2000));
      return data;
    } catch (error) {
      console.error(error);
      throw error;
    }
  };

  
}

Az oldalszámozá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, hogy lehetővé tegye a felhasználó számára az aktuális adatok felfedezését, miközben görgetéssel elindítja az új adatkészlet visszaolvasását.

  Hogyan szúrjunk be egy sort a Wordbe

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) {
        return undefined;
      }
      return allPages.length + 1;
    },
  });

  const posts = data ? data.pages.flatMap((page) => page) : [];

A bejegyzések változó egyetlen tömbbe egyesíti a különböző oldalak összes bejegyzését, ami az adatváltozó egysíkított változatát eredményezi. Ez lehetővé teszi az egyes bejegyzések egyszerű feltérké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ó közel van a lista aljához, definiálhat egy függvényt, amely az Intersection Observer API-t használja annak észlelésére, amikor az elemek metszik egymást a nézetablakkal.

   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 (
    <div>
      <h2 className="header">Infinite Scroll</h2>
      <ul ref={listRef} className="post-list">
        {posts.map((post) => (
          <li key={post.id} className="post-item">
            {post.title}
          </li>
        ))}
      </ul>
      <div className="loading-indicator">
        {isFetching ? 'Fetching...' : isLoadingMore ? 'Loading more...' : null}
      </div>
    </div>
  );

Miután elvégezte az összes módosítást, látogasson el a http://localhost:3000/InfiniteScroll oldalra, hogy megtekinthesse azok működését.

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.