Mutasyonlar
- React kursu
- İleri seviye
- Ders 19/56
- 4 dk
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.
Başlangıç kodu
import { useMutation, useQueryClient } from '@tanstack/react-query';
// AddProduct bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useMutation ne zaman kullanılır?
Writing data = useMutation.- Veri okurken
- Yalnızca CSS değiştirirken
- Veriyi değiştirirken (POST/PUT/DELETE) Doğru cevap
- Yalnızca hata ayıklarken
Açıklama: useMutation veriyi değiştirmek için kullanılır.
2 invalidate çağrısı
queryClient.____({ queryKey: ['users'] });queryClient.invalidateQueries({ queryKey: ['users'] });Açıklama: invalidateQueries önbelleği tazeler.
3 Mutasyonlar: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
useMutation |
Veriyi değiştirir |
mutate |
Çağrı fonksiyonu |
onSuccess |
Başarı sonrası |
invalidateQueries |
Önbelleği tazeler |