Zakaj uporabiti knjižnico za stanje strežnika, kot je React Query?

Question

Accepted Answer

**Knjižnice za stanje strežnika** (React Query/TanStack Query, SWR, RTK Query) so specializirane za upravljanje **podatkov, pridobljenih s strežnika** — obravnavajo jih kot predpomnilnik, ki je sinhroniziran z oddaljenim izvorom. Samodejno upravljajo predpomnilnik, stanja nalaganja/napak, ponovno pridobivanje in deduplikacijo, kar nadomešča ogromno količine ročne kode. ## Problem: podatki strežnika niso kot stanje vmesnika Podatki strežnika so *v lasti strežnika* in so le predpomnjeni na odjemalcu, zato lahko postanejo **zastareli**. Ročno upravljanje pomeni ponovno izvajanje predpomnilnika, sledenja nalaganju/napakam, ponovnega pridobivanja, poskusov in deduplikacije za vsak končni točko — napako in ponavljajoče se. ## Kaj vam React Query ponuja v enem hvatu ```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 ; } ``` Ta en hvat omogoča: ```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 ``` ## Mutacije + neveljava predpomnilnika ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` Po mutaciji razveljavite ustrezno poizvedbo in predpomnilnik ponovno pridobi — kar ohranja konsistentnost vmesnika s strežnikom. ## Zmanjšuje vaše potrebe po "globalnem stanju" ```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. ``` ## Zakaj je to pomembno Knjižnice za stanje strežnika rešujejo problem, ki ga splošna orodja za stanje (Redux, useState) slabo upravljajo: ohranjanje predpomnilnika odjemalca v sinhronizaciji s podatki na daljavo. Zamenjajo stotine vrstic ročne kode za pridobivanje/predpomnenje/nalaganje z deklarativnimi hvati in zagotavljajo sofisticirano vedenje (deduplikacija, osveževanje v ozadju, stale-while-revalidate), ki je težko zgraditi pravilno z roko. Ugotovitev, da stanje strežnika zasluži lastno namenjeno orodje — in da sprejetje enega pogosto drastično poenostavi globalno stanje — je ena izmed najbolj vplivnih sodobnih spoznanj o arhitekturi sprednjega konca.