Kodėl naudoti serverio būsenos biblioteką, pavyzdžiui React Query?

Question

IT Interview Practice · Accepted Answer

**Server-state libraries** (React Query/TanStack Query, SWR, RTK Query) specializuotos **iš serverio gauto duomenų** valdymui — jie traktuojami kaip talpykla, kuri likusi sinchronizuota su nuotolinį šaltinį. Jos automatiškai nustato talpyklą, įkėlimo/klaidos būsenas, pakartotinį paėmimą ir deduplikaciją — pakeisdamos didelį kiekį rankiniu būdu rašyto kodo. ## Kodėl tai svarbu Serverio duomenys *priklauso serveriui* ir yra tik talpykloje kliente, todėl gali tapti **pasenusiais**. Jų rankinė tvarkyba reiškia pakartotinį talpyklos, įkėlimo/klaidos sekimo, pakartotinio paėmimo, pakartotinų bandymų ir deduplikacijos įdiegimą kiekvienam galiniam taškui — nes tai klaidi ir kartotina. ## Ką React Query suteikia viename hook'e ```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 ; } ``` Šis vienas hook'as teikia: ```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 ``` ## Mutacijos + talpyklos negatavimas ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` Baigus mutaciją, jūs negatavate tinkamą užklausą ir talpykla perimama — UI išlaiko sinchronizaciją su serveriu. ## Sumažėja jūsų "global state" poreikis ```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. ``` Serverio būsenos bibliotekos sprendžia problemą, kurią bendri būsenos įrankiai (Redux, useState) valdo prastai: kliento talpyklos sinchronizavimas su nuotoliniais duomenimis. Jos pakeičia šimtus rinkinio į talpyklą/įkėlimo logikos eilučių deklaratyviais hook'ais ir teikia išrafinuotą elgesį (dedup, foninį perimą, stale-while-revalidate), kurį sunku tinkamai sukūrti rankiniu būdu. Pripažinti, kad serverio būsena nusipelno savos dedikuotos priemonės — ir kad jos priėmimas dažnai drastiškai supaprastina pasaulinę būseną — yra viena labiausiai reikšminga šiuolaikinės frontend architektūros intuicija.

Kodėl tai svarbu

Ką React Query suteikia viename hook'e

Mutacijos + talpyklos negatavimas

Sumažėja jūsų "global state" poreikis

Susiję klausimai