Warum ein Server-State-Library wie React Query verwenden?

Question

Accepted Answer

**Server-State-Libraries** (React Query/TanStack Query, SWR, RTK Query) spezialisieren sich auf die Verwaltung von **Daten, die vom Server abgerufen werden** — sie werden als Cache behandelt, um mit der Remote-Quelle synchron zu bleiben. Sie handhaben Caching, Loading/Error-States, Refetching und Deduplication automatisch und ersetzen eine riesige Menge an manuellem Code. ## Warum es wichtig ist Server-Daten werden *vom Server bereitgestellt* und sind lediglich auf dem Client gecacht, deshalb können sie **veralten**. Manuelle Verwaltung bedeutet, Caching, Loading/Error-Tracking, Refetching, Retries und Deduplication für jeden Endpoint neu zu implementieren — fehleranfällig und repetitiv. ## Was React Query in einem Hook bietet ```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 ; } ``` Dieser einzelne Hook bietet: ```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 + Cache-Invalidierung ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` Nach einer Mutation invalidieren Sie die relevante Query und der Cache wird neu abgerufen — die UI bleibt mit dem Server konsistent. ## Es reduziert den Bedarf an "globalem State" ```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. ``` ## Warum es wichtig ist Server-State-Libraries lösen ein Problem, das generische State-Tools (Redux, useState) schlecht handhaben: einen Client-Cache mit Remote-Daten synchron zu halten. Sie ersetzen hunderte Zeilen manualen Fetching/Caching/Loading-Code durch deklarative Hooks und bieten ausgefeiltes Verhalten (Dedup, Background-Refetch, Stale-While-Revalidate), das manuell nur schwer korrekt zu implementieren ist. Zu erkennen, dass Server-State sein eigenes dediziertes Tool verdient — und dass die Einführung eines solchen Tools oft globalen State dramatisch vereinfacht — ist einer der einflussreichsten Erkenntnisse moderner Frontend-Architektur.