SWR ile Değişiklik ve İyimser Güncellemeler

swr paketindeki global mutate işlevi, uygulamanızın herhangi bir yerinden herhangi bir önbellek anahtarı için yeniden doğrulamayı tetiklemenizi sağlar: mutate('/api/user'), tüm useSWR('/api/user') kancalarının veriyi yeniden getirmesine neden olur.

Şununla içe aktarın: import { mutate } from 'swr'. Bu, doğrudan bağlı mutate işlevine erişimi olan bir bileşenin dışındaki sunucu eyleminden sonra verileri geçersiz kılmak için yararlıdır.

mutate işlevine ikinci bağımsız değişken olarak veri gönderin: mutate('/api/user', updatedUser), ağ isteği yapmadan önbelleği hemen updatedUser olarak ayarlar. Buna bazen yerel değişiklik adı verilir.

İyimser güncellemeden sonra SWR'nin yeniden veri getirmesini önlemek için üçüncü bağımsız değişken olarak { revalidate: false } ekleyin.

useSWRMutation, otomatik veri getirme yerine kullanıcı tarafından başlatılan değişiklik işlemleri (form gönderimleri, düğme tıklamaları) için tasarlanmıştır. Bileşen bağlandığında çalışmaz; yalnızca trigger() çağrıldığında çalışır.

swr/mutation paketinden içe aktarın: const { trigger, isMutating, data, error } = useSWRMutation('/api/post', sendRequest).

useSWRMutation için veri getirme işlevi (key, { arg }) değerlerini alır; arg, trigger() işlevine gönderilen değerdir. Örnek: async (url, { arg: newPost }) => fetch(url, { method: 'POST', body: JSON.stringify(newPost) }).

Değişiklik işlemini gönderi verisini arg olarak çalıştırmak için trigger({ title: 'New Post', content: '...' }) çağrısını yapın.

useSWRMutation içindeki isMutating, mutasyon isteği devam ederken true değerindedir. Gönderme düğmelerini devre dışı bırakmak ve istek sırasında yükleme göstergeleri görüntülemek için kullanarak yinelenen gönderimleri önleyebilirsiniz.

Bu, aksi hâlde useState ile yönetmeniz gereken elle tutulan isSubmitting durum değişkeninin yerini alır.

İyimser güncelleme, sunucu değişikliği onaylamadan önce beklenen sonucu kullanıcı arayüzüne hemen uygular. Sunucu başarılı olursa başka bir işlem gerekmez. İşlem başarısız olursa güncelleme önceki duruma geri alınır.

Bu kalıp, kullanıcı arayüzlerinin anında tepki veriyormuş gibi görünmesini sağlar: POST yanıtını beklemeden bir beğen düğmesi hemen tıklanmış görünür.

mutate(key, newData, { optimisticData: optimisticValue, rollbackOnError: true }) kullanın. SWR, önbelleği hemen optimisticValue değerine ayarlar, yeniden doğrulama isteğini gönderir ve istek hata verirse önceki değere geri döner.

rollbackOnError: true seçeneği, doğru çalışma açısından zorunludur: bu seçenek olmadan başarısız bir mutasyon, güncelliğini yitirmiş iyimser veriyi önbellekte bırakır.

rollbackOnError: true ayarlandığında ve mutasyon reddedildiğinde SWR, önbelleği iyimser güncellemeden önce alınan anlık görüntüye otomatik olarak geri döndürür. Elle geri alma kodu yazmanız gerekmez.

Ayrıca, mutasyon yanıtının gövdesi useSWR veri biçimiyle eşleşmiyorsa, yanıtın önbelleği yanlış biçimde güncellemesini önlemek için populateCache: false ayarlayın.

useSWR, bağlı bir mutate işlevi döndürür: const { data, mutate } = useSWR('/api/user', fetcher). Bu bağlı mutate, '/api/user' anahtarını otomatik olarak hedefler; anahtarı yeniden geçirmeniz gerekmez.

Veri gösterimini yöneten bileşenlerin içinde bağlı mutate kullanın. İlişkisiz bir bileşenden veya yardımcı işlevden bir anahtarı geçersiz kılmanız gerektiğinde swr paketindeki genel mutate işlevini kullanın.

React Query'nin useMutation işlevi, benzer bir trigger/isMutating kalıbına sahiptir. Temel farklar şunlardır: React Query'de queryClient.invalidateQueries ile birlikte kullanılan onSuccess geri çağırması, deyimsel önbellek geçersiz kılma kalıbıdır. SWR ise önbellek güncellemeleri için doğrudan mutate işlevini kullanır.

Her ikisi de iyimser güncellemeleri ve geri almayı destekler, ancak API biçimleri farklıdır. Birine hâkim olan ekipler diğerini hızlıca öğrenebilir.

Başarılı bir mutasyondan sonra üç seçeneğiniz vardır: mutate(key) çağırarak verileri yeniden çekmek, yanıt gövdesiyle önbelleği güncellemek (API güncellenmiş kaynağı döndürüyorsa) veya iyimser güncellemeleri yeniden doğrulamayla birleştirmek.

Liste mutasyonlarında (bir öğe eklerken) yeni öğeyi listenin sonuna eklemek için önbelleği elle güncelleyin, ardından sunucu durumunu doğrulamak üzere yeniden doğrulama yapın. Böylece verileri tutarlı tutarken listenin tamamını yeniden çekmekten kaçınabilirsiniz.

Bir iyimser güncellemeyi hata durumunda otomatik olarak geri almak için SWR'nin mutate işlevinde hangi seçeneği ayarlamanız gerekir?

Global mutate(key) yeniden doğrulamayı tetikler; mutate(key, data) yeniden veri çekmeden önbelleği günceller. useSWRMutation, trigger(), isMutating durumu ve extraArg desteğiyle kullanıcı tarafından açıkça başlatılan mutasyonları yönetir. optimisticData ve rollbackOnError: true ile yapılan iyimser güncellemeler, otomatik hata kurtarmayla kullanıcı arayüzlerinin anında tepki veriyormuş gibi görünmesini sağlar.

useSWR'den gelen bağlı mutate kendi anahtarını hedefler; swr paketindeki genel mutate her yerde çalışır.