SWR ile veri çekme
- React kursu
- İleri seviye
- Ders 17/56
- 4 dk
SWR ile önbellekli veri çekme yapmayı öğrenirsin.
SWR nedir?
SWR (stale-while-revalidate), Vercel'in önbellekli veri çekme kütüphanesidir. Bir useSWR çağrısı veriyi çeker, önbelleğe alır ve arka planda yeniler.
SWR, aynı anahtarı kullanan tüm bileşenlerde veriyi paylaştırır; böylece tek istekle çok bileşen güncellenir. Bu, server state yönetimini kolaylaştırır.
SWR otomatik yeniden deneme, odaklanınca yenileme ve pessimistic güncelleme gibi özellikler sunar.
useSWR çağrısı
useSWR iki parametre alır: bir anahtar (genelde URL) ve isteğe bağlı bir fetcher fonksiyonu. Dönüş değeri { data, error, isLoading } nesnesidir.
İlk çizimde isLoading true olur; veri gelince data dolar ve isLoading false olur. Hata durumunda error set edilir.
Anahtar aynı olduğu sürece SWR önbelleği kullanır; bu sayede sayfalar arası geçişte veri anında görünür.
Uygulama useSWR ile ürün listesi
Aşağıdaki iskeleti tamamla. ProductList bileşeni yaz. İçinde useSWR ile '/api/products' adresini çek (fetcher olarak (url) => fetch(url).then(r => r.json()) kullan). isLoading ise <p>Yükleniyor</p>, error ise <p>Hata</p>, yoksa <ul> içinde products.map(p => <li key={p.id}>{p.name}</li>) döndür. export default ekle.
Başlangıç kodu
import useSWR from 'swr';
// ProductList bileşenini buraya yazÖrnek çözüm
import useSWR from 'swr';
function ProductList() {
const { data: products, error, isLoading } = useSWR(
'/api/products',
(url) => fetch(url).then((r) => r.json())
);
if (isLoading) return <p>Yükleniyor</p>;
if (error) return <p>Hata</p>;
return <ul>{products.map((p) => <li key={p.id}>{p.name}</li>)}</ul>;
}
export default ProductList;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 SWR neyin kısaltması?
It shows stale cached data while revalidating in the background.- stale-while-revalidate Doğru cevap
- state-with-reducer
- sync-web-request
- server-worker-render
Açıklama: SWR, stale-while-revalidate anlamına gelir.
2 useSWR dönüş değeri
const { data, error, ____ } = useSWR('/api/products', fetcher);const { data, error, isLoading } = useSWR('/api/products', fetcher);Açıklama: isLoading, useSWR'ün üç durumundan biridir.
3 SWR ile veri çekme: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
useSWR |
Veri çeker |
data |
Gelen veri |
error |
Hata nesnesi |
isLoading |
Yükleniyor mu |