Özet - Veri çekme

SWR ile ürünleri çekip sepete ekleme akışı yazarsın.

Özet - Veri çekme

Bu grupta SWR ile önbellekli veri çekme, React Query ile sunucu state yönetimi ve useMutation ile veri değiştirmeyi öğrendin. Şimdi bunları birleştirme zamanı.

Tipik akış: useSWR veya useQuery ile ürün listesi çekersin; useMutation ile yeni ürün eklersin; onSuccess'te invalidateQueries ile önbelleği tazelersin. Bu döngü, modern React uygulamalarının kalbidir.

Bir sonraki adımda ürünleri çekip sepete ekleyen tam bir akış yazacaksın.

Uygulama Ürün listesi + sepete ekle

Aşağıdaki iskeleti tamamla. ProductPage bileşeni yaz. useSWR ile '/api/products' çek (fetcher: (url) => fetch(url).then(r => r.json())). isLoading ise <p>Yükleniyor</p> döndür. Yoksa <ul> içinde products.map(p => <li key={p.id}>{p.name}<button onClick={() => addToCart(p)}>Sepete ekle</button></li>) döndür. addToCart fonksiyonu parametre olarak product alır ve console.log yapar. export default ekle.

Örnek çözümü göster

import useSWR from 'swr';

function addToCart(product) {
  console.log('Sepete eklendi:', product.name);
}

function ProductPage() {
  const { data: products, isLoading } = useSWR(
    '/api/products',
    (url) => fetch(url).then((r) => r.json())
  );
  if (isLoading) return <p>Yükleniyor</p>;
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>
          {p.name}
          <button onClick={() => addToCart(p)}>Sepete ekle</button>
        </li>
      ))}
    </ul>
  );
}

export default ProductPage;

Kendini test et

Bu grupta işlenmeyen konu?
```
Three topics were covered; router was not.
```
- SWR ile veri çekme
- React Query useQuery
- useMutation ile değiştirme
- Router yapılandırması
Cevabı göster

Router yapılandırması — Router bu grupta işlenmedi.

invalidateQueries çağrısı

queryClient.____({ queryKey: ['products'] });

Cevabı göster

queryClient.invalidateQueries({ queryKey: ['products'] });

Sıradaki ders: Redux Toolkit nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler