Me ya kera da sanun aiki na server kamar React Query?

Question

Accepted Answer

**Abubuwan sanun aiki na server** (React Query/TanStack Query, SWR, RTK Query) suna kankare wajen sarrafa **bayanan da aka dawo daga server** — suna iska a matsayin cache don jiya a ajiya tare da asalin iska. Suna sarrafa cache, jihar lodin/kuskuri, sadarwa, da kasancewar-daidai ta atomatik, suna maye gurbin girma adadi na code da aka yi da hannu. ## Me yake bukatar Bayanan server ba kamar jihar UI ba ne Bayanan server *ana mallakin server* kuma kawai an saka shi cache a kan client, saboda haka zai iya zama **tsofua**. Sarrafa shi da hannu yana nufin saida cache, jirawa lodin/kuskuri, sadarwa, sake koka, da kasancewar-daidai domin kowane endpoint — waje da kuskuri kuma sake sake. ## Abin da React Query ya ba ka a hawu ɗaya ```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 ; } ``` Hawun gida ɗaya ta ba da: ```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 + batilancewar cache ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` Bayan mutation, kun batilance bubbuga da ya dace kuma cache ɗin sai ya sadar — jiya UI gida tare da server. ## Yana rage bukatarun "jihar duniya" ɗin ku ```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. ``` ## Me yake bukatar Abubuwan sanun aiki na server suna warware matsala da kayan hannu na jiha na gida (Redux, useState) suna sarrafa rashin kyau: jiya cache na client tare da bayanan shuni. Su suna maye gurbin daruruwan layin code na hannu na jiwan kuma suna ba da da hankali jirawa tare da hooks na gida, kuma suna ba da halayen da aka damje (dedup, sake koka na baje, stale-while-revalidate) wanda ya zama wahala a gina daidai a hannu. Sanin cewa bayanan server suna bukatawa abin sanun aiki na kansu — kuma amfani da ɗaya yakan haifar da sauƙaƙe jihar duniya — daya ne daga cikin bayanan gida masu tasiri a illela gida na gida na jiya.