השתמש בטכניקות אלה כדי ליצור ממשקים שמישים לניווט בערכות נתונים.

רוב האפליקציות שתפתח ינהלו נתונים; ככל שהתוכניות ממשיכות להתרחב, יכולה להיות כמות עצומה יותר ויותר. כאשר יישומים לא מצליחים לנהל כמויות גדולות של נתונים ביעילות, הם מתפקדים גרוע.

עימוד וגלילה אינסופית הן שתי טכניקות פופולריות שבהן אתה יכול להשתמש כדי לייעל את ביצועי האפליקציה. הם יכולים לעזור לך לטפל בעיבוד נתונים בצורה יעילה יותר ולשפר את חווית המשתמש הכוללת.

עימוד וגלילה אינסופית באמצעות שאילתת TanStack

שאילתת 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 ביישום Next.js

כדי לשלב את TanStack Query בפרויקט Next.js שלך, עליך ליצור ולאתחל מופע חדש של TanStack Query בשורש היישום - ה- layout.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

ה useQuery hook מייעל את איסוף וניהול הנתונים. על ידי מתן פרמטרים של עימוד, כגון מספרי עמודים, אתה יכול בקלות לאחזר קבוצות משנה ספציפיות של נתונים.

בנוסף, ה-hook מספק אפשרויות ותצורות שונות להתאמה אישית של פונקציונליות שליפת הנתונים שלך, כולל הגדרת אפשרויות מטמון, כמו גם טיפול במצבי טעינה ביעילות. עם תכונות אלה, אתה יכול ליצור ללא מאמץ חווית עימוד חלקה.

כעת, כדי ליישם עימוד באפליקציית Next.js, צור א Pagining/page.js קובץ ב- src/app מַדרִיך. בתוך הקובץ הזה, בצע את הייבוא ​​הבא:

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

לאחר מכן, הגדר רכיב פונקציונלי של React. בתוך רכיב זה, עליך להגדיר פונקציה שתביא נתונים מ-API חיצוני. במקרה זה, השתמש ב- API של JSONPlaceholder כדי להביא סט של פוסטים.

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 hook, וציין את הפרמטרים הבאים כאובייקטים:

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

ה keepPreviousData הערך הוא נָכוֹן, מה שמבטיח שבזמן שליפת נתונים חדשים, האפליקציה שומרת על הנתונים הקודמים. ה queryKey פרמטר הוא מערך המכיל את המפתח עבור השאילתה, במקרה זה, את נקודת הקצה ואת העמוד הנוכחי עבורו אתה רוצה להביא נתונים. לבסוף, ה queryFn פָּרָמֶטֶר, fetchPosts, מפעיל את קריאת הפונקציה כדי להביא נתונים.

כפי שהוזכר קודם לכן, הקרס מספק מספר מצבים שאתה יכול לפרוק, בדומה לאיך שהיית עושה הרס מערכים ואובייקטים, ולהשתמש בהם כדי לשפר את חווית המשתמש (עיבוד ממשק משתמש מתאים) במהלך תהליך איסוף הנתונים. מדינות אלו כוללות טוען, אנישגיאה, ועוד.

כדי לעשות זאת, כלול את הקוד הבא כדי להציג מסכי הודעות שונים בהתבסס על המצב הנוכחי של התהליך המתמשך:

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

לבסוף, כלול את הקוד עבור רכיבי JSX שיוצגו בדף הדפדפן. קוד זה משרת גם שתי פונקציות נוספות:

  • ברגע שהאפליקציה תביא את הפוסטים מה-API, הם יאוחסנו ב- נתונים משתנה מסופק על ידי ה-useQuery hook. משתנה זה עוזר לנהל את מצב האפליקציה. לאחר מכן תוכל למפות את רשימת הפוסטים המאוחסנים במשתנה זה, ולעבד אותם בדפדפן.
  • כדי להוסיף שני לחצני ניווט, קודם ו הַבָּא, כדי לאפשר למשתמשים לבצע שאילתות ולהציג נתונים מעומדים נוספים בהתאם. 
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/Pgination בדפדפן.

מאז שכללת את דִפּוּף תיקייה ב- אפליקציה מדריך, Next.js מתייחס אליו כאל מסלול, המאפשר לך לגשת לדף בכתובת האתר הזו.

גלילה אינסופית מספקת חווית גלישה חלקה. דוגמה טובה היא YouTube, שמביאה סרטונים חדשים באופן אוטומטי ומציגה אותם תוך כדי גלילה מטה.

ה השתמש ב-InfiniteQuery hook מאפשר לך ליישם גלילה אינסופית על ידי שליפת נתונים משרת בדפים ושליפה ועיבוד אוטומטי של עמוד הנתונים הבא כשהמשתמש גולל מטה.

כדי ליישם גלילה אינסופית, הוסף InfiniteScroll/page.js קובץ ב- src/app מַדרִיך. לאחר מכן, בצע את הייבוא ​​הבא:

"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 הוק. כאשר הרכיב נטען בהתחלה, ה-hook יביא את העמוד הראשון של הנתונים מהשרת. כשהמשתמש גולל מטה, ה-hook יביא אוטומטית את עמוד הנתונים הבא ויעבד אותו ברכיב.

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

ה פוסטים משתנה משלב את כל הפוסטים מדפים שונים למערך אחד, וכתוצאה מכך גרסה שטוחה של נתונים מִשְׁתַנֶה. זה מאפשר לך למפות ולעבד בקלות את הפוסטים הבודדים.

כדי לעקוב אחר גלילות משתמשים ולטעון נתונים נוספים כאשר המשתמש קרוב לתחתית הרשימה, אתה יכול להגדיר פונקציה המשתמשת ב-Intersection Observer API כדי לזהות מתי אלמנטים מצטלבים עם נקודת מבט.

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: יותר מסתם אחזור נתונים

עימוד וגלילה אינסופית הן דוגמאות טובות המדגישות את היכולות של TanStack Query. במילים פשוטות, זוהי ספריית ניהול נתונים כוללת.

עם מערך התכונות הנרחב שלה, אתה יכול לייעל את תהליכי ניהול הנתונים של האפליקציה שלך, כולל טיפול יעיל במצב. לצד משימות אחרות הקשורות לנתונים, אתה יכול לשפר את הביצועים הכוללים של יישומי האינטרנט שלך, כמו גם את חווית המשתמש.