React Query Nasıl Kullanılır? Temel Kavramlar ve Uygulama Önerileri

React Query, React uygulamalarında veri getirme, önbellekleme ve senkronizasyon gibi işlevleri yönetmek için kullanılan güçlü bir kütüphanedir. Bu makalede, React Query’nin nasıl kullanılacağını, temel kavramlarını ve uygulama önerilerini öğreneceksiniz.

React Query Nedir?

React Query, React uygulamalarında veri getirme ve yönetme işlemlerini kolaylaştıran bir kütüphanedir. Kullanıcı arayüzünü veri çekme sürecinden bağımsız hale getirir ve performans optimizasyonları sağlar. Geleneksel veri çekme yöntemlerinden farklı olarak, veri önbellekleme, senkronizasyon ve güncelleme işlemlerini otomatikleştirir.

Kurulum ve Başlangıç

React Query kullanmaya başlamak için öncelikle projeye dahil edilmesi gerekmektedir. Projenize React Query’yi eklemek için aşağıdaki komutu kullanabilirsiniz:

npm install react-query

Ardından, uygulamanızın en üst düzeyinde QueryClient ve QueryClientProvider bileşenlerini kullanarak React Query’yi yapılandırabilirsiniz:

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourAppComponents />
    </QueryClientProvider>
  );
}

Temel Kavramlar

Query: Sunucudan veri getirmek için kullanılan bir işlemdir. useQuery hook’u ile gerçekleştirilir.

Mutation: Veri gönderme ve güncelleme işlemleri için kullanılır. useMutation hook’u ile gerçekleştirilir.

QueryClient: Tüm query ve mutation işlemlerini yöneten merkezi yapıdır.

Query Kullanımı

useQuery hook’u, veri çekme işlemlerini yönetir ve sunucudan gelen veriyi bileşenlere iletir. Aşağıdaki örnek, kullanıcı listesini getiren basit bir useQuery kullanımını göstermektedir:

import { useQuery } from 'react-query';

function fetchUsers() {
  return fetch('/api/users').then(response => response.json());
}

function Users() {
  const { data, error, isLoading } = useQuery('users', fetchUsers);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Mutation Kullanımı

useMutation hook’u, veri gönderme ve güncelleme işlemlerini yönetir. Aşağıdaki örnek, yeni bir kullanıcının eklendiği basit bir useMutation kullanımını göstermektedir:

import { useMutation } from 'react-query';

function addUser(user) {
  return fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(user)
  }).then(response => response.json());
}

function AddUser() {
  const mutation = useMutation(addUser);

  function handleSubmit(event) {
    event.preventDefault();
    const user = { name: event.target.elements.name.value };
    mutation.mutate(user);
  }

  if (mutation.isLoading) return <div>Loading...</div>;
  if (mutation.isError) return <div>Error: {mutation.error.message}</div>;

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" type="text" placeholder="User Name" />
      <button type="submit">Add User</button>
    </form>
  );
}

QueryClient Kullanımı

QueryClient, tüm query ve mutation işlemlerini yöneten merkezi yapıdır. Aşağıda, QueryClient‘ın nasıl yapılandırılacağını ve kullanılacağını gösteren bir örnek bulabilirsiniz:

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourAppComponents />
    </QueryClientProvider>
  );
}

Cache Yönetimi

React Query, otomatik önbellekleme özelliği sunar. Veriler, belirli bir süre boyunca önbellekte saklanır ve tekrar kullanılır. cacheTime ve staleTime gibi ayarlarla önbellekleme süresini yapılandırabilirsiniz:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 10000, // 10 saniye
      cacheTime: 60000, // 1 dakika
    },
  },
});

Query Devtools

React Query Devtools, query’lerinizi ve mutation’larınızı yönetmenize yardımcı olan bir araçtır. Projeye dahil etmek için aşağıdaki adımları izleyebilirsiniz:

npm install @tanstack/react-query-devtools

Ardından, uygulamanızın en üst düzeyinde ReactQueryDevtools bileşenini kullanarak Devtools’u ekleyin:

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

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourAppComponents />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

Örnek Uygulamalar

React Query ile örnek bir uygulama geliştirerek kütüphanenin gücünü tam anlamıyla keşfedebilirsiniz. Aşağıda, kullanıcı listesi ve kullanıcı ekleme işlemlerini bir araya getiren basit bir uygulama örneği bulabilirsiniz.

En İyi Uygulamalar

React Query kullanırken en iyi performans ve kullanıcı deneyimi için bazı ipuçları:

• Query’leri parçalara ayırarak performansı artırın.
• Mutation’lar için optimistic update kullanarak kullanıcı deneyimini iyileştirin.
• Query key’lerini mantıklı ve düzenli kullanarak verilerin yönetimini kolaylaştırın.

Hata Yönetimi

React Query, hata yönetimi için yerleşik mekanizmalar sunar. onError ve retry gibi seçeneklerle hata durumlarını yönetebilirsiniz:

const { data, error, isLoading } = useQuery('users', fetchUsers, {
  onError: (error) => {
    console.error('Error fetching users:', error);
  },
  retry: false,
});

Veri Senkronizasyonu

React Query ile gerçek zamanlı veri senkronizasyonu sağlayabilirsiniz. WebSocket veya diğer gerçek zamanlı veri kaynakları ile entegrasyon yaparak verilerinizi senkronize tutabilirsiniz.

React Query ve Context API

React Query’yi Context API ile birlikte kullanarak global state yönetimi yapabilirsiniz. Bu sayede, uygulamanızın farklı bileşenlerinde ortak verileri kolayca yönetebilirsiniz.

SSR ve React Query

React Query, sunucu tarafı render (SSR) ile de uyumludur. Next.js gibi framework’lerle birlikte kullanarak sunucu tarafında veri çekme işlemlerini gerçekleştirebilirsiniz.

Önbellek Zaman Aşımı

cacheTime ve staleTime ayarlarını kullanarak önbellek zaman aşımını yönetebilirsiniz. Bu ayarlar, verilerinizin ne kadar süreyle önbellekte kalacağını belirler.

Query Key’ler

Query key’ler, verileri önbellekte saklarken benzersiz bir kimlik sağlar. Query key’lerinizi mantıklı ve düzenli kullanarak veri yönetimini kolaylaştırabilirsiniz.

Devre Kesiciler

Devre kesici mantığı ile React Query’yi kullanarak hata durumlarında uygulamanızın stabil kalmasını sağlayabilirsiniz. Belirli sayıda hata oluştuğunda sorguları durdurarak uygulamanızı koruyabilirsiniz.

Sonuçlar ve Öneriler

React Query, React uygulamalarında veri yönetimi için güçlü ve esnek bir kütüphanedir. Temel kavramları öğrenerek ve en iyi uygulamaları takip ederek, uygulamalarınızda verimli ve performanslı veri yönetimi sağlayabilirsiniz.

Kaynakça

• Why React Query?
• Tanstack Dökümantasyonu

Diğer Yazılarım

• React Performans Optimizasyonu Teknikleri
• React Hook Form Yönetimi ve Validasyon
• React Context API Kullanımı ve Global State Yönetimi