useSWR Kancası: Veri Alma, Yükleme ve Hata Durumları

useSWR(key, fetcher, options), temel kancadır. key, önbellek anahtarıdır (genellikle bir URL dizesi); fetcher, veri döndüren asenkron işlevdir ve options, isteğe bağlı bir yapılandırma nesnesidir.

Kanca; data, error, isLoading, isValidating ve mutate işlevini içeren bir nesne döndürür.

key, bir URL dizesi, [url, params] dizisi veya null olabilir. Dize anahtarları basit GET isteklerine karşılık gelir. Dizi anahtarları, userId veya filtreler gibi değişkenleri önbellek kimliğine yerleştirmenize olanak tanır.

Null göndermek isteği tamamen devre dışı bırakır; bu, gerekli veriler henüz kullanılabilir olmadığında koşullu veri getirme için yararlıdır.

fetcher, anahtarı (veya dizi anahtarını bağımsız değişkenler olarak açılmış biçimde) alır ve bir Promise döndürmelidir. Çözümlenen değer data olur. fetcher bir hata fırlatırsa error özelliği ayarlanır.

Örnek: (url) => fetch(url).then(r => { if (!r.ok) throw new Error(r.status); return r.json(); }).

data, ilk yükleme sırasında undefined olur ve başarılı işlemden sonra çözümlenen fetcher değerine eşitlenir. fetcher bir hata fırlatmadığı sürece error undefined olur; hata fırlatırsa error, fırlatılan hata nesnesini içerir.

Bir hata mesajı oluşturmak için if (error) ve bir yükleme iskeleti oluşturmak için if (!data) denetimini kullanın; böylece anlaşılır yedek kullanıcı arayüzleri sağlayabilirsiniz.

isLoading yalnızca önbelleğe alınmış veri olmadığında ve bir istek sürerken, yani bu anahtarın ilk yüklemesinde true değerindedir. isValidating, önbelleğe alınmış veri zaten mevcutken gerçekleşen arka plan yeniden doğrulamaları da dahil olmak üzere, herhangi bir istek sürdüğü zaman true değerindedir.

İskelet ekranları için isLoading, arka plan yenilemesini gösteren hafif bir yükleme göstergesi için isValidating kullanın.

SWRConfig, alt ağacındaki tüm useSWR çağrıları için varsayılan veri getirme işlevini, dedupingInterval, refreshInterval, onError işleyicisini ve diğer seçenekleri tanımlamanıza olanak tanır. Bu, seçenekleri her kancada tekrarlamak yerine yapılandırmayı merkezileştirir.

Uygulamanızın farklı bölümleri için farklı varsayılanlara sahip olmak üzere birden çok SWRConfig sağlayıcısını iç içe yerleştirin.

İsteği atlamak için anahtar olarak null gönderin: useSWR(isLoggedIn ? '/api/user' : null, fetcher). Anahtar null olmayan bir değere dönüşene kadar SWR veri getirmez.

Bu yaklaşım, React Query'deki skip seçeneğinden daha temizdir. Anahtarın null değerinden bir dizeye geçmesi, ilk veri getirme işlemini otomatik olarak tetikler.

Bağımlı istekler için SWR kancalarını zincirleyin: const { data: user } = useSWR('/api/me', fetcher) then const { data: orders } = useSWR(user ? '/api/orders/' + user.id : null, fetcher). İkinci kanca, birincinin çözülmesini bekler.

Bu model, useEffect zincirlerini önler ve veri bağımlılıklarını bildirimsel ve okunabilir tutar.

Bir Header bileşeni ile bir Sidebar bileşeni aynı anda useSWR('/api/user', fetcher) çağrısı yaparsa SWR yalnızca bir istek gönderir ve sonucu paylaşır. Veri veya hata güncellendiğinde her iki bileşen de birlikte yeniden oluşturulur.

Bu tekilleştirme, ek yapılandırma gerektirmeden varsayılan olarak 2000 ms olan dedupingInterval aralığı içinde otomatik olarak gerçekleşir.

refreshInterval: 5000, her 5 saniyede bir sorgulama yapar. refreshWhenHidden: false, sekme görünür olmadığında sorgulamayı durdurur. shouldRetryOnError: false, otomatik yeniden denemeyi devre dışı bırakır. revalidateOnFocus: false, odaklanma tetiklemeli yeniden doğrulamayı devre dışı bırakır.

Seçenekleri veri güncelliği gereksinimlerinize uyacak şekilde birleştirin: gösterge panoları genellikle refreshInterval kullanırken statik içerik revalidateOnFocus: false değerini ayarlar.

Sayfalı veriler için sayfa numarasını anahtara dahil edin: useSWR(['/api/items', page], fetcher). Sayfayı değiştirmek, önceki sayfaları önbelleğe alırken o sayfa için yeni bir veri getirme işlemi başlatır.

SWR ayrıca, sayfa dizini ve önceki sayfa verilerine göre anahtarlar oluşturan bir getKey işleviyle imleç tabanlı veya sonsuz kaydırma modelleri için useSWRInfinite sağlar.

useSWR'a anahtar olarak null gönderdiğinizde ne olur?

useSWR(key, fetcher), data, error, isLoading ve isValidating değerlerini döndürür. Null anahtarlar, koşullu ve bağımlı istekler için veri getirmeyi devre dışı bırakır. isLoading ilk yüklemeyi, isValidating ise devam eden herhangi bir isteği belirtir. SWRConfig varsayılanları merkezileştirir ve bileşenler arasındaki istek tekilleştirme işlemi otomatik olarak yapılır.

refreshInterval, revalidateOnFocus ve shouldRetryOnError gibi seçenekler, veri güncelliği davranışını kanca veya global düzeyde hassas biçimde ayarlamanızı sağlar.