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.
İçindekiler
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.
