नेक्स्ट.जेएस और टैनस्टैक क्वेरी के साथ अनंत स्क्रॉलिंग और पेजिनेशन कैसे लागू करें

आपके द्वारा विकसित किए जाने वाले अधिकांश ऐप्स डेटा का प्रबंधन करेंगे; जैसे-जैसे कार्यक्रम बड़े होते जा रहे हैं, इसकी मात्रा बढ़ती जा रही है। जब एप्लिकेशन बड़ी मात्रा में डेटा को प्रभावी ढंग से प्रबंधित करने में विफल हो जाते हैं, तो वे खराब प्रदर्शन करते हैं।

पेजिनेशन और अनंत स्क्रॉलिंग दो लोकप्रिय तकनीकें हैं जिनका उपयोग आप ऐप के प्रदर्शन को अनुकूलित करने के लिए कर सकते हैं। वे आपको डेटा रेंडरिंग को अधिक कुशलता से संभालने और समग्र उपयोगकर्ता अनुभव को बढ़ाने में मदद कर सकते हैं।

टैनस्टैक क्वेरी का उपयोग करके पेजिनेशन और अनंत स्क्रॉलिंग

टैनस्टैक क्वेरी-रिएक्ट क्वेरी का एक अनुकूलन-जावास्क्रिप्ट अनुप्रयोगों के लिए एक मजबूत राज्य प्रबंधन पुस्तकालय है। यह कैशिंग जैसे डेटा-संबंधित कार्यों सहित अन्य कार्यात्मकताओं के बीच एप्लिकेशन स्थिति के प्रबंधन के लिए एक कुशल समाधान प्रदान करता है।

पेजिनेशन में बड़े डेटासेट को छोटे पेजों में विभाजित करना शामिल है, जिससे उपयोगकर्ता नेविगेशन बटन का उपयोग करके प्रबंधनीय टुकड़ों में सामग्री को नेविगेट कर सकते हैं। इसके विपरीत, अनंत स्क्रॉलिंग अधिक गतिशील ब्राउज़िंग अनुभव प्रदान करती है। जैसे ही उपयोगकर्ता स्क्रॉल करता है, नया डेटा स्वचालित रूप से लोड और प्रदर्शित होता है, जिससे स्पष्ट नेविगेशन की आवश्यकता समाप्त हो जाती है।

पेजिनेशन और अनंत स्क्रॉलिंग का उद्देश्य बड़ी मात्रा में डेटा को कुशलतापूर्वक प्रबंधित करना और प्रस्तुत करना है। दोनों के बीच चयन एप्लिकेशन की डेटा आवश्यकताओं पर निर्भर करता है।

नेक्स्ट.जेएस प्रोजेक्ट की स्थापना

आरंभ करने के लिए, एक Next.js प्रोजेक्ट बनाएं। स्थापित करें Next.js 13 का नवीनतम संस्करण जो ऐप निर्देशिका का उपयोग करता है.

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

इसके बाद, अपने प्रोजेक्ट में TanStack पैकेज का उपयोग करके इंस्टॉल करें एनपीएम, नोड पैकेज मैनेजर.

npm i @tanstack/react-query

नेक्स्ट.जेएस एप्लिकेशन में टैनस्टैक क्वेरी को एकीकृत करें

अपने नेक्स्ट.जेएस प्रोजेक्ट में टैनस्टैक क्वेरी को एकीकृत करने के लिए, आपको एप्लिकेशन के रूट में टैनस्टैक क्वेरी का एक नया उदाहरण बनाना और आरंभ करना होगा। लेआउट.जे.एस फ़ाइल। ऐसा करने के लिए, आयात करें क्वेरीक्लाइंट और क्वेरीक्लाइंटप्रदाता टैनस्टैक क्वेरी से। फिर, बच्चों के प्रॉप को लपेटें क्वेरीक्लाइंटप्रदाता निम्नलिखित नुसार:

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

यह सेटअप सुनिश्चित करता है कि टैनस्टैक क्वेरी के पास एप्लिकेशन की स्थिति तक पूरी पहुंच है।

यूज़क्वेरी हुक का उपयोग करके पेजिनेशन लागू करें

उपयोग प्रश्न हुक डेटा लाने और प्रबंधन को सुव्यवस्थित करता है। पेज नंबर जैसे पेजिनेशन पैरामीटर प्रदान करके, आप डेटा के विशिष्ट सबसेट को आसानी से पुनः प्राप्त कर सकते हैं।

इसके अतिरिक्त, हुक आपके डेटा-फ़ेचिंग कार्यक्षमता को अनुकूलित करने के लिए विभिन्न विकल्प और कॉन्फ़िगरेशन प्रदान करता है, जिसमें कैश विकल्प सेट करने के साथ-साथ लोडिंग स्थिति को कुशलतापूर्वक प्रबंधित करना भी शामिल है। इन सुविधाओं के साथ, आप सहजता से एक सहज पृष्ठांकन अनुभव बना सकते हैं।

अब, Next.js ऐप में पेजिनेशन लागू करने के लिए, एक बनाएं पेजिनेशन/पेज.जे.एस फ़ाइल में स्रोत/ऐप निर्देशिका। इस फ़ाइल के अंदर, निम्नलिखित आयात करें:

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

फिर, एक रिएक्ट कार्यात्मक घटक को परिभाषित करें। इस घटक के अंदर, आपको एक फ़ंक्शन को परिभाषित करने की आवश्यकता है जो बाहरी एपीआई से डेटा लाएगा। इस स्थिति में, का उपयोग करें JSONप्लेसहोल्डर एपीआई पोस्ट का एक सेट लाने के लिए.

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
}

अब, यूज़क्वेरी हुक को परिभाषित करें, और निम्नलिखित पैरामीटर को ऑब्जेक्ट के रूप में निर्दिष्ट करें:

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

पिछलाडेटा रखें मूल्य है सत्य, जो यह सुनिश्चित करता है कि, नया डेटा लाते समय, ऐप पिछले डेटा को सुरक्षित रखता है। queryKey पैरामीटर एक सरणी है जिसमें क्वेरी के लिए कुंजी होती है, इस मामले में, समापन बिंदु और वर्तमान पृष्ठ जिसके लिए आप डेटा प्राप्त करना चाहते हैं। अंत में, queryFn पैरामीटर, फ़ेचपोस्ट, डेटा लाने के लिए फ़ंक्शन कॉल को ट्रिगर करता है।

जैसा कि पहले उल्लेख किया गया है, हुक कई स्थितियां प्रदान करता है जिन्हें आप अनपैक कर सकते हैं, जैसे आप करते हैं सरणियों और वस्तुओं को नष्ट करना, और डेटा प्राप्त करने की प्रक्रिया के दौरान उपयोगकर्ता अनुभव (उपयुक्त यूआई प्रस्तुत करना) को बेहतर बनाने के लिए उनका उपयोग करें। इन राज्यों में शामिल हैं लोड हो रहा है, मैंत्रुटि, और अधिक।

ऐसा करने के लिए, चल रही प्रक्रिया की वर्तमान स्थिति के आधार पर विभिन्न संदेश स्क्रीन प्रस्तुत करने के लिए निम्नलिखित कोड शामिल करें:

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

अंत में, JSX तत्वों के लिए कोड शामिल करें जो ब्राउज़र पेज पर प्रस्तुत होगा। यह कोड दो अन्य कार्य भी करता है:

• एक बार जब ऐप एपीआई से पोस्ट प्राप्त कर लेगा, तो उन्हें इसमें संग्रहीत किया जाएगा डेटा यूज़क्वेरी हुक द्वारा प्रदान किया गया वैरिएबल। यह वेरिएबल एप्लिकेशन की स्थिति को प्रबंधित करने में मदद करता है। फिर आप इस वेरिएबल में संग्रहीत पोस्ट की सूची को मैप कर सकते हैं, और उन्हें ब्राउज़र पर प्रस्तुत कर सकते हैं।
• दो नेविगेशन बटन जोड़ने के लिए, पहले का और अगला, उपयोगकर्ताओं को तदनुसार अतिरिक्त पृष्ठांकित डेटा को क्वेरी करने और प्रदर्शित करने की अनुमति देने के लिए।

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 पर पृष्ठ तक पहुंच सकते हैं।

अनंत स्क्रॉलिंग एक सहज ब्राउज़िंग अनुभव प्रदान करती है। एक अच्छा उदाहरण यूट्यूब है, जो स्वचालित रूप से नए वीडियो लाता है और जैसे ही आप नीचे स्क्रॉल करते हैं उन्हें प्रदर्शित करता है।

InfiniteQuery का उपयोग करें हुक आपको पृष्ठों में सर्वर से डेटा लाकर अनंत स्क्रॉलिंग लागू करने और उपयोगकर्ता द्वारा नीचे स्क्रॉल करने पर डेटा के अगले पृष्ठ को स्वचालित रूप से लाने और प्रस्तुत करने की अनुमति देता है।

अनंत स्क्रॉलिंग लागू करने के लिए, एक जोड़ें InfiniteScroll/page.js फ़ाइल में स्रोत/ऐप निर्देशिका। फिर, निम्नलिखित आयात करें:

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

इसके बाद, एक रिएक्ट कार्यात्मक घटक बनाएं। इस घटक के अंदर, पेजिनेशन कार्यान्वयन के समान, एक फ़ंक्शन बनाएं जो पोस्ट का डेटा लाएगा।

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

पदों वैरिएबल अलग-अलग पृष्ठों के सभी पोस्ट को एक ही सरणी में जोड़ता है, जिसके परिणामस्वरूप इसका एक चपटा संस्करण बनता है डेटा चर। यह आपको अलग-अलग पोस्ट को आसानी से मैप करने और प्रस्तुत करने की अनुमति देता है।

उपयोगकर्ता स्क्रॉल को ट्रैक करने और अधिक डेटा लोड करने के लिए जब उपयोगकर्ता सूची के निचले भाग के करीब हो, तो आप परिभाषित कर सकते हैं एक फ़ंक्शन जो यह पता लगाने के लिए इंटरसेक्शन ऑब्जर्वर एपीआई का उपयोग करता है कि तत्व कब इंटरसेक्ट होते हैं व्यूपोर्ट.

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/अनंत स्क्रॉल उन्हें कार्रवाई में देखने के लिए.

टैनस्टैक क्वेरी: डेटा फ़ेचिंग से कहीं अधिक

पेजिनेशन और अनंत स्क्रॉलिंग अच्छे उदाहरण हैं जो टैनस्टैक क्वेरी की क्षमताओं को उजागर करते हैं। सीधे शब्दों में कहें तो यह एक सर्वांगीण डेटा प्रबंधन लाइब्रेरी है।

इसकी व्यापक सुविधाओं के साथ, आप अपने ऐप की डेटा प्रबंधन प्रक्रियाओं को सुव्यवस्थित कर सकते हैं, जिसमें राज्य की कुशल हैंडलिंग भी शामिल है। अन्य डेटा-संबंधी कार्यों के साथ-साथ, आप अपने वेब एप्लिकेशन के समग्र प्रदर्शन के साथ-साथ उपयोगकर्ता अनुभव में भी सुधार कर सकते हैं।