React Query ਜਿਵੇਂ server-state library ਨੂੰ ਕਿਉਂ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ?

Question

Accepted Answer

**Server-state libraries** (React Query/TanStack Query, SWR, RTK Query) **ਸਰਵਰ ਤੋਂ ਲਿਆਗਿਆ ਡਾਟਾ** ਪ੍ਰਬੰਧਿਤ ਕਰਨ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ ਹਨ — ਇਸ ਨੂੰ ਰਿਮੋਟ ਸਰੋਤ ਦੇ ਨਾਲ ਸਮੀਚੀਨ ਰੱਖਣ ਲਈ ਕੈਸ਼ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ caching, loading/error states, refetching ਅਤੇ deduplication ਨੂੰ ਆਪਣੇ ਆਪ ਹੈਂਡਲ ਕਰਦੇ ਹਨ, ਬਹੁਤ ਸਾਰੇ manual code ਦੀ ਥਾਂ ਲੈਂਦੇ ਹਨ। ## ਸਮੱਸਿਆ: server ਡਾਟਾ UI state ਦੀ ਤਰ੍ਹਾਂ ਨਹੀਂ ਹੈ Server ਡਾਟਾ *ਸਰਵਰ ਦੀ ਮਲਕਿਤ* ਹੈ ਅਤੇ ਸਿਰਫ ਕਲਾਇੰਟ ਉੱਤੇ cached ਹੈ, ਇਸ ਲਈ ਇਹ **stale** ਹੋ ਸਕਦਾ ਹੈ। ਇਸ ਨੂੰ ਹੱਥੋਂ ਪ੍ਰਬੰਧਿਤ ਕਰਨਾ ਮਤਲਬ ਹਰੇਕ endpoint ਲਈ caching, loading/error tracking, refetching, retries ਅਤੇ deduplication ਨੂੰ ਦੁਬਾਰਾ ਲਾਗੂ ਕਰਨਾ — ਗਲਤੀ ਵਾਲਾ ਅਤੇ ਦੁਹਰਾਉ। ## 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 ; } ``` ਉਹ ਸਿੰਗਲ 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 ਕਰਦੇ ਹੋ ਅਤੇ ਕੈਸ਼ refetch ਕਰਦਾ ਹੈ — UI ਨੂੰ ਸਰਵਰ ਦੇ ਨਾਲ consistent ਰੱਖਦੇ ਹੋ। ## ਇਹ ਤੁਹਾਡੀ "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) ਖਰਾਬੀ ਨਾਲ ਸੰਭਾਲਦੇ ਹਨ: ਕਲਾਇੰਟ cache ਨੂੰ remote data ਦੇ ਨਾਲ sync ਵਿੱਚ ਰੱਖਣਾ। ਇਹ ਸੈਂਕੜਿਆਂ ਲਾਈਨਾਂ manual fetching/caching/loading logic ਨੂੰ declarative hooks ਦੇ ਨਾਲ ਬਦਲਦੇ ਹਨ, ਅਤੇ sophisticated behavior (dedup, background refetch, stale-while-revalidate) ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ ਜੋ ਹੱਥੋਂ ਸਹੀ ਤਰ੍ਹਾਂ ਬਣਾਉਣਾ ਮੁਸ਼ਕਲ ਹੈ। ਸਮਝਣਾ ਕਿ server state ਆਪਣੇ dedicated tool ਦੇ ਕੁਆਲੀ ਹੈ — ਅਤੇ ਉਸ ਨੂੰ ਅਪਣਾਉਣਾ ਅਕਸਰ global state ਨੂੰ ਨাटਕੀ ਤਰ੍ਹਾਂ ਸਰਲ ਬਣਾਉਂਦਾ ਹੈ — ਸਭ ਤੋਂ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਆਧੁਨਿਕ frontend architecture insights ਵਿੱਚੋਂ ਇੱਕ ਹੈ।