React Query gibi bir sunucu durumu kütüphanesi neden kullanmalısınız?

Question

Accepted Answer

**Sunucu durumu kütüphaneleri** (React Query/TanStack Query, SWR, RTK Query) **sunucudan getirilen verileri** yönetmede uzmanlaştırılmıştır — bunu uzak kaynak ile senkronize tutmak için bir önbellek olarak değerlendirirler. Önbelleğe alma, yükleme/hata durumları, yeniden getirme ve kopyasını kaldırma işlemini otomatik olarak yönetirler ve bu da devasa miktarda manuel kodu ortadan kaldırır. ## Sorun: sunucu verileri UI durumu gibi değildir Sunucu verileri *sunucuya aittir* ve istemci tarafında yalnızca önbelleğe alınmıştır, bu nedenle **eski hale gelebilirler**. Elle yönetmek, her uç nokta için önbelleğe alma, yükleme/hata izleme, yeniden getirme, yeniden denemeler ve kopyasını kaldırma işlemini yeniden uygulamak anlamına gelir — bu hata eğilimli ve tekrarlıdır. ## React Query size tek bir hook'ta ne verir ```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 ; } ``` Bu tek hook şunları sağlar: ```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 ``` ## Mutasyonlar + önbellek geçersizliği ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` Bir mutasyondan sonra, ilgili sorguyu geçersiz kılarsınız ve önbellek yeniden getirir — UI'ı sunucu ile tutarlı tutun. ## "Global durumu" gerek azaltır ```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. ``` ## Neden önemli Sunucu durumu kütüphaneleri, genel durumu araçları (Redux, useState) kötü bir şekilde ele aldığı bir sorunu çözerler: istemci önbelleğini uzak verilerle senkronize tutmak. Yüzlerce satırlık manuel getirme/önbelleğe alma/yükleme mantığını bildirimsel hook'larla değiştirirler ve elle doğru bir şekilde oluşturmanın zor olduğu sofistike davranış (dedup, arka plan yeniden getirme, stale-while-revalidate) sağlarlar. Sunucu durumunun kendi özel aracına layık olduğunu — ve birini benimsemenin genellikle global durumu önemli ölçüde basitleştirdiğini — anlamak, en etkili modern ön uç mimarisi içgörülerinden biridir.