Използвайте тези техники, за да създадете използваеми интерфейси за навигиране на набори от данни.

Повечето приложения, които ще разработите, ще управляват данни; тъй като програмите продължават да се мащабират, може да има все по-голямо количество от него. Когато приложенията не успяват да управляват ефективно големи количества данни, те се представят лошо.

Странирането и безкрайното превъртане са две популярни техники, които можете да използвате, за да оптимизирате производителността на приложението. Те могат да ви помогнат да се справите с изобразяването на данни по-ефективно и да подобрят цялостното потребителско изживяване.

Страниране и безкрайно превъртане чрез TanStack Query

Запитване за TanStack— адаптация на React Query — е стабилна библиотека за управление на състоянието за JavaScript приложения. Той предлага ефективно решение за управление на състоянието на приложението, наред с други функции, включително задачи, свързани с данни, като кеширане.

Странирането включва разделяне на голям набор от данни на по-малки страници, което позволява на потребителите да навигират в съдържанието на управляеми парчета с помощта на бутони за навигация. За разлика от това, безкрайното превъртане осигурява по-динамично сърфиране. Докато потребителят превърта, новите данни се зареждат и показват автоматично, елиминирайки необходимостта от изрична навигация.

instagram viewer

Странирането и безкрайното превъртане имат за цел ефективно управление и представяне на големи количества данни. Изборът между двете зависи от изискванията за данни на приложението.

Можете да намерите кода на този проект тук GitHub хранилище.

Настройване на проект Next.js

За да започнете, създайте проект Next.js. Инсталирайте най-новата версия на Next.js 13, която използва директорията на приложението.

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

След това инсталирайте пакета TanStack във вашия проект, като използвате npm, мениджърът на пакети Node.

npm i @tanstack/react-query

Интегрирайте TanStack Query в приложението Next.js

За да интегрирате TanStack Query във вашия проект Next.js, трябва да създадете и инициализирате нов екземпляр на TanStack Query в корена на приложението – оформление.js файл. За да направите това, импортирайте QueryClient и QueryClientProvider от TanStack Query. След това увийте детския реквизит с QueryClientProvider както следва:

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

Тази настройка гарантира, че TanStack Query има пълен достъп до състоянието на приложението.

Внедрете страниране с помощта на useQuery Hook

The useQuery куката рационализира извличането и управлението на данни. Като предоставите параметри за страниране, като номера на страници, можете лесно да извлечете конкретни подмножества от данни.

Освен това, куката предоставя различни опции и конфигурации за персонализиране на вашата функционалност за извличане на данни, включително задаване на опции за кеширане, както и ефективно боравене със състояния на зареждане. С тези функции можете без усилие да създадете безпроблемно изживяване с пагиниране.

Сега, за да приложите пагинация в приложението Next.js, създайте a Пагинация/page.js файл в src/приложение указател. Вътре в този файл направете следните импорти:

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

След това дефинирайте функционален компонент на React. Вътре в този компонент трябва да дефинирате функция, която ще извлича данни от външен API. В този случай използвайте JSONPlaceholder API за да извлечете набор от публикации.

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
}

Сега дефинирайте куката useQuery и задайте следните параметри като обекти:

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

The keepPreviousData стойността е вярно, което гарантира, че докато извлича нови данни, приложението запазва предишните данни. The queryKey параметър е масив, съдържащ ключа за заявката, в този случай крайната точка и текущата страница, за която искате да извлечете данни. На последно място, queryFn параметър, fetchPosts, задейства извикването на функция за извличане на данни.

Както споменахме по-рано, куката предоставя няколко състояния, които можете да разопаковате, подобно на начина, по който бихте направили разрушаване на масиви и обекти, и ги използвайте за подобряване на потребителското изживяване (изобразяване на подходящи потребителски интерфейси) по време на процеса на извличане на данни. Тези състояния включват се зарежда, т.еsError, и още.

За да направите това, включете следния код, за да изобразите различни екрани със съобщения въз основа на текущото състояние на текущия процес:

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

И накрая, включете кода за JSX елементите, които ще се визуализират на страницата на браузъра. Този код изпълнява и две други функции:

  • След като приложението извлече публикациите от API, те ще бъдат съхранени в данни променлива, предоставена от куката useQuery. Тази променлива помага за управление на състоянието на приложението. След това можете да картографирате списъка с публикации, съхранени в тази променлива, и да ги изобразите в браузъра.
  • За да добавите два бутона за навигация, Предишен и Следващия, за да позволи на потребителите да правят заявки и съответно да показват допълнителни пагинирани данни. 
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>
 );

И накрая, стартирайте сървъра за разработка.

npm run dev

След това преминете към http://localhost: 3000/Пагинация в браузър.

Тъй като включихте Пагинация папка в ап директория, Next.js го третира като маршрут, позволяващ ви достъп до страницата на този URL адрес.

Безкрайното превъртане осигурява безпроблемно сърфиране. Добър пример е YouTube, който автоматично извлича нови видеоклипове и ги показва, докато превъртате надолу.

The useInfiniteQuery hook ви позволява да реализирате безкрайно превъртане чрез извличане на данни от сървър в страници и автоматично извличане и изобразяване на следващата страница с данни, докато потребителят превърта надолу.

За да приложите безкрайно превъртане, добавете InfiniteScroll/page.js файл в src/приложение указател. След това направете следните импортирания:

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

След това създайте функционален компонент на React. Вътре в този компонент, подобно на изпълнението на пагинацията, създайте функция, която ще извлича данните от публикациите.

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
}

За разлика от внедряването на страниране, този код въвежда забавяне от две секунди при извличане на данни към позволяват на потребителя да изследва текущите данни, докато превърта, за да задейства повторно извличане на нов набор от данни.

Сега дефинирайте куката useInfiniteQuery. Когато компонентът първоначално се монтира, куката ще извлече първата страница с данни от сървъра. Докато потребителят превърта надолу, куката автоматично ще извлече следващата страница с данни и ще я изобрази в компонента.

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 публикации променливата комбинира всички публикации от различни страници в един масив, което води до сплескана версия на данни променлива. Това ви позволява лесно да картографирате и изобразявате отделните публикации.

За да проследите потребителските превъртания и да заредите повече данни, когато потребителят е близо до края на списъка, можете да дефинирате функция, която използва API на Intersection Observer, за да открие кога елементите се пресичат с прозорец за изглед.

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

И накрая, включете JSX елементите за публикациите, които се изобразяват в браузъра.

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

    •

След като направите всички промени, посетете http://localhost: 3000/InfiniteScroll за да ги видите в действие.

TanStack Query: Повече от просто извличане на данни

Странирането и безкрайното превъртане са добри примери, които подчертават възможностите на TanStack Query. Казано по-просто, това е цялостна библиотека за управление на данни.

С неговия обширен набор от функции можете да рационализирате процесите за управление на данни на вашето приложение, включително ефективно боравене със състоянието. Наред с други задачи, свързани с данни, можете да подобрите цялостната производителност на вашите уеб приложения, както и потребителското изживяване.