useMutation useMutation لعمليات الكتابة

آخر تحديث: 2026-11-03

useMutation useMutation لعمليات الكتابة

يدير useMutation الحالة غير المتزامنة لعمليات الكتابة (POST وPUT وDELETE): تُطلق mutate الطلب، ويبلّغان isPending وisError عن التقدّم، وonSuccess يُبطل الاستعلامات ذات الصلة فتتحدّث القائمة تلقائيًا. لا يخزّن بيانات، بل يدير هذا الإرسال وحده. وهذا تقاسم العمل هو ما يجعل query وmutation زوجًا طبيعيًا. ويمكن تمرير ردود نداء لكل استدعاء، فيخدم Hook واحد عدة نماذج بلا مشاركة حالتها.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

import { useMutation, useQueryClient } from '@tanstack/react-query'

const qc = useQueryClient()
const mutation = useMutation({
  mutationFn: newTodo => fetch('/api/todos', {
    method: 'POST',
    body: JSON.stringify(newTodo)
  }).then(r => r.json()),
  onSuccess: () => {
    qc.invalidateQueries({ queryKey: ['todos'] })  // the list turns stale -> it refetches itself
  }
})

mutation.mutate({ title: 'New task' })   // fire the submission

⚙️ المعاملات

القيمة المرجعة：يُعيد { mutate, isPending, isError, data, error }: mutate(variables) يُطلق الطلب (لا يُعيد Promise)، بينما mutateAsync يُعيد Promise.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

يتحوّل زر الإرسال إلى «جارٍ الحفظ» ويُعطّل ثانية واحدة، ثم تكسب القائمة عنصرًا ويظهر تنبيه نجاح — السريان الكامل لـ mutate وisPending وonSuccess (عرض توضيحي محاكى).

💡 النقاط الأساسية

🏷️ المزيد من البيانات والهندسة

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن