Cén fáth a úsáid leabharlann stáit fhreastalaí ar nós React Query?

Question

Accepted Answer

**Leabharlanna stáit fhreastalaí** (React Query/TanStack Query, SWR, RTK Query) a bhíonn speisialaithe i bhfheidhmiú **sonraí arna bhfáil ó fhreastalaí** — agus iad á chur i ngunaidh cache a choinneáil i gcomhshínte leis an bhfoinse iargúlta. Bíonn siad ag feidhmiú ar an tasc an cacheing, na stáit ualaigh/earráide, an t-athfháil agus an dí-dhúbláil ar bhealach uathoibríoch, agus cuirtear an oiread sin línte de chód lámhdhéanta in ionad a bheith ann. ## Cén fáth a bhíonn sé tábhachtach Níl sonraí fhreastalaí *mar a bheadh stáit UI ann* Baineann sonraí fhreastalaí *leis an fhreastalaí* agus níl ann ach a bheith i ngunaidh cache ar an gcliant, ionas gur féidir leo bheith **sean**. A bhainistiú de láimh a chiallaíonn athdhéanamh ar an cacheing, rianú ualaigh/earráide, athfháil, iarrachta agus dí-dhúbláil do gach endpoint — a bheith ina fhoinse earráide agus athfhillteach. ## Cad a thugann React Query duit in aon hook amháin ```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 ; } ``` Soláthraíonn an hook amháin seo: ```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 + neamhbhailíochtú cache ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` A dhéanamh i ndiaidh mutation, bhaineann tú an query ábhartha as dáta agus athfháiltítear an cache — an UI a choinneáil i gcomhshínte leis an fhreastalaí. ## Laghdaíonn sé do riachtanais "stáit dhomhanda" ```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. ``` ## Cén fáth a bhíonn sé tábhachtach Réiteann leabharlanna stáit fhreastalaí fadhb a bhíonn ann agus na huirlisí stáit ghinearálta (Redux, useState) ag déanamh prainn ar dhóigh dona: cache cliant a choinneáil i gcomhshínte le sonraí iargúlta. Cuirtear na céadta líne de loighic lámhdhéanta de fhála/cacheing/ualaigh in ionad hooks deimneacha, agus soláthraítear iompar sofaisticiúil (dedup, athfháil chúlra, stale-while-revalidate) atá deacair a thógáil i gceart de láimh. A thuiscint go bhfuil stáit fhreastalaí ag teastáil ó thúl fhéin — agus go laghdaíonn glacadh ar leabharlann dá leithéid go tapa stáit dhomhanda — ina cheann de na léargais is thábhachtaí ar an ailtireacht fhrontend nua-aimseartha.