React Query का परिचय
In this page:
const queryClient = new QueryClient();
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
const { data, isLoading, error } = useQuery({
queryKey: ["key", id],
queryFn: fetchFunction,
});Manual fetch + useState के बजाय React Query क्यों
useState और useEffect से manually data fetch करने का मतलब है हर बार अपनी loading/error/caching logic लिखना। React Query यह सब automatically handle करता है — results cache करना, duplicate requests avoid करना, और data stale होने पर refetch करना — एक simple hook के पीछे।
उदाहरण: Why React Query Instead of Manual fetch + useState
// Run in your local React project (npm install required)
import { useQuery } from '@tanstack/react-query';
function UserList() {
const { data, isLoading, error } = useQuery({
queryKey: ['users'],
queryFn: () => fetch('/api/users').then(res => res.json()),
});
if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error loading users</p>;
return <ul>{data.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
QueryClientProvider Set Up करना
React Query को एक QueryClient instance चाहिए जो एक बार बनाया जाए और QueryClientProvider के through पूरे app को दिया जाए, Redux के Provider जैसा। यह client shared cache manage करता है जो app में हर useQuery call इससे पढ़ता और लिखता है।
उदाहरण: Setting Up the QueryClientProvider
// Run in your local React project (npm install required)
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
function App() {
return (
<QueryClientProvider client={queryClient}>
<UserList />
</QueryClientProvider>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Query Keys को समझना
एक query key (एक array, जैसे [users] या [user, userId]) cached data के एक piece को uniquely identify करती है। React Query इसे decide करने के लिए उपयोग करता है कि data मांगने वाले दो components SAME चीज़ मांग रहे हैं (एक cache entry share करते हुए) या अलग चीज़ें (separate entries)।
उदाहरण: Understanding Query Keys
// Run in your local React project (npm install required)
import { useQuery } from '@tanstack/react-query';
function UserDetail({ userId }) {
const { data } = useQuery({
queryKey: ['user', userId],
queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
});
return <p>{data?.name}</p>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Loading/error/data state को manually React Query के साथ manage करना जब library already useQuery के return value के through यह सब provide करती है।
- दो unrelated queries को exact same query key देना, जो उन्हें incorrectly cached data share करने का कारण बनता है।
- App को एक QueryClientProvider में wrap करना भूल जाना, जो useQuery को चाहिए।
- React Query (अब TanStack Query) server-state manage करता है: remote data fetch, cache, और synchronize करना।
- useQuery(key, fetchFn) बिना manual state management के automatically data, isLoading, और error return करता है।
- एक unique query key हर cached query को identify करती है, automatic caching और refetching enable करते हुए।
- useQuery को tree में कहीं भी काम करने के लिए app को एक QueryClientProvider में wrap होना चाहिए।
npm install @tanstack/react-query चाहिए — इस sandbox में CDN से उपलब्ध नहीं है; React 16.8+ के साथ काम करता है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: