React Query temel
- React kursu
- İleri seviye
- Ders 18/56
- 4 dk
React Query ile sunucu state'i yönetmeyi öğrenirsin.
React Query nedir?
React Query, sunucu state'ini yöneten bir kütüphanedir. useQuery ile veri çekersin; önbellek, yeniden deneme ve senkronizasyon otomatik gelir.
Her sorgu benzersiz bir queryKey ile tanımlanır. Aynı anahtarla yapılan çağrılar önbelleği paylaşır; bu da gereksiz istekleri azaltır.
React Query, QueryClientProvider ile uygulamayı sarar; böylece tüm bileşenler aynı önbelleği kullanır.
useQuery çağrısı
useQuery iki parametre alır: bir queryKey dizisi ve bir queryFn. Dönüş değerinde data, isLoading, error ve isFetching bulunur.
queryKey bir dizi olur; örneğin ['products'] ya da ['product', id]. Anahtar değişince sorgu otomatik yeniden çalışır.
React Query, aynı anahtara sahip sorguları birleştirir; böylece beş bileşen aynı veriyi istiyorsa tek istek yapılır.
Uygulama useQuery ile kullanıcı listesi
Aşağıdaki iskeleti tamamla. UserList bileşeni yaz. useQuery çağır; queryKey olarak ['users'], queryFn olarak () => fetch('/api/users').then(r => r.json()) kullan. isLoading ise <p>Yükleniyor</p>, yoksa <ul> içinde users.map(u => <li key={u.id}>{u.name}</li>) döndür. export default ekle.
Başlangıç kodu
import { useQuery } from '@tanstack/react-query';
// UserList bileşenini buraya yazÖrnek çözüm
import { useQuery } from '@tanstack/react-query';
function UserList() {
const { data: users, isLoading } = useQuery({
queryKey: ['users'],
queryFn: () => fetch('/api/users').then((r) => r.json()),
});
if (isLoading) return <p>Yükleniyor</p>;
return <ul>{users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;
}
export default UserList;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 React Query neyi yönetir?
It caches data coming from the server.- Yalnızca form state
- Sunucu state Doğru cevap
- Yalnızca yerel state
- Yalnızca CSS state
Açıklama: React Query sunucu state'ini yönetir.
2 queryKey yapısı
useQuery({ queryKey: ['product', ____], queryFn: () => fetchProduct(id) });useQuery({ queryKey: ['product', id], queryFn: () => fetchProduct(id) });Açıklama: id queryKey'e parametre ekler.
3 React Query temel: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
queryKey |
Sorgu kimliği |
queryFn |
Veri çeken fonksiyon |
data |
Gelen veri |
isLoading |
İlk yüklenme |