React
Mutasyonlar
useMutation ile veriyi değiştirmeyi öğrenirsin.
useMutation nedir?
useMutation, veriyi değiştiren işlemler (POST, PUT, DELETE) için kullanılır. mutate fonksiyonu ile çağrılır; başarı durumunda onSuccess çalışır.
Tipik kullanım: form gönder, veriyi sunucuya yaz, sonra önbelleği geçersiz kıl (invalidate). Bu, önbelleğin yenilenmesini sağlar.
queryClient.invalidateQueries ile ilgili queryKey'leri yeniden çalıştırırsın; böylece liste yeni veriyi gösterir.
invalidateQueries
Bir mutasyon başarılı olduğunda önbelleğin güncellenmesi gerekir. queryClient.invalidateQueries({ queryKey: ['users'] }) çağrısı, o anahtara sahip tüm sorguları yeniden çalıştırır.
Bu, yeni verinin otomatik gelmesini sağlar; elle refetch yazmak gerekmez. Mutasyon sonrası liste anında tazelenir.
invalidateQueries, aktif ve inaktif sorguları işaretler; aktif olanlar hemen yeniden çalışır.
Uygulama useMutation ile ürün ekleme
Aşağıdaki iskeleti tamamla. AddProduct bileşeni yaz. useMutation çağır; mutationFn olarak (newProduct) => fetch('/api/products', { method: 'POST', body: JSON.stringify(newProduct) }) kullan. onSuccess içinde queryClient.invalidateQueries({ queryKey: ['products'] }) çağır. Bir <button onClick={() => mutate({ name: 'Kalem' })}>Ekle</button> döndür. const queryClient = useQueryClient() ile client al. export default ekle.
Örnek çözümü göster
import { useMutation, useQueryClient } from '@tanstack/react-query';
function AddProduct() {
const queryClient = useQueryClient();
const { mutate } = useMutation({
mutationFn: (newProduct) =>
fetch('/api/products', {
method: 'POST',
body: JSON.stringify(newProduct),
}),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['products'] });
},
});
return <button onClick={() => mutate({ name: 'Kalem' })}>Ekle</button>;
}
export default AddProduct;
Kendini test et
-
useMutation ne zaman kullanılır?
Writing data = useMutation.
- Veri okurken
- Yalnızca CSS değiştirirken
- Veriyi değiştirirken (POST/PUT/DELETE)
- Yalnızca hata ayıklarken
Cevabı göster
Veriyi değiştirirken (POST/PUT/DELETE) — useMutation veriyi değiştirmek için kullanılır.
-
invalidate çağrısı
queryClient.____({ queryKey: ['users'] });
Cevabı göster
queryClient.invalidateQueries({ queryKey: ['users'] });
-
Mutasyonlar: kavramları eşleştir
- useMutation
- Veriyi değiştirir
- mutate
- Çağrı fonksiyonu
- onSuccess
- Başarı sonrası
- invalidateQueries
- Önbelleği tazeler
Sıradaki ders: Özet - Veri çekme
