टैनस्टैक क्वेरी, एकेए रिएक्ट क्वेरी, रिएक्ट अनुप्रयोगों में डेटा लाने के लिए एक लोकप्रिय पुस्तकालय है। रिएक्ट क्वेरी वेब एप्लिकेशन में डेटा लाने, कैशिंग और अपडेट करने की प्रक्रिया को सरल बनाती है। यह लेख रिएक्ट एप्लिकेशन में डेटा लाने के लिए रिएक्ट क्वेरी का उपयोग करने पर चर्चा करेगा।

रिएक्ट क्वेरी को स्थापित करना और सेट अप करना

आप एनपीएम या यार्न का उपयोग करके रिएक्ट क्वेरी स्थापित कर सकते हैं। एनपीएम का उपयोग करके इसे स्थापित करने के लिए, अपने टर्मिनल में निम्न कमांड चलाएँ:

npm i @tanstack/react-query

यार्न का उपयोग करके इसे स्थापित करने के लिए, अपने टर्मिनल में निम्न कमांड चलाएँ:

यार्न जोड़ें @tanstack/react-query

रिएक्ट क्वेरी लाइब्रेरी स्थापित करने के बाद, आप पूरे एप्लिकेशन को इसमें लपेटते हैं क्वेरी क्लाइंट प्रदाता अवयव। क्वेरी क्लाइंट प्रदाता घटक आपके पूरे एप्लिकेशन को लपेटता है और इसका एक उदाहरण प्रदान करता है क्वेरी क्लाइंट इसके सभी बाल घटकों के लिए।

क्वेरी क्लाइंट रिएक्ट क्वेरी का केंद्रीय भाग है।

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

उपयोग करने के लिए क्वेरी क्लाइंट प्रदाता और यह क्वेरी क्लाइंट अपने आवेदन में, आपको उन्हें से आयात करना होगा @tanstack/react-query पुस्तकालय:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात रिएक्टडॉम से'प्रतिक्रिया-डोम/क्लाइंट';
आयात अनुप्रयोग से'।/अनुप्रयोग';
आयात {क्वेरी क्लाइंटप्रोवाइडर, क्वेरी क्लाइंट} से'@tanstack/react-query';
कॉन्स्ट क्वेरी क्लाइंट = नया क्वेरी क्लाइंट ();
रिएक्टडोम.क्रिएटरूट (दस्तावेज़.getEementd('जड़'))।प्रदान करना(



 </QueryClientProvider>
 </React.StrictMode>
)

यूजक्वेरी हुक को समझना

useQuery हुक रिएक्ट क्वेरी लाइब्रेरी द्वारा प्रदान किया गया एक फ़ंक्शन है, जो सर्वर या एपीआई से डेटा प्राप्त करता है। यह निम्नलिखित गुणों वाली वस्तु को स्वीकार करता है: queryKey (क्वेरी की कुंजी) और queryFn (एक फ़ंक्शन जो एक वादा देता है जो उस डेटा को हल करता है जिसे आप प्राप्त करना चाहते हैं)।

queryKey क्वेरी की पहचान करता है; यह आपके आवेदन में प्रत्येक प्रश्न के लिए अद्वितीय होना चाहिए। कुंजी कोई भी मान हो सकती है, जैसे स्ट्रिंग, ऑब्जेक्ट या सरणी।

का उपयोग करके डेटा लाने के लिए useQuery हुक, आपको इसे से आयात करने की आवश्यकता है @tanstack/react-query लाइब्रेरी, पास ए queryKey और उपयोग करें queryFn एपीआई से डेटा लाने के लिए।

उदाहरण के लिए:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात axios से'अक्षीय';
आयात {यूज़क्वेरी} से'@tanstack/react-query';
समारोहघर() {
कॉन्स्ट पोस्टक्वेरी = यूज़क्वेरी ({
 क्वेरीकी: ['पद'],
 क्वेरीFn: async () => {
कॉन्स्ट प्रतिक्रिया = इंतजार axios.get(' https://jsonplaceholder.typicode.com/posts');
कॉन्स्ट डेटा = इंतजार प्रतिक्रिया डेटा;
वापस करना आंकड़े;
 }
 })
अगर(postQuery.isLoading) वापस करना ( <एच 1>लोड हो रहा है...एच 1>)
अगर(postQuery.isError) वापस करना (<एच 1>डेटा लोड करने में त्रुटि!!!एच 1>)

वापस करना (



होम</h1>
 { postQuery.data.map ( (वस्तु) => ( <पीचाबी={सामान आईडी}>{मद शीर्षक}पी>)) }
 </div>
 )
}
निर्यातगलती करना घर;

useQuery हुक एक ऑब्जेक्ट देता है जिसमें क्वेरी पर जानकारी होती है। postquery वस्तु में शामिल है लोड हो रहा है, त्रुटि है, और सफलता है राज्यों। लोड हो रहा है, त्रुटि है, और सफलता है राज्य डेटा पुनर्प्राप्ति प्रक्रिया के जीवनचक्र का प्रबंधन करते हैं। postQuery.data संपत्ति में एपीआई से प्राप्त डेटा शामिल है।

लोड हो रहा है राज्य एक बूलियन मान है जो इंगित करता है कि क्वेरी वर्तमान में डेटा लोड कर रही है या नहीं। जब लोड हो रहा है स्थिति सत्य है, क्वेरी प्रगति पर है, और अनुरोधित डेटा अनुपलब्ध है।

त्रुटि है राज्य भी एक बूलियन मान है जो दर्शाता है कि डेटा पुनर्प्राप्ति के दौरान कोई त्रुटि हुई है या नहीं। कब त्रुटि है सत्य है, क्वेरी डेटा पुनर्प्राप्त करने में विफल रही है।

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

ध्यान दें कि आप एक्सेस कर सकते हैं queryKey का उपयोग queryFn. queryFn एक तर्क लेता है। यह तर्क एक वस्तु है जिसमें एपीआई अनुरोध के लिए आवश्यक पैरामीटर हैं। इनमें से एक पैरामीटर है queryKey.

उदाहरण के लिए:

यूज़क्वेरी({
 क्वेरीकी: ['पद'],
 क्वेरीFn: async (ओबीजे) => {
सांत्वना देनालॉग (obj.queryKey);
 }
 })

बासी डेटा से निपटना

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

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

अंतराल विकल्प एक संपत्ति है जो रिएक्ट क्वेरी लाइब्रेरी के प्रत्येक स्वचालित फ़ेच अनुरोध के बीच मिलीसेकंड की संख्या निर्दिष्ट करती है।

उदाहरण के लिए:

यूज़क्वेरी({
 क्वेरीकी: ['...'],
 क्वेरीFn: () => {...},
 बासी समय: 1000;
})

इस उदाहरण में, staletime 1000 मिलीसेकंड (1 सेकंड) है। प्राप्त किया गया डेटा 1 सेकंड के बाद पुराना हो जाएगा, और फिर रिएक्ट क्वेरी लाइब्रेरी एपीआई के लिए एक और अनुरोध करेगी।

यहाँ आप उपयोग करते हैं अंतराल प्रत्येक स्वचालित लाने के अनुरोध के बीच समय अंतराल को नियंत्रित करने का विकल्प:

यूज़क्वेरी({
 क्वेरीकी: ['...'],
 क्वेरीFn: () => {...},
 पुनः प्राप्त करें अंतराल: 6000;
})

अंतराल 6000 मिलीसेकंड (6 सेकंड) है। रिएक्ट क्वेरी स्वचालित रूप से 6 सेकंड के बाद कैश्ड डेटा को अपडेट करने के लिए एक नया फ़ेच अनुरोध ट्रिगर करेगी।

म्यूटेशन हुक के उपयोग को समझना

useMutation हुक रिएक्ट क्वेरी लाइब्रेरी में एक शक्तिशाली उपकरण है। यह अतुल्यकालिक संचालन करता है म्यूटेशन, जैसे सर्वर पर डेटा बनाना या अपडेट करना। का उपयोग useMutation हुक, आप म्यूटेशन की प्रतिक्रिया के आधार पर आसानी से अपने एप्लिकेशन स्टेट और यूजर इंटरफेस को अपडेट कर सकते हैं।

नीचे, हमने एक बनाया है एडपोस्ट घटक जो एक प्रस्तुत करता है इनपुट फ़ील्ड और सबमिट बटन के साथ फ़ॉर्म. यह प्रपत्र घटक राज्य को अद्यतन करने के लिए उपयोगम्यूटेशन हुक का उपयोग करेगा:

आयात प्रतिक्रिया से'प्रतिक्रिया'
समारोहएडपोस्ट() {
कॉन्स्ट[पोस्ट, सेटपोस्ट] = React.useState({
 शीर्षक: ""
 })
समारोहहैंडल चेंज(आयोजन) {
 सेटपोस्ट( (पिछलाराज्य) => ({
 ...पिछलाराज्य,
 [event.target.name]: event.target.value
 }) )
 }
वापस करना (



 टाइप ="मूलपाठ"
 प्लेसहोल्डर ='शीर्षक जोडें'
 नाम ='शीर्षक'
 ऑन चेंज = {हैंडल चेंज} 
 मूल्य = {पोस्ट शीर्षक}
 />
पोस्ट जोड़ें </button>
 </form>
 )
}
निर्यातगलती करना एडपोस्ट;

के अंदर एडपोस्ट घटक एक अवस्था है डाक जो एक संपत्ति के साथ एक वस्तु के रूप में कार्य करता है, शीर्षक.

हैंडल चेंज समारोह राज्य अद्यतन करता है डाक जब भी उपयोगकर्ता इनपुट फ़ील्ड में टाइप करते हैं। बनाने के बाद एडपोस्ट घटक, हम आयात करते हैं useMutation हुक करें और एपीआई को अपडेट करने के लिए इसका इस्तेमाल करें।

उदाहरण के लिए:

आयात {उपयोगम्यूटेशन} से'@tanstack/react-query'
आयात axios से'अक्षीय';
कॉन्स्ट newPostMutation = useMutation({
 उत्परिवर्तन एफएन: async () => {
कॉन्स्ट प्रतिक्रिया = इंतजार axios.post ('', {
 शीर्षक: पोस्ट शीर्षक,
 });
कॉन्स्ट डेटा = प्रतिक्रिया। डेटा;
वापस करना आंकड़े;
 }
 })

useMutation हुक एक नई पोस्ट बनाने के लिए HTTP रिक्वेस्ट को हैंडल करता है। newPostMutation निरंतर म्यूटेशन फ़ंक्शन और इसके कॉन्फ़िगरेशन विकल्पों का प्रतिनिधित्व करता है।

उत्परिवर्तनFn एक एसिंक्रोनस फ़ंक्शन है जो एपीआई एंडपॉइंट को POST अनुरोध भेजता है। अनुरोध में एक वस्तु शामिल है जिसमें शामिल है शीर्षक से मूल्य डाक वस्तु।

चलाने के लिए उत्परिवर्तनFn, आपको कॉल करना होगा newPostMutation.mutate () तरीका:

कॉन्स्ट हैंडल सबमिट करें = async (घटना) => { 
 घटना.रोकथाम ();
 newPostMutation.mutate ();
}
वापस करना (


 टाइप ="मूलपाठ"
 प्लेसहोल्डर ='शीर्षक जोडें'
 नाम ='शीर्षक'
 ऑन चेंज = {हैंडल चेंज} 
 मूल्य = {पोस्ट शीर्षक}
 />
पोस्ट जोड़ें </button>
 </form>
 )
}

फार्म जमा करने चलेंगे हैंडल सबमिट करें समारोह। हैंडल सबमिट करें फ़ंक्शन एक अतुल्यकालिक फ़ंक्शन है जो म्यूटेशन फ़ंक्शन को ट्रिगर करता है newPostMutation.mutate ().

टैनस्टैक क्वेरी के साथ कुशल डेटा प्राप्त करना

यह लेख tanstack/react-query लाइब्रेरी का उपयोग करके रिएक्ट एप्लिकेशन में डेटा लाने के तरीके की पड़ताल करता है।

tanstack/react-query लाइब्रेरी रिएक्ट एप्लिकेशन में डेटा लाने और कैशिंग करने के लिए एक शक्तिशाली और लचीला उपकरण प्रदान करती है। इसका उपयोग करना आसान है, और इसकी कैशिंग क्षमताएं इसे कुशल और उत्तरदायी बनाती हैं।

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