📌 React Query – Temel Kavramlar ve Kullanımı

React Query (TanStack Query), uzak (server) durum yönetimi için kullanılan güçlü bir kütüphanedir. Redux veya Context API gibi geleneksel yöntemlerle manuel veri çekme ve state yönetimi yapmak yerine, React Query otomatik cache yönetimi, refetching ve offline desteği sunar.

1️⃣ React Query’nin Temel Özellikleri

• Veriler önbellekte tutulur (cache)
• Otomatik loading ve error yönetimi
• Otomatik re-fetching ile verilerin güncel kalması
• Prefetching (önceden veri çekme)
• Mutasyon yönetimi (create/update/delete)
• Offline destek
• Remote state, UI state’ten farklıdır; React Query bu farkı yönetmek için idealdir.

2️⃣ QueryClient Oluşturma

QueryClient, React Query’nin önbellek ve ayarlarının yönetildiği merkezi nesnedir.

import { QueryClient } from "@tanstack/react-query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000, // Veriler 60 saniye taze kalır
    },
  },
});

• staleTime: Verinin bayat (stale) sayılmadan önceki süre.
• QueryClientProvider ile App’in tüm içeriği sarılmalıdır.

3️⃣ QueryClientProvider ile Uygulama Sarma

import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

<QueryClientProvider client={queryClient}>
  <App />
  <ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>