استخدم هذه التقنيات لإنشاء واجهات قابلة للاستخدام للتنقل بين مجموعات البيانات.

ستقوم معظم التطبيقات التي ستقوم بتطويرها بإدارة البيانات؛ ومع استمرار البرامج في التوسع، يمكن أن يكون هناك قدر هائل منها على نحو متزايد. عندما تفشل التطبيقات في إدارة كميات كبيرة من البيانات بفعالية، يكون أداؤها ضعيفًا.

يعد ترقيم الصفحات والتمرير اللانهائي من الأساليب الشائعة التي يمكنك استخدامها لتحسين أداء التطبيق. يمكنها مساعدتك في التعامل مع عرض البيانات بشكل أكثر كفاءة وتحسين تجربة المستخدم الشاملة.

ترقيم الصفحات والتمرير اللانهائي باستخدام استعلام TanStack

استعلام TanStack- تعديل لـ React Query - وهي مكتبة قوية لإدارة الحالة لتطبيقات JavaScript. فهو يوفر حلاً فعالاً لإدارة حالة التطبيق، من بين وظائف أخرى، بما في ذلك المهام المتعلقة بالبيانات مثل التخزين المؤقت.

يتضمن ترقيم الصفحات تقسيم مجموعة بيانات كبيرة إلى صفحات أصغر، مما يسمح للمستخدمين بالتنقل في المحتوى في أجزاء يمكن التحكم فيها باستخدام أزرار التنقل. وفي المقابل، يوفر التمرير اللانهائي تجربة تصفح أكثر ديناميكية. أثناء قيام المستخدم بالتمرير، يتم تحميل البيانات الجديدة وعرضها تلقائيًا، مما يلغي الحاجة إلى التنقل الصريح.

instagram viewer

يهدف ترقيم الصفحات والتمرير اللانهائي إلى إدارة وتقديم كميات كبيرة من البيانات بكفاءة. يعتمد الاختيار بين الاثنين على متطلبات بيانات التطبيق.

يمكنك العثور على رمز هذا المشروع في هذا جيثب مخزن.

إعداد مشروع Next.js

للبدء، قم بإنشاء مشروع Next.js. تحميل هذا أحدث إصدار من Next.js 13 الذي يستخدم دليل التطبيقات.

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

بعد ذلك، قم بتثبيت حزمة TanStack في مشروعك باستخدام npm، مدير حزم العقدة.

npm i @tanstack/react-query

دمج استعلام TanStack في تطبيق Next.js

لدمج استعلام TanStack في مشروع Next.js الخاص بك، تحتاج إلى إنشاء وتهيئة مثيل جديد لاستعلام TanStack في جذر التطبيق — تخطيط.js ملف. للقيام بذلك، قم باستيراد QueryClient و QueryClientProvider من استعلام TanStack. ثم قم بلف دعامة الأطفال بها 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

ال useQuery يعمل الخطاف على تبسيط جلب البيانات وإدارتها. من خلال توفير معلمات ترقيم الصفحات، مثل أرقام الصفحات، يمكنك بسهولة استرداد مجموعات فرعية محددة من البيانات.

بالإضافة إلى ذلك، يوفر الخطاف خيارات وتكوينات متنوعة لتخصيص وظيفة جلب البيانات، بما في ذلك إعداد خيارات ذاكرة التخزين المؤقت، بالإضافة إلى التعامل مع حالات التحميل بكفاءة. باستخدام هذه الميزات، يمكنك إنشاء تجربة ترقيم صفحات سلسة دون عناء.

الآن، لتنفيذ ترقيم الصفحات في تطبيق Next.js، قم بإنشاء ملف ترقيم الصفحات/page.js الملف في src/app الدليل. داخل هذا الملف، قم بإجراء عمليات الاستيراد التالية:

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

بعد ذلك، حدد مكونًا وظيفيًا لـ React. داخل هذا المكون، تحتاج إلى تحديد وظيفة ستقوم بجلب البيانات من واجهة برمجة التطبيقات الخارجية. في هذه الحالة، استخدم 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,
 });

ال keepPreviousData القيمة حقيقي، مما يضمن احتفاظ التطبيق بالبيانات السابقة أثناء جلب البيانات الجديدة. ال queryKey المعلمة عبارة عن مصفوفة تحتوي على مفتاح الاستعلام، وفي هذه الحالة، نقطة النهاية والصفحة الحالية التي تريد جلب البيانات لها. وأخيرا، queryFn معامل، fetchPosts، يطلق استدعاء الوظيفة لجلب البيانات.

كما ذكرنا سابقًا، يوفر الخطاف العديد من الحالات التي يمكنك تفريغها، تمامًا كما تفعل تدمير المصفوفات والكائنات, واستخدامها لتحسين تجربة المستخدم (عرض واجهات المستخدم المناسبة) أثناء عملية جلب البيانات. وتشمل هذه الدول isLoading، أناخطأ، و اكثر.

للقيام بذلك، قم بتضمين التعليمة البرمجية التالية لعرض شاشات رسائل مختلفة بناءً على الحالة الحالية للعملية الجارية:

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، الذي يجلب مقاطع الفيديو الجديدة تلقائيًا ويعرضها أثناء التمرير لأسفل.

ال useInfiniteQuery يتيح لك الخطاف تنفيذ التمرير اللانهائي عن طريق جلب البيانات من الخادم في الصفحات وجلب الصفحة التالية من البيانات وعرضها تلقائيًا أثناء قيام المستخدم بالتمرير لأسفل.

لتنفيذ التمرير اللانهائي، قم بإضافة 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. عندما يتم تحميل المكون في البداية، سيجلب الخطاف الصفحة الأولى من البيانات من الخادم. عندما يقوم المستخدم بالتمرير لأسفل، سيقوم الخطاف تلقائيًا بجلب الصفحة التالية من البيانات وعرضها في المكون.

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/التمرير اللانهائي لرؤيتهم في العمل.

استعلام TanStack: أكثر من مجرد جلب البيانات

يعد ترقيم الصفحات والتمرير اللانهائي من الأمثلة الجيدة التي تسلط الضوء على إمكانيات استعلام TanStack. ببساطة، إنها مكتبة شاملة لإدارة البيانات.

بفضل مجموعة الميزات الشاملة، يمكنك تبسيط عمليات إدارة بيانات تطبيقك، بما في ذلك المعالجة الفعالة للحالة. إلى جانب المهام الأخرى المتعلقة بالبيانات، يمكنك تحسين الأداء العام لتطبيقات الويب الخاصة بك، بالإضافة إلى تجربة المستخدم.