React Query جیسی server-state library کو کیوں استعمال کریں؟

Question

Accepted Answer

**Server-state libraries** (React Query/TanStack Query, SWR, RTK Query) **سرور سے fetch کیے گئے ڈیٹا** کو منیج کرنے میں مہارت رکھتی ہیں — اسے ایک cache کے طور پر treat کرتے ہوئے دور کے source کے ساتھ sync رکھتے ہیں۔ وہ caching، loading/error states، refetching، اور deduplication کو خودکار طور پر سنبھالتے ہیں، بہت سارے manual code کی جگہ لیتے ہیں۔ ## مسئلہ: server ڈیٹا UI state جیسا نہیں ہے Server ڈیٹا *سرور کی ملکیت* ہے اور صرف client پر cached ہے، اس لیے یہ **stale** ہو سکتا ہے۔ اسے hand-manage کرنے کا مطلب ہے ہر endpoint کے لیے caching، loading/error tracking، refetching، retries، اور deduplication کو دوبارہ implement کرنا — غلطی سے بھرا ہوا اور دہرایا ہوا۔ ## React Query آپ کو ایک hook میں کیا دیتا ہے ```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 ; } ``` یہ single hook فراہم کرتا ہے: ```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 کرتے ہیں اور cache 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) ناقص طریقے سے سنبھالتے ہیں: ایک client cache کو دور کے ڈیٹا کے ساتھ sync میں رکھنا۔ وہ سیکڑوں lines کے manual fetching/caching/loading logic کو declarative hooks سے بدل دیتے ہیں، اور sophisticated behavior (dedup، background refetch، stale-while-revalidate) فراہم کرتے ہیں جو ہاتھ سے صحیح طریقے سے build کرنا مشکل ہے۔ یہ سمجھنا کہ server state اپنے dedicated tool کے قابل ہے — اور یہ کہ ایک کو adopt کرنا اکثر global state کو نمایاں طور پر سادہ کرتا ہے — جدید frontend architecture کے سب سے impactful insights میں سے ایک ہے۔