Pse të përdorni një bibliotekë të gjendjes së serverit si React Query?

Question

Accepted Answer

**Biblioteka të gjendjes së serverit** (React Query/TanStack Query, SWR, RTK Query) janë të specializuara në menaxhimin e **të dhënave të nxjerra nga një server** — duke i trajtuar ato si një cache për të mbajtur sinkronizuar me burimin e largët. Ato menaxhojnë automatikisht caching, gjendje ngarjese/gabimi, ri-fetching dhe deduplicating, duke zëvendësuar një sasi të madhe kode manuale. ## Problemi: të dhënat e serverit nuk janë si gjendje e UI-t Të dhënat e serverit janë *në pronësi të serverit* dhe thjesht cache në klientin, kështu që mund të bëhen **të vjetra**. Menaxhimi manual nënkupton ri-implementimin e caching, ndjekjes ngarjese/gabimi, ri-fetching, riprove dhe deduplicating për çdo endpoint — i prirur ndaj gabimit dhe përsëritës. ## Çfarë ju jep React Query në një hook ```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 ; } ``` Ai hook i vetëm ofron: ```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 ``` ## Mutacione + pavlefshmëri cache ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` Pas një mutacioni, ju pavlefshmoni kërkesën përkatëse dhe cache ri-fetches — duke mbajtur UI-t në përputhje me serverin. ## Zvogëlon nevojat tuaja të "gjendjes globale" ```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. ``` ## Pse është e rëndësishme Biblioteka të gjendjes së serverit zgjidhin një problem që mjetet e gjendjes generike (Redux, useState) menaxhojnë keq: mirëmbajtjen e një cache të klientit në sinkronizim me të dhënat e largëta. Zëvendësojnë qindra linja të kodit manual të fetching/caching/ngarjese me hooks deklarative, dhe sigurojnë sjellje të sofistikuar (dedup, background refetch, stale-while-revalidate) që është e vështirë të ndërtohet saktë me dorë. Anija se gjendje e serverit meritë një mjet të dedikuar vetë — dhe se përafrimi i njërës shpesh thjeshtëzon drastikisht gjendjen globale — është një nga përqasjet më ndikuese të arkitekturës moderne të frontend.