React Query temel

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.

Örnek çözümü göster

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;

Kendini test et

React Query neyi yönetir?
```
It caches data coming from the server.
```
- Yalnızca form state
- Sunucu state
- Yalnızca yerel state
- Yalnızca CSS state
Cevabı göster

Sunucu state — React Query sunucu state'ini yönetir.

queryKey yapısı

useQuery({ queryKey: ['product', ____], queryFn: () => fetchProduct(id) });

Cevabı göster

useQuery({ queryKey: ['product', id], queryFn: () => fetchProduct(id) });

React Query temel: kavramları eşleştir

queryKey

Sorgu kimliği
queryFn

Veri çeken fonksiyon
data

Gelen veri
isLoading

İlk yüklenme

Sıradaki ders: Mutasyonlar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler