Mutation والتحديثات المتفائلة مع SWR

تتيح لكم دالة mutate العامة من swr تشغيل إعادة التحقق لأي مفتاح ذاكرة مؤقتة من أي موضع في تطبيقكم: يؤدي mutate('/api/user') إلى إعادة جلب البيانات لكل hooks الخاصة بـ useSWR('/api/user').

استوردوها باستخدام: import { mutate } from 'swr'. ويفيد ذلك في إبطال البيانات بعد إجراء على الخادم من خارج مكوّن يملك وصولًا مباشرًا إلى mutate المرتبطة.

مرروا البيانات بوصفها الوسيط الثاني إلى mutate: يؤدي mutate('/api/user', updatedUser) إلى ضبط الذاكرة المؤقتة على updatedUser فورًا دون إجراء طلب شبكة. ويُسمى ذلك أحيانًا تحديثًا محليًا.

أضيفوا { revalidate: false } بوصفه الوسيط الثالث لمنع SWR من إعادة الجلب بعد التحديث التفاؤلي.

صُمم useSWRMutation لعمليات التغيير التي يبدأها المستخدم، مثل إرسال النماذج والنقر على الأزرار، بدلًا من الجلب التلقائي. ولا يعمل عند التحميل، بل يعمل فقط عند استدعاء trigger().

استوردوه من swr/mutation: const { trigger, isMutating, data, error } = useSWRMutation('/api/post', sendRequest).

تتلقى fetcher الخاصة بـ useSWRMutation الوسيطين (key, { arg})، حيث تمثل arg القيمة التي مُررت إلى trigger(). مثال: async (url, { arg: newPost }) => fetch(url, { method: 'POST', body: JSON.stringify(newPost) }).

استدعوا trigger({ title: 'New Post', content: '...' }) لتشغيل عملية التغيير مع بيانات المنشور بوصفها arg.

تكون isMutating من useSWRMutation مساوية للقيمة true أثناء تنفيذ طلب mutation. استخدمها لتعطيل أزرار الإرسال وعرض مؤشرات التحميل أثناء الطلب، مما يمنع عمليات الإرسال المكررة.

يحل هذا محل متغير الحالة isSubmitting الذي سيتعين عليك إدارته يدويًا باستخدام useState.

يطبّق التحديث التفاؤلي النتيجة المتوقعة على واجهة المستخدم فورًا قبل أن يؤكد الخادم التغيير. إذا نجح الخادم، فلن تحتاج إلى إجراء أي شيء إضافي. وإذا فشل، يُستعاد التحديث إلى الحالة السابقة.

يجعل هذا النمط واجهات المستخدم تبدو فورية: فعلى سبيل المثال، يبدو زر الإعجاب مضغوطًا فورًا من دون انتظار استجابة POST.

استخدم mutate(key, newData, { optimisticData: optimisticValue, rollbackOnError: true }). يعيّن SWR ذاكرة التخزين المؤقت فورًا إلى optimisticValue، ويرسل طلب إعادة التحقق، ثم يتراجع إلى القيمة السابقة إذا تسبب الطلب في حدوث خطأ.

يُعد الخيار rollbackOnError: true ضروريًا لضمان صحة البيانات؛ فبدونه تترك mutation الفاشلة بيانات تفاؤلية قديمة في ذاكرة التخزين المؤقت.

عند ضبط rollbackOnError: true ورفض mutation، يعيد SWR تلقائيًا ذاكرة التخزين المؤقت إلى اللقطة التي أُخذت قبل التحديث التفاؤلي. ولا حاجة إلى كتابة كود تراجع يدوي.

بالإضافة إلى ذلك، اضبط populateCache: false إذا كان نص استجابة mutation لا يطابق شكل بيانات useSWR، لمنع الاستجابة من تحديث ذاكرة التخزين المؤقت بطريقة غير صحيحة.

تعيد useSWR دالة mutate مرتبطة: const { data, mutate } = useSWR('/api/user', fetcher). تستهدف دالة mutate المرتبطة المفتاح '/api/user' تلقائيًا؛ لذلك لا تمرر المفتاح مرة أخرى.

استخدم mutate المرتبط داخل المكونات التي تملك عرض البيانات. واستخدم mutate العام من swr عندما تحتاج إلى إبطال مفتاح من مكوّن غير مرتبط أو من دالة مساعدة.

تتبع useMutation في React Query نمطًا مشابهًا يعتمد على trigger وisMutating. وتتمثل الفروق الأساسية في أن نمط إبطال ذاكرة التخزين المؤقت الاصطلاحي في React Query يستخدم استدعاء onSuccess مع queryClient.invalidateQueries، بينما يستخدم SWR دالة mutate مباشرة لتحديث ذاكرة التخزين المؤقت.

يدعم كلاهما التحديثات التفاؤلية والتراجع، لكن شكل API يختلف بينهما. ويمكن للفرق المتمرسة في أحدهما تعلم الآخر بسرعة.

بعد نجاح mutation، لديك ثلاثة خيارات: إعادة الجلب عبر استدعاء mutate(key)، أو تحديث ذاكرة التخزين المؤقت باستخدام نص الاستجابة (إذا كانت API تعيد المورد المحدّث)، أو الجمع بين الخيارين باستخدام التحديثات التفاؤلية مع إعادة التحقق.

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

تؤدي global mutate(key) إلى إعادة التحقق؛ بينما تحدّث mutate(key, data) ذاكرة التخزين المؤقت من دون إعادة الجلب. تتولى useSWRMutation mutations التي يطلقها المستخدم صراحةً باستخدام trigger() وحالة isMutating ودعم extraArg. وتجعل التحديثات التفاؤلية باستخدام optimisticData وrollbackOnError: true واجهات المستخدم تبدو فورية مع استعادة تلقائية عند حدوث الأخطاء.

تستهدف mutate المرتبطة من useSWR مفتاحها الخاص؛ بينما تعمل mutate العامة من swr في أي مكان.