Proč používat knihovnu pro správu serverového stavu jako React Query?

Question

Accepted Answer

**Knihovny pro správu serverového stavu** (React Query/TanStack Query, SWR, RTK Query) se specializují na správu **dat načítaných ze serveru** — zachází s nimi jako s cache, která se automaticky synchronizuje se vzdáleným zdrojem. Automaticky řeší cachování, stavy načítání/chyb, opakované fetching a děduplikaci, čímž nahrazují obrovské množství ručně psaného kódu. ## Problém: serverová data nejsou jako stav UI Serverová data *vlastní server* a na klientu jsou pouze uložena v cache, takže mohou být **zastaralá**. Ruční správa znamená reimplementaci cachování, sledování stavu načítání/chyb, opakovaného fetchingu, pokusů o opakování a déduplikace pro každý endpoint — chybovzdorná a opakující se práce. ## Co vám React Query dává v jednom hooku ```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 ; } ``` Ten jeden hook poskytuje: ```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 ``` ## Mutace + invalidace cache ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` Po mutaci invalideete příslušný dotaz a cache se automaticky znovu načte — UI zůstane v souladu se serverem. ## Redukuje váš obsah "globálního stavu" ```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. ``` ## Proč je to důležité Knihiovny pro správu serverového stavu řeší problém, který generické stavové nástroje (Redux, useState) zvládají špatně: udržování klientské cache v souladu se vzdálenými daty. Nahrazují stovky řádků ručního kódu na fetching/cachování/sledování načítání deklarativními hooku a poskytují sofistikované chování (deduplikace, background refetch, stale-while-revalidate), které je obtížné správně implementovat ručně. Rozeznání faktu, že serverový stav si zaslouží svůj dedikovaný nástroj — a že jeho přijetí často dramaticky zjednodušuje globální stav — je jedním z nejvlivnějších poznatků moderní architekturou frontend aplikací.