React Query જેવી સર્વર-સ્ટેટ લાઇબ્રેરી શા માટે વાપરવી?

Question

Accepted Answer

**સર્વર-સ્ટેટ લાઇબ્રેરીઝ** (React Query/TanStack Query, SWR, RTK Query) **સર્વર તરફથી મેળવવામાં આવેલ ડેટા** વ્યવસ્થાપિત કરવામાં વિશેષજ્ઞ હોય છે — તેને દુર્ગમ સ્ત્રોત સાથે સિંક રાખવા માટે કેશ તરીકે ગણવા માટે. તેઓ કેશિંગ, લોડિંગ/ભૂલ સ્થિતિ, રિફેચિંગ અને ડુપ્લિકેશન સ્વચાલિતપણે નિયંત્રણ કરે છે, જે મોટી પ્રમાણમાં માનવીય કોડને બદલે છે. ## તે શા માટે મહત્વપૂર્ણ છે સર્વર ડેટા UI સ્ટેટ જેવું નથી સર્વર ડેટા *સર્વર દ્વારા માલિકીનો છે* અને માત્ર ક્લાયન્ટ પર કેશ થાય છે, તેથી તે **પુરાણી** થઈ શકે છે. તેને હાથથી વ્યવસ્થાપિત કરવાનો અર્થ કેશિંગ, લોડિંગ/ભૂલ ટ્રેકિંગ, રિફેચિંગ, પુનઃપ્રયાસ અને ડુપ્લિકેશન દરેક એન્ડપોઇન્ટ માટે પુનરાવર્તન કરવું — ભૂલ-પ્રવણ અને પુનરાવર્તિત. ## 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 + કેશ અમાન્યતા ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` મ્યુટેશનનો અર્થ પછી, તમે સંબંધિત ક્વેરીને અમાન્ય કરો છો અને કેશ રિફેચ કરે છે — UI ને સર્વર સાથે સુસંગત રાખતા હુ. ## તે તમારી "વૈશ્વિક સ્થિતિ" જરૂરિયાતો ઘટાવે છે ```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. ``` ## તે શા માટે મહત્વપૂર્ણ છે સર્વર-સ્ટેટ લાઇબ્રેરીઝ એક સમસ્યાનો સમાધાન કરે છે જે સામાન્ય સ્ટેટ સાધનો (Redux, useState) ખરાબી તરીકે સંચાલિત કરે છે: ક્લાયન્ટ કેશને દુર્ગમ ડેટા સાથે સિંક રાખવું. તેઓ શત્તર લાઇનના હસ્તમુક ફેચિંગ/કેશિંગ/લોડિંગ લોજિકને ઘોષણાત્મક હુક વડે બદલે છે, અને બુદ્ધિશીલ વર્તન (dedup, પૃષ્ઠભૂમિ રીફેચ, stale-while-revalidate) પ્રદાન કરે છે જે હાથથી યોગ્ય રીતે બનાવવું મુશ્કેલ હોય છે. સમજવું કે સર્વર સ્ટેટ તેનું પોતાનું ઉત્સર્જિત સાધન માંગે છે — અને એક જેવી લાઇબ્રેરી અપનાવવું ઘણીવાર નાટકીય રીતે વૈશ્વિક સ્થિતિને સરળ કરે છે — આધુનિક ફ્રન્ટએન્ડ આર્કિટેક્ચર ઇનસાઇટ્સમાંનું એક સૌથી પ્રભાવશાળી છે.