React Query जस्तो server-state library किन प्रयोग गर्ने?

Question

Accepted Answer

**Server-state libraries** (React Query/TanStack Query, SWR, RTK Query) **सर्वरबाट fetch गरिएको डेटा** व्यवस्थापन गर्न विशेषज्ञ छन् — यसलाई रिमोट स्रोतसँग sync राख्न क्याशको रूपमा व्यवहार गर्दै। तिनीहरूले क्यासिङ, लोडिङ/error स्थितिहरू, refetching, र deduplication स्वचालित रूपमा सम्हाल्छन्, धेरै मानिसले लेखेको कोडको ठाउँ लिन्छन्। ## समस्या: server डेटा UI state जस्तो छैन Server डेटा *सर्वरको स्वामित्व* मा छ र केवल क्लायन्टमा क्याश गरिएको छ, त्यसैले यो **stale** हुन सक्छ। यसलाई मानिसले व्यवस्थापन गर्नु भनेको क्यासिङ, लोडिङ/error ट्र्याकिङ, refetching, retries, र deduplication हरेक endpoint को लागि पुनः लागू गर्नु हो — त्रुटि-प्रवण र दोहोरो। ## React Query एक हुक मा के दिन्छ ```jsx import { useQuery } from "@tanstack/react-query"; function Users() { const { data, isLoading, error, refetch } = useQuery({ queryKey: ["users"], // cache key queryFn: () => fetch("/api/users").then(r => r.json()), staleTime: 60_000, // consider fresh for 1 min }); if (isLoading) return ; if (error) return ; return ; } ``` त्यो एकल हुकले प्रदान गर्छ: ```text ✓ Caching — data cached by queryKey, shared across components ✓ Loading/error — isLoading/error states managed for you ✓ Deduplication — same query in 5 components = ONE network request ✓ Background refetch— refetch on window focus/reconnect to stay fresh ✓ Stale-while-revalidate — show cached data instantly, refetch in background ✓ Retries — auto-retry failed requests ✓ Pagination/infinite scroll, prefetching, cache invalidation ``` ## Mutations + cache invalidation ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` Mutation पछि, तपाई सम्बन्धित query invalidate गर्नुहुन्छ र क्याश refetch गर्छ — UI लाई सर्वरसँग सुसंगत राख्दै। ## यसले तपाईको "global state" आवश्यकता घटाउछ ```text Much of what people put in Redux is actually SERVER state. Moving it to React Query often shrinks global state to just true UI state (theme, modals, filters) — simplifying the whole app. ``` ## किन यो महत्वपूर्ण छ Server-state libraries एक समस्या समाधान गर्छन् जो generic state tools (Redux, useState) कमजोरीसँग हलचल गर्छन्: क्लायन्ट क्याशलाई रिमोट डेटासँग sync राख्न। तिनीहरू क्यासिङ/लोडिङ logic को सयौंं पंक्तिहरू declarative hooks सँग प्रतिस्थापन गर्छन्, र परिष्कृत आचरण (dedup, background refetch, stale-while-revalidate) प्रदान गर्छन् जो हात द्वारा सही तरिकामा निर्माण गर्न कठिन छ। यो बुझ्न कि server state आफ्नै समर्पित उपकरणको योग्य छ — र एक अपनाउनु प्राय: global state नाटकीय रूपमा सरल बनाउछ — सबैभन्दा प्रभावशाली आधुनिक frontend architecture अन्तर्दृष्टि मध्ये एक हो।