Vue Academy · درس

‏useMutation لتغيير البيانات

‏useMutation(MUTATION) وmutate()، واستراتيجيات تحديث Cache، والاستجابات التفاؤلية

‏useMutation لتغيير البيانات درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

تغيير البيانات باستخدام الطفرات

تقرأ الاستعلامات البيانات، بينما تغيّرها mutations — بالإنشاء والتحديث والحذف. وينفذ composable المسمى useMutation طفرة GraphQL، ويمنحك دالة mutate لاستدعائها عندما تكون مستعدًا.

الاستخدام الأساسي لـ useMutation

مرّر مستند الطفرة. وعلى خلاف useQuery، لا تعمل هذه الدالة فورًا، بل تعيد دالة mutate تستدعيها عند وقوع حدث.

import { useMutation } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'

const { mutate } = useMutation(gql(
  'mutation { addPost { id } }'
))

تشغيل Mutation

استدعوا mutate() من معالج أحداث، مثل إرسال نموذج. وهي تعيد Promise تُحلّ بالنتيجة.

async function submit() {
  await mutate()
}

تمرير المتغيرات

مرّروا كائنًا من المتغيرات إلى mutate. ويعلن مستند mutation عنها باستخدام الصيغة $.

const { mutate } = useMutation(gql(
  'mutation($title: String!) { addPost(title: $title) { id title } }'
))
function add(title) {
  return mutate({ title })
}

التحميل والخطأ

تعيد useMutation أيضًا مرجعي loading وerror التفاعليين، حتى تتمكنوا من تعطيل زر الإرسال وعرض حالات الفشل.

<template>
  <button :disabled="loading" @click="submit">Save</button>
  <p v-if="error">{{ error.message }}</p>
</template>

التفاعل مع النجاح

يُشغَّل hook onDone بعد نجاح mutation — يمكنكم مسح النموذج، أو عرض إشعار، أو الانتقال إلى صفحة أخرى.

const { mutate, onDone } = useMutation(ADD_POST)
onDone((res) => {
  console.log('Created', res.data.addPost.id)
})

تحديث ذاكرة التخزين المؤقت

بعد تنفيذ mutation، قد تصبح ذاكرة Apollo المؤقتة قديمة. تتيح لكم دالة update تعديل ذاكرة التخزين المؤقت مباشرةً، بحيث تعكس واجهة المستخدم التغيير من دون إعادة جلب البيانات.

useMutation(ADD_POST, {
  update(cache, { data }) {
    const existing = cache.readQuery({ query: GET_POSTS })
    cache.writeQuery({
      query: GET_POSTS,
      data: { posts: [...existing.posts, data.addPost] }
    })
  }
})

لماذا تتفوق update على إعادة الجلب

تتجنب update الخاصة بذاكرة التخزين المؤقت جولةً إضافية عبر الشبكة. ويظهر العنصر الجديد فورًا لأنكم كتبتموه في ذاكرة التخزين المؤقت التي تقرأ منها كل استدعاءات useQuery.

إعادة جلب الاستعلامات بدلًا من ذلك

إذا كان تعديل ذاكرة التخزين المؤقت يدويًا معقدًا، فاستخدموا refetchQueries لإعادة تشغيل استعلامات محددة بعد اكتمال mutation.

useMutation(ADD_POST, {
  refetchQueries: [{ query: GET_POSTS }]
})

الاستجابات المتفائلة

تحدّث optimisticResponse واجهة المستخدم قبل أن يرد الخادم، بافتراض نجاح الطلب. وإذا فشل الطلب، يعيد Apollo التغيير تلقائيًا.

mutate(
  { title: 'New' },
  {
    optimisticResponse: {
      addPost: { __typename: 'Post', id: 'temp', title: 'New' }
    }
  }
)

لماذا تهم واجهة المستخدم المتفائلة

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

اختبار سريع

اختبروا معرفتكم بعمليات mutation.

مراجعة

تعلّمتم عمليات mutation:

تعيد useMutation دالة mutate التي تستدعونها عند وقوع الأحداث.
مرّروا المتغيرات إلى mutate()، واستخدموا loading وerror وonDone.
تعدّل دالة update ذاكرة التخزين المؤقت بعد تنفيذ mutation، مما يلغي الحاجة إلى إعادة الجلب.
تحدّث optimisticResponse واجهة المستخدم فورًا مع التراجع التلقائي عن التغيير.

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

هل درس «‏useMutation لتغيير البيانات» مجاني؟

نعم — نص درس «‏useMutation لتغيير البيانات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏useMutation لتغيير البيانات»؟

‏useMutation(MUTATION) وmutate()، واستراتيجيات تحديث Cache، والاستجابات التفاؤلية تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «‏useMutation لتغيير البيانات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

إعداد Apollo Client في Vue 3
‏useQuery لجلب البيانات
‏useMutation لتغيير البيانات
الاشتراكات الفورية باستخدام useSubscription

← العودة إلى Vue Academy