أنماط التفاؤل مع React Query وZustand

يوفر الخطاف useMutation في React Query بنية أساسية مدمجة للتحديثات المتفائلة من خلال ثلاث عمليات استدعاء لدورة الحياة: onMutate، ويُستدعى قبل عملية التغيير ويعيد كائن سياق؛ وonError، ويُستدعى عند الفشل ويتلقى السياق؛ وonSettled، ويُستدعى عند النجاح أو الفشل. صُممت هذه البنية خصيصًا للأنماط المتفائلة.

في onMutate، تنفذ ثلاث خطوات: أولًا، ألغِ أي استعلامات قيد التنفيذ للبيانات المتأثرة (await queryClient.cancelQueries({ queryKey }))، ثم احفظ نسخة من ذاكرة التخزين المؤقت الحالية (queryClient.getQueryData(queryKey))، وأخيرًا طبّق التحديث المتفائل على ذاكرة التخزين المؤقت (queryClient.setQueryData(queryKey, updater)). أعد النسخة المحفوظة كسياق.

يتلقى ردّ النداء onError الخطأ ومتغيرات عملية التغيير والسياق الذي أعاده onMutate. استخدم السياق للتراجع: queryClient.setQueryData(queryKey, context.previousData). يمثّل السياق حلقة الوصل بين النسخة المحفوظة في onMutate والتراجع في onError.

يُستدعى ردّ النداء onSettled بغض النظر عن النجاح أو الفشل. استخدمه لإعادة جلب الاستعلام ومزامنة الحالة مع الخادم: queryClient.invalidateQueries({ queryKey }). يضمن ذلك أن تتقارب حالتك في النهاية مع حقيقة الخادم بعد أي عملية تغيير، سواء نجحت العملية، إذ قد يكون الخادم قد حوّل البيانات، أم فشلت، بعد اكتمال التراجع.

مثال عملي: تبديل حالة إكمال مهمة. في onMutate، احفظ نسخة من قائمة المهام، ثم حدّث المهمة المحددة في ذاكرة التخزين المؤقت. في onError، استعد النسخة المحفوظة من السياق. وفي onSettled، أبطل استعلام المهام لإعادة جلبه. يرى المستخدم التبديل فورًا، بينما يتزامن الخادم في الخلفية.

تُعد التحديثات المتفائلة في متجر Zustand مباشرة: أنشئ إجراءً updateItem(id, changes) يحدّث العنصر فورًا في المتجر، ثم يستدعي واجهة برمجة التطبيقات. إذا فشلت واجهة برمجة التطبيقات، فاستدعِ إجراءً آخر هو revertItem(id, previousState). تجعل تحديثات الحالة المتزامنة في Zustand الخطوة المتفائلة فورية.

عند تحديث حالة Zustand المتداخلة بعمق بتفاؤل، استخدم produce من immer لإجراء تغييرات واضحة: set(produce(state => { state.items[id] = { ...state.items[id], ...changes } })). يتولى Immer تحديثات عدم القابلية للتغيير باستخدام صياغة قابلة للتغيير، مما يجعل تغييرات الحالة المتداخلة المعقدة مقروءة وآمنة.

قدّم React 19 الخطاف المدمج useOptimistic(state, updateFn) للتحديثات المتفائلة ضمن Server Actions. const [optimisticState, addOptimistic] = useOptimistic(items, (state, newItem) => [...state, newItem]). يؤدي استدعاء addOptimistic(newItem) إلى تحديث واجهة المستخدم فورًا أثناء تشغيل إجراء الخادم بشكل غير متزامن.

يتولى useOptimistic التعامل مع التراجع تلقائيًا. عند اكتمال Server Action، سواء بنجاح أم بخطأ، يعيد React الحالة المتفائلة ويطبّق الحالة الفعلية من الخادم. لا تحتاج إلى كتابة منطق تراجع يدوي؛ إذ يدير React دورة حياة التحديث المتفائل أثناء عمل الإجراء ضمن حدود Suspense.

تمنحك التحديثات المتفائلة اليدوية تحكمًا كاملًا، لكنها تتطلب تعليمات برمجية متكررة. يتكامل React Query onMutate/onError/onSettled مع ذاكرة التخزين المؤقت للاستعلامات من أجل المزامنة التلقائية. ويُعد useOptimistic الأبسط بالنسبة إلى Server Actions، لكنه يتطلب React 19 وبنية تعتمد على إجراءات الخادم. اختر الأسلوب بناءً على طبقة البيانات لديك: اليدوي للحالة المحلية البسيطة، وReact Query لواجهات REST API، وuseOptimistic لـ RSC/Server Actions.

ضع بنيتك المعمارية في الاعتبار عند اختيار نمط متفائل. إذا كنت تستخدم React Query في أنحاء تطبيقك، فسيكون نمط onMutate متسقًا ومدركًا لذاكرة التخزين المؤقت. وإذا كنت تستخدم Zustand للحالة العامة، فسيتوافق نمط الإجراءات معها طبيعيًا. أما إذا كنت تستخدم React 19 مع Server Actions، فسيكون useOptimistic هو الخيار الاصطلاحي. ومن الشائع والمقبول خلط الأنماط داخل التطبيق نفسه.

ماذا ينبغي أن يعيد ردّ النداء onMutate في React Query لتمكين التراجع في onError؟

يستخدم useMutation في React Query onMutate لإلغاء الاستعلامات وحفظ نسخة وتطبيق التحديث المتفائل وإعادة السياق، ثم يستخدم onError لاستعادة النسخة من السياق، وonSettled لإبطال الاستعلام وإعادة جلبه. تطبّق التحديثات المتفائلة في Zustand إجراء الحالة فورًا، ثم تستدعي واجهة برمجة التطبيقات، وتعيد الحالة عند الفشل. يوفر useOptimistic في React 19 تراجعًا تلقائيًا ضمن Server Actions. اختر النمط الذي يلائم بنية طبقة البيانات لديك.