Skorzystaj z tych technik, aby utworzyć użyteczne interfejsy do nawigacji w zbiorach danych.

Większość aplikacji, które opracujesz, będzie zarządzać danymi; w miarę zwiększania się skali programów może być ich coraz więcej. Jeśli aplikacje nie zarządzają skutecznie dużymi ilościami danych, działają słabo.

Paginacja i nieskończone przewijanie to dwie popularne techniki, których można użyć do optymalizacji wydajności aplikacji. Mogą pomóc w wydajniejszym renderowaniu danych i poprawić ogólne wrażenia użytkownika.

Paginacja i nieskończone przewijanie za pomocą zapytania TanStack

Zapytanie TanStack—adaptacja React Query — to solidna biblioteka do zarządzania stanem dla aplikacji JavaScript. Oferuje wydajne rozwiązanie do zarządzania stanem aplikacji, a także innymi funkcjonalnościami, w tym zadaniami związanymi z danymi, takimi jak buforowanie.

Paginacja polega na podzieleniu dużego zbioru danych na mniejsze strony, umożliwiając użytkownikom nawigację po treści w łatwych do zarządzania fragmentach za pomocą przycisków nawigacyjnych. Natomiast nieskończone przewijanie zapewnia bardziej dynamiczne przeglądanie. Gdy użytkownik przewija, nowe dane ładują się i wyświetlają automatycznie, eliminując potrzebę jawnej nawigacji.

instagram viewer

Paginacja i nieskończone przewijanie mają na celu efektywne zarządzanie i prezentację dużych ilości danych. Wybór pomiędzy nimi zależy od wymagań aplikacji dotyczących danych.

Kod tego projektu znajdziesz w this GitHub magazyn.

Konfigurowanie projektu Next.js

Aby rozpocząć, utwórz projekt Next.js. Zainstaluj najnowsza wersja Next.js 13, która korzysta z katalogu aplikacji.

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

Następnie zainstaluj pakiet TanStack w swoim projekcie za pomocą npm, menedżer pakietów Node.

npm i @tanstack/react-query

Zintegruj zapytanie TanStack z aplikacją Next.js

Aby zintegrować TanStack Query z projektem Next.js, musisz utworzyć i zainicjować nową instancję TanStack Query w katalogu głównym aplikacji — układ.js plik. Aby to zrobić, zaimportuj Klient zapytania I Dostawca zapytania klienta z zapytania TanStack. Następnie owiń rekwizyt dziecka Dostawca zapytania klienta następująco:

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

Ta konfiguracja zapewnia, że ​​TanStack Query ma pełny dostęp do stanu aplikacji.

Zaimplementuj paginację za pomocą haka useQuery

The użyjZapytania hak usprawnia pobieranie danych i zarządzanie nimi. Podając parametry paginacji, takie jak numery stron, można łatwo pobrać określone podzbiory danych.

Dodatkowo hak zapewnia różne opcje i konfiguracje umożliwiające dostosowanie funkcjonalności pobierania danych, w tym ustawianie opcji pamięci podręcznej, a także efektywną obsługę stanów ładowania. Dzięki tym funkcjom możesz z łatwością stworzyć płynną paginację.

Teraz, aby zaimplementować paginację w aplikacji Next.js, utwórz plik Paginacja/strona.js plik w źródło/aplikacja informator. Wewnątrz tego pliku dokonaj następującego importu:

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

Następnie zdefiniuj komponent funkcjonalny React. Wewnątrz tego komponentu musisz zdefiniować funkcję, która będzie pobierać dane z zewnętrznego API. W takim wypadku skorzystaj z API zastępcze JSON aby pobrać zestaw postów.

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
}

Teraz zdefiniuj hak useQuery i określ następujące parametry jako obiekty:

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

The zachowaj poprzednie dane wartosc jest PRAWDA, co gwarantuje, że podczas pobierania nowych danych aplikacja zachowa poprzednie dane. The klucz zapytania parametr to tablica zawierająca klucz zapytania, w tym przypadku punkt końcowy i bieżącą stronę, dla której chcesz pobrać dane. Wreszcie, zapytanieFn parametr, pobierz posty, wyzwala wywołanie funkcji w celu pobrania danych.

Jak wspomniano wcześniej, hook udostępnia kilka stanów, które możesz rozpakować, podobnie jakbyś to zrobił niszczyć tablice i obiekty, i wykorzystywać je do poprawy komfortu użytkownika (renderowania odpowiednich interfejsów użytkownika) podczas procesu pobierania danych. Stany te obejmują ładuje się, Ibłąd, i więcej.

Aby to zrobić, dołącz następujący kod, aby wyświetlić różne ekrany komunikatów w zależności od bieżącego stanu trwającego procesu:

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

Na koniec dołącz kod elementów JSX, które będą renderowane na stronie przeglądarki. Kod ten pełni także dwie inne funkcje:

  • Gdy aplikacja pobierze posty z interfejsu API, zostaną one zapisane w pliku dane zmienna dostarczana przez hak useQuery. Ta zmienna pomaga zarządzać stanem aplikacji. Następnie możesz zmapować listę postów przechowywanych w tej zmiennej i wyrenderować je w przeglądarce.
  • Aby dodać dwa przyciski nawigacyjne, Poprzedni I Następny, aby umożliwić użytkownikom wysyłanie zapytań i wyświetlanie dodatkowych danych podzielonych na strony. 
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>
 );

Na koniec uruchom serwer deweloperski.

npm run dev

Następnie udaj się do http://localhost: 3000/paginacja w przeglądarce.

Ponieważ uwzględniłeś Paginacja folderze w aplikacja katalog, Next.js traktuje go jako trasę, umożliwiając dostęp do strony pod tym adresem URL.

Nieskończone przewijanie zapewnia płynne przeglądanie. Dobrym przykładem jest YouTube, który automatycznie pobiera nowe filmy i wyświetla je podczas przewijania w dół.

The użyjInfiniteQuery hook umożliwia implementację nieskończonego przewijania poprzez pobieranie danych z serwera na stronach oraz automatyczne pobieranie i renderowanie następnej strony danych, gdy użytkownik przewija w dół.

Aby zaimplementować nieskończone przewijanie, dodaj InfiniteScroll/page.js plik w źródło/aplikacja informator. Następnie wykonaj następujący import:

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

Następnie utwórz komponent funkcjonalny React. Wewnątrz tego komponentu, podobnie jak w przypadku implementacji paginacji, utwórz funkcję, która będzie pobierać dane z postów.

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
}

W przeciwieństwie do implementacji paginacji, ten kod wprowadza dwusekundowe opóźnienie podczas pobierania danych pozwolić użytkownikowi na przeglądanie bieżących danych podczas przewijania, aby wywołać ponowne pobranie nowego zestawu dane.

Teraz zdefiniuj hak useInfiniteQuery. Gdy komponent zostanie początkowo zamontowany, hak pobierze pierwszą stronę danych z serwera. Gdy użytkownik przewija w dół, hak automatycznie pobierze następną stronę danych i wyrenderuje ją w komponencie.

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 posty zmienna łączy wszystkie posty z różnych stron w jedną tablicę, co daje spłaszczoną wersję dane zmienny. Umożliwia to łatwe mapowanie i renderowanie poszczególnych postów.

Aby śledzić przewijanie użytkownika i ładować więcej danych, gdy użytkownik znajduje się blisko dołu listy, możesz zdefiniować funkcja wykorzystująca interfejs API Intersection Observer do wykrywania, kiedy elementy przecinają się z rzutnia.

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

Na koniec dołącz elementy JSX do postów renderowanych w przeglądarce.

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

    •

Po wprowadzeniu wszystkich zmian odwiedź stronę http://localhost: 3000/Nieskończone przewijanie żeby zobaczyć ich w akcji.

Zapytanie TanStack: więcej niż tylko pobieranie danych

Paginacja i nieskończone przewijanie to dobre przykłady podkreślające możliwości TanStack Query. Mówiąc najprościej, jest to wszechstronna biblioteka do zarządzania danymi.

Dzięki rozbudowanemu zestawowi funkcji możesz usprawnić procesy zarządzania danymi aplikacji, w tym wydajną obsługę stanu. Oprócz innych zadań związanych z danymi możesz poprawić ogólną wydajność aplikacji internetowych, a także komfort użytkowania.