React Query ve Zustand ile İyimser Kalıplar

React Query'nin useMutation kancası, iyimser güncellemeler için üç yaşam döngüsü geri çağrısıyla yerleşik bir altyapı sunar: onMutate (değişiklik işleminden önce çalışır ve bir bağlam nesnesi döndürür), onError (başarısızlıkta çalışır ve bağlamı alır) ve onSettled (başarılı veya başarısız her durumda çalışır). Bu yapı özellikle iyimser desenler için tasarlanmıştır.

onMutate içinde üç adım gerçekleştirirsiniz: önce etkilenen veriler için devam eden sorguları iptal edin (await queryClient.cancelQueries({ queryKey })), ardından mevcut önbelleğin anlık görüntüsünü alın (queryClient.getQueryData(queryKey)) ve son olarak önbelleğe iyimser güncellemeyi uygulayın (queryClient.setQueryData(queryKey, updater)). Anlık görüntüyü bağlam olarak döndürün.

onError geri çağrısı hatayı, değişiklik işlemi değişkenlerini ve onMutate tarafından döndürülen bağlamı alır. Geri almak için bağlamı kullanın: queryClient.setQueryData(queryKey, context.previousData). Bağlam, onMutate içinde alınan anlık görüntü ile onError içindeki geri alma işlemi arasındaki köprüdür.

onSettled geri çağrısı, işlem başarılı veya başarısız olsa da çalışır. Sorguyu yeniden getirmek ve sunucu durumuyla eşitlemek için bunu kullanın: queryClient.invalidateQueries({ queryKey }). Böylece herhangi bir değişiklik işleminden sonra — işlem başarılı olmuşsa (sunucu verileri dönüştürmüş olabilir) veya başarısız olmuşsa (geri alma tamamlanmıştır) — sonunda sunucudaki gerçek durumla uyumlanırsınız.

Pratik bir örnek olarak bir yapılacak öğesinin tamamlanma durumunu değiştirmeyi ele alalım. onMutate içinde yapılacaklar listesinin anlık görüntüsünü alın, ardından önbellekteki ilgili yapılacak öğesini güncelleyin. onError içinde bağlamdaki anlık görüntüyü geri yükleyin. onSettled içinde yeniden getirme yapmak için yapılacaklar sorgusunu geçersiz kılın. Kullanıcı değişikliği anında görür; sunucu ise arka planda eşitlenir.

Bir Zustand durum deposunda iyimser güncellemeler oldukça basittir: öğeyi depoda hemen güncelleyen ve ardından API'yi çağıran updateItem(id, changes) eylemini oluşturun. API başarısız olursa başka bir revertItem(id, previousState) eylemi çağırın. Zustand'ın senkron durum güncellemeleri, iyimser adımın anında gerçekleşmesini sağlar.

İç içe geçmiş Zustand durumunu iyimser olarak güncellerken, temiz değişiklikler için Immer'ın üretim işlevini kullanın: set(produce(state => { state.items[id] = { ...state.items[id], ...changes } })). Immer, değiştirilebilir söz dizimiyle değişmez güncellemeleri yönetir; böylece karmaşık iç içe durum değişiklikleri okunabilir ve güvenli olur.

React 19, Sunucu Eylemleri içinde iyimser güncellemeler için yerleşik bir kanca olarak useOptimistic(state, updateFn) özelliğini kullanıma sundu. const [optimisticState, addOptimistic] = useOptimistic(items, (state, newItem) => [...state, newItem]). addOptimistic(newItem) çağrıldığında sunucu eylemi eşzamansız olarak çalışırken kullanıcı arayüzü hemen güncellenir.

useOptimistic geri alma işlemini otomatik olarak yönetir. Sunucu Eylemi tamamlandığında (başarılı veya hatalı biçimde), React iyimser durumu geri alır ve sunucudan gelen gerçek durumu uygular. El ile geri alma mantığı yazmanız gerekmez; React, eylemin Suspense sınırı içindeki iyimser güncellemenin yaşam döngüsünü yönetir.

El ile iyimser güncellemeler tam denetim sağlar ancak çok sayıda kalıp kod gerektirir. React Query onMutate/onError/onSettled, otomatik eşzamanlama için sorgu önbelleğiyle bütünleşir. useOptimistic, Sunucu Eylemleri için en basit seçenektir ancak React 19 ve sunucu eylemi mimarisi gerektirir. Seçiminizi veri katmanınıza göre yapın: basit yerel durum için el ile yaklaşım, REST API'leri için React Query, RSC/Sunucu Eylemleri için useOptimistic.

İyimser bir desen seçerken mimarinizi göz önünde bulundurun. Uygulamanızın tamamında React Query kullanıyorsanız onMutate deseni tutarlıdır ve önbelleği dikkate alır. Genel durum için Zustand kullanıyorsanız eylem tabanlı desen doğal biçimde uyum sağlar. React 19 ve Sunucu Eylemleri kullanıyorsanız useOptimistic doğal seçimdir. Tek bir uygulama içinde desenleri karıştırmak yaygın ve kabul edilebilir bir durumdur.

React Query'de onError içinde geri almayı etkinleştirmek için onMutate geri çağrısı ne döndürmelidir?

React Query useMutation; onMutate ile sorguları iptal eder, anlık görüntüyü alır, iyimser güncellemeyi uygular ve bağlamı döndürür; onError ile bağlamdaki anlık görüntüyü geri yükler; onSettled ile yeniden getirme yapmak için sorguyu geçersiz kılar. Zustand iyimser güncellemeleri önce durum eylemini, ardından API'yi çağırır ve başarısızlıkta geri alır. React 19 useOptimistic, Sunucu Eylemleri içinde otomatik geri alma sağlar. Veri katmanı mimarinize uyan deseni seçin.