Miért érdemes kiszolgálói állapot-kezelő könyvtárat (React Query) használni?

Question

Accepted Answer

**A kiszolgálói állapot-kezelő könyvtárak** (React Query/TanStack Query, SWR, RTK Query) a **kiszolgálóról beolvasott adatok** kezelésére szakosodtak — gyorsítótárként kezelve azokat, hogy szinkronban tartsák a távoli forrással. Automatikusan kezelnek gyorsítótárazást, betöltési/hibastátuszokat, újbetöltést és deduplikációt, helyettesítve rengeteg kézi kódot. ## Miért számít ez A kiszolgálói adatok nem olyanok, mint a felhasználóifelület-állapot A kiszolgálói adatok *a kiszolgáló tulajdona*, és csupán gyorsítótárba kerülnek az ügyfélen, így **avulhatnak**. A kézi kezelés azt jelenti, hogy mindegyik végponthoz újra kell implementálni a gyorsítótárazást, a betöltési/hibastátusz nyomon követést, az újbetöltést, az újrapróbálkozásokat és a deduplikációt — hibahajlam és repetitív. ## Mit ad a React Query egyetlen hook-ban ```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 ; } ``` Ez az egyetlen hook a következőket biztosítja: ```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 ``` ## Mutációk + gyorsítótár érvénytelenítése ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` Mutáció után érvénytelenítse a vonatkozó lekérdezést, és a gyorsítótár újbetöltődik — az UI-t szinkronban tartva a kiszolgálóval. ## Csökkenti az "globális állapot" igényt ```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. ``` ## Miért számít ez A kiszolgálói állapot-kezelő könyvtárak megoldanak egy olyan problémát, amelyet az általános állapot-kezelő eszközök (Redux, useState) rosszul kezelnek: az ügyféli gyorsítótár szinkronban tartása a távoli adatokkal. Házezres sor kézi fetch/gyorsítótár/betöltési logikát helyettesítenek deklaratív hook-okkal, és olyan kifinomult viselkedést nyújtanak (dedup, háttérben futó újbetöltés, stale-while-revalidate), amelyet kézileg helyesen megvalósítani nehéz. Annak felismerése, hogy a kiszolgálói állapot megérdemli a saját dedikált eszközét — és hogy az egyik elfogadása gyakran drasztikusan leegyszerűsíti a globális állapotot — az egyik legbefolyásosabb modern előtér-architektúra betekintés.