Özet - Veri çekme
- React kursu
- İleri seviye
- Ders 20/56
- 5 dk
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.
Başlangıç kodu
import useSWR from 'swr';
// ProductPage bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 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ı Doğru cevap
Açıklama: Router bu grupta işlenmedi.
2 invalidateQueries çağrısı
queryClient.____({ queryKey: ['products'] });queryClient.invalidateQueries({ queryKey: ['products'] });Açıklama: invalidateQueries önbelleği tazeler.