QueryClient, QueryClientProvider और useQuery
QueryClient के साथ TanStack Query सेट अप करें, ऐप को QueryClientProvider में लपेटें और useQuery से डेटा प्राप्त करें—इससे मैन्युअल useEffect-आधारित डेटा प्राप्ति की जगह लें।
QueryClient, QueryClientProvider और useQuery, CoddyKit पर React Native Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह React Native Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
TanStack React Query क्या है
TanStack React Query (जिसे पहले React Query कहा जाता था) एक डेटा-प्राप्ति और कैशिंग लाइब्रेरी है, जो आपके React Native ऐप में सर्वर स्थिति का प्रबंधन करती है। useState और useEffect की मदद से लोड होने, त्रुटि और डेटा की स्थिति को मैन्युअल रूप से प्रबंधित करने के बजाय, React Query सरल हुक API के साथ स्मार्ट कैशिंग, बैकग्राउंड में दोबारा डेटा प्राप्त करना और स्वचालित पुनःप्रयास उपलब्ध कराता है।
सर्वर स्थिति UI स्थिति से मूल रूप से अलग होती है: यह दूरस्थ सर्वर पर रहती है, पुरानी हो सकती है, इसे दोबारा प्राप्त करने की आवश्यकता पड़ सकती है और कई घटकों को एक ही डेटा की ज़रूरत हो सकती है। React Query इन सभी समस्याओं को विश्वसनीय और वास्तविक उपयोग में परखी गई प्रणाली से हल करता है।
// Traditional approach (before React Query):
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
// With React Query:
const { data, isLoading, error } = useQuery({
queryKey: ['posts'],
queryFn: fetchPosts,
});
// Same result — dramatically less codeTanStack Query इंस्टॉल करना
TanStack Query (v5) और React Native के लिए विशेष स्थायित्व प्लगइन इंस्टॉल करें। मुख्य पैकेज @tanstack/react-query है। Expo प्रोजेक्ट के लिए आप devtools भी उपयोग कर सकते हैं, हालाँकि उन्हें देखने के लिए वेब वातावरण आवश्यक होता है।
React Query v5 हुक विकल्पों के लिए ऑब्जेक्ट सिंटैक्स का उपयोग करता है (v4 से यह एक महत्त्वपूर्ण बदलाव है)। यदि आपको useQuery के लिए स्थितीय आर्ग्युमेंट वाला ट्यूटोरियल दिखाई दे, तो वह v4 का उपयोग कर रहा है। इस पाठ में आधुनिक v5 API शामिल है।
// Install:
// npx expo install @tanstack/react-query
// npx expo install @tanstack/react-query-persist-client
// npx expo install @tanstack/async-storage-persister
// npx expo install @react-native-async-storage/async-storage
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';QueryClient सेट अप करना
QueryClient वह मुख्य ऑब्जेक्ट है जो सभी कैश, क्वेरी और म्यूटेशन का प्रबंधन करता है। इसका एक इंस्टेंस बनाएँ और पूरे ऐप में साझा करें। QueryClient कंस्ट्रक्टर में वैश्विक डिफ़ॉल्ट कॉन्फ़िगर करें—व्यक्तिगत क्वेरी स्तर पर बदलने तक ये सभी क्वेरी पर लागू होते हैं।
QueryClient को अपने घटक ट्री के बाहर बनाएँ (या useState इनिशियलाइज़र में), ताकि हर रेंडर पर यह दोबारा न बने। दोबारा बनाया गया QueryClient कैश किया हुआ सारा डेटा खो देता है।
import { QueryClient } from '@tanstack/react-query';
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 5 * 60 * 1000, // 5 minutes before considered stale
gcTime: 10 * 60 * 1000, // 10 minutes before garbage collected
retry: 2, // retry failed requests twice
refetchOnWindowFocus: false, // disable for mobile
},
},
});QueryClientProvider: क्लाइंट उपलब्ध कराना
अपने ऐप के रूट को QueryClientProvider में लपेटें और QueryClient इंस्टेंस को client प्रॉप के रूप में दें। इसके बाद प्रोवाइडर के अंदर मौजूद हर घटक QueryClient तक पहुँच सकता है और React Query हुक का उपयोग कर सकता है। यह React Redux के Provider या React Navigation के NavigationContainer के समान है।
QueryClientProvider को अपने ऐप के रूट पर रखें और उसमें नेविगेशन तथा अन्य प्रोवाइडर को लपेटें। अन्य प्रोवाइडर (जैसे Redux Provider या AuthProvider) के साथ इसका क्रम आमतौर पर महत्त्वपूर्ण नहीं होता, जब तक वे एक-दूसरे पर निर्भर न हों।
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient({
defaultOptions: { queries: { staleTime: 5 * 60 * 1000 } },
});
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<NavigationContainer>
<RootNavigator />
</NavigationContainer>
</QueryClientProvider>
);
}useQuery: डेटा प्राप्त करना
useQuery सर्वर डेटा प्राप्त करने और कैश करने के लिए मुख्य हुक है। इसमें दो आवश्यक फ़ील्ड वाला कॉन्फ़िग ऑब्जेक्ट लिया जाता है: queryKey (इस डेटा का विशिष्ट पहचानकर्ता) और queryFn (डेटा प्राप्त करने वाला async फ़ंक्शन)। React Query अपने-आप queryFn को कॉल करता है और परिणाम को कैश करता है।
यह हुक data, isLoading, isFetching, error और कई अन्य स्थिति मान लौटाता है। पहली बार लोड होने पर isLoading true होता है; डेटा प्राप्त होने की प्रक्रिया चल रही हो तो isFetching true होता है, जिसमें बैकग्राउंड में दोबारा डेटा प्राप्त करना भी शामिल है।
import { useQuery } from '@tanstack/react-query';
async function fetchPosts() {
const response = await fetch('https://api.example.com/posts');
if (!response.ok) throw new Error('Network error');
return response.json();
}
function PostsScreen() {
const { data, isLoading, error } = useQuery({
queryKey: ['posts'],
queryFn: fetchPosts,
});
if (isLoading) return <ActivityIndicator />;
if (error) return <Text>Error: {error.message}</Text>;
return <FlatList data={data} renderItem={...} />;
}Query Keys: कैश की पहचान
queryKey वह तरीका है जिससे React Query कैश किए गए डेटा की पहचान करता है और उसका दोबारा उपयोग करता है। ऐसी array का उपयोग करें जिसमें डेटा प्रकार और डेटा प्राप्त करने के लिए आवश्यक सभी variables शामिल हों। समान key वाली क्वेरी कैश किया हुआ डेटा साझा करती हैं—['posts'] का उपयोग करने वाले कई घटक केवल एक बार डेटा प्राप्त करते हैं और वही डेटा ऑब्जेक्ट साझा करते हैं।
key array में गतिशील parameters शामिल करें, ताकि अलग-अलग parameter संयोजनों के लिए अलग कैश प्रविष्टियाँ मिलें। उदाहरण के लिए, ['user', userId] हर उपयोगकर्ता का डेटा अलग-अलग कैश करता है। keys की तुलना reference से नहीं, बल्कि मान (गहरी समानता) से की जाती है।
// Static key:
const { data: posts } = useQuery({
queryKey: ['posts'],
queryFn: fetchAllPosts,
});
// Dynamic key — separate cache per user:
const { data: user } = useQuery({
queryKey: ['user', userId],
queryFn: () => fetchUser(userId),
});
// Compound key with filters:
const { data: filteredPosts } = useQuery({
queryKey: ['posts', { status: 'published', category: 'tech' }],
queryFn: () => fetchPosts({ status: 'published', category: 'tech' }),
});staleTime और cacheTime
staleTime यह तय करता है कि React Query द्वारा बैकग्राउंड में नया डेटा प्राप्त करने से पहले कैश किया गया डेटा कितने समय तक नया माना जाएगा। इस अवधि में बिना किसी नेटवर्क अनुरोध के कैश किया हुआ मान तुरंत लौटाया जाता है। staleTime के बाद डेटा पुराना माना जाता है और अगले माउंट या फ़ोकस पर बैकग्राउंड में दोबारा डेटा प्राप्त किया जाता है।
gcTime (जिसे पहले cacheTime कहा जाता था) यह तय करता है कि उपयोग में न आने वाली (जिनके कोई पर्यवेक्षक नहीं हैं) कैश प्रविष्टियाँ कचरा-संग्रहित होने से पहले कितने समय तक मेमोरी में रखी जाएँगी। इसका उपयोग करने वाले सभी घटकों के अनमाउंट होने के बाद भी कैश मौजूद रहता है, जब तक gcTime समाप्त नहीं हो जाता।
const { data } = useQuery({
queryKey: ['settings'],
queryFn: fetchUserSettings,
staleTime: 10 * 60 * 1000, // fresh for 10 min, no background refetch
gcTime: 30 * 60 * 1000, // kept in cache for 30 min after unmount
});
// Infinity means never stale (manual invalidation only):
const { data: config } = useQuery({
queryKey: ['app-config'],
queryFn: fetchAppConfig,
staleTime: Infinity,
});निर्भर क्वेरी
कुछ क्वेरी दूसरी क्वेरी से प्राप्त डेटा पर निर्भर होती हैं। किसी क्वेरी की निर्भरता तैयार होने तक उसे रोकने के लिए enabled विकल्प का उपयोग करें। enabled के false होने पर React Query queryFn को कॉल नहीं करेगा और enabled के true होते ही अपने-आप डेटा प्राप्त करना शुरू कर देगा।
यह उन नेस्टेड useEffect शृंखलाओं का बेहतर विकल्प है जिनमें एक डेटा-प्राप्ति प्रक्रिया पूरी होने तक दूसरी शुरू नहीं की जाती। निर्भर क्वेरी पैटर्न घोषणात्मक होता है और इसे समझना आसान होता है।
// Fetch user first:
const { data: user } = useQuery({
queryKey: ['user', userId],
queryFn: () => fetchUser(userId),
});
// Then fetch user's posts when user is available:
const { data: userPosts } = useQuery({
queryKey: ['posts', user?.id],
queryFn: () => fetchUserPosts(user.id),
enabled: !!user, // only runs after user is fetched
});पुनःप्रयास व्यवहार और त्रुटि प्रबंधन
React Query विफल क्वेरी को घातीय बैकऑफ़ के साथ स्वचालित रूप से दोबारा चलाता है। डिफ़ॉल्ट रूप से 3 बार पुनःप्रयास किए जाते हैं। प्रत्येक क्वेरी के लिए retry (संख्या) और retryDelay (मिलीसेकंड या फ़ंक्शन) कॉन्फ़िगर करें। सभी पुनःप्रयास विफल होने के बाद error फ़ील्ड में मान आ जाता है और isError true हो जाता है।
विफलता का संकेत देने के लिए queryFn को त्रुटि उत्पन्न करनी चाहिए — null या किसी विशेष त्रुटि ऑब्जेक्ट को लौटाने से पुनःप्रयास शुरू नहीं होगा। जब प्रतिक्रिया त्रुटि दर्शाए, तो क्वेरी फ़ंक्शन में हमेशा त्रुटि उत्पन्न करें (HTTP स्थिति कोड स्पष्ट रूप से जाँचें)।
const { data, isError, error } = useQuery({
queryKey: ['data'],
queryFn: async () => {
const res = await fetch('https://api.example.com/data');
if (!res.ok) {
throw new Error('Request failed: ' + res.status); // must throw!
}
return res.json();
},
retry: 3,
retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30000),
});क्वेरी को मैन्युअल रूप से अमान्य करना
जब आपको पता हो कि सर्वर पर डेटा बदल गया है (उदाहरण के लिए, किसी म्यूटेशन के बाद), तो queryClient.invalidateQueries({ queryKey: ['posts'] }) का उपयोग करके संबंधित क्वेरी को अमान्य करें। इससे कैश किया गया डेटा पुराना चिह्नित हो जाता है और वर्तमान में उस क्वेरी को देख रहे किसी भी कंपोनेंट के लिए पृष्ठभूमि में डेटा फिर से प्राप्त होता है।
क्वेरी को अमान्य करना React Query के सबसे शक्तिशाली पैटर्न में से एक है — नई टिप्पणी पोस्ट करने के बाद टिप्पणियों की क्वेरी को अमान्य करें और सूची अपने-आप ताज़ा हो जाती है। स्थिति को मैन्युअल रूप से अपडेट करने की आवश्यकता नहीं होती।
import { useQueryClient } from '@tanstack/react-query';
function PostButton() {
const queryClient = useQueryClient();
async function handlePost() {
await submitPost(newPostData);
// Invalidate posts list — triggers background refetch:
await queryClient.invalidateQueries({ queryKey: ['posts'] });
}
}ऐप पर फ़ोकस होने पर पृष्ठभूमि में डेटा पुनः प्राप्त करना
जब उपयोगकर्ता ऐप को पृष्ठभूमि से फिर खोलता है, तब React Query पुराने डेटा को स्वचालित रूप से फिर से प्राप्त कर सकता है। वेब पर इसके लिए window focus का उपयोग होता है; React Native में इसे focusManager और AppState का उपयोग करके कॉन्फ़िगर करना आवश्यक है। इससे उपयोगकर्ता को मैन्युअल रूप से रीफ़्रेश किए बिना डेटा अपने-आप नया बना रहता है।
ऐप शुरू होते समय फ़ोकस मैनेजर को एक बार सेट अप करें। सेटअप के बाद, उपयोगकर्ता के ऐप पर वापस आने पर कोई भी पुरानी क्वेरी अपने-आप फिर से डेटा प्राप्त करेगी। इससे अलग-अलग कंपोनेंट में अतिरिक्त कोड लिखे बिना यूआई वर्तमान बना रहता है।
import { focusManager } from '@tanstack/react-query';
import { AppState } from 'react-native';
// At app startup (App.js or index.js):
AppState.addEventListener('change', (state) => {
focusManager.setFocused(state === 'active');
});
// Queries with staleTime < Infinity will refetch
// automatically when app comes to foregroundत्वरित जाँच
इस पाठ में React Native Mobile Development की अवधारणाओं की अपनी समझ जाँचें।
पाठ का पुनरावलोकन
इस पाठ में आपने सीखा: QueryClient कैश को रखता है और QueryClientProvider के माध्यम से कंपोनेंट ट्री को उपलब्ध कराया जाता है, useQuery queryKey से पहचाने गए सर्वर डेटा को प्राप्त और कैश करता है तथा queryFn को स्वचालित रूप से कॉल करता है, और staleTime यह नियंत्रित करता है कि पृष्ठभूमि में डेटा फिर से प्राप्त किए जाने से पहले कैश किए गए डेटा को कितनी देर तक नया माना जाए। अब हम useMutation का उपयोग करके सर्वर डेटा में बदलाव करेंगे और संबंधित क्वेरी को स्वचालित रूप से ताज़ा करेंगे।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “QueryClient, QueryClientProvider और useQuery” पाठ निःशुल्क है?
हाँ — React Native Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “QueryClient, QueryClientProvider और useQuery” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। React Native Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“QueryClient, QueryClientProvider और useQuery” में मैं क्या सीखूँगा?
QueryClient के साथ TanStack Query सेट अप करें, ऐप को QueryClientProvider में लपेटें और useQuery से डेटा प्राप्त करें—इससे मैन्युअल useEffect-आधारित डेटा प्राप्ति की जगह लें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Native Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Native Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Native Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“QueryClient, QueryClientProvider और useQuery” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Native Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Native Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- QueryClient, QueryClientProvider और useQuery
- useMutation से Mutations और Cache Invalidation
- AsyncStorage के साथ Query Cache को स्थायी बनाना
- Background Refetch और Stale Time कॉन्फ़िगरेशन