Vue Academy · درس

‏useQuery لجلب البيانات

‏useQuery(QUERY)، وresult وloading وerror وvariables، وخيارات fetchPolicy

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

تنفيذ الاستعلامات باستخدام useQuery

ينفذ composable المسمى useQuery استعلام GraphQL ويعيد حالة تفاعلية. ويعيد الجلب تلقائيًا عند تغير المتغيرات، كما يحدّث النتيجة عند تغير ذاكرة التخزين المؤقت.

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

مرّر مستند gql. ويعيد useQuery مراجع result وloading وerror.

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

const { result, loading, error } = useQuery(gql(
  'query { posts { id title } }'
))

قراءة النتيجة

إن result عبارة عن ref. يمكنك الوصول إلى البيانات عبر result.value، إذ يحتوي على استجابة الاستعلام بالبنية نفسها تمامًا التي يحددها الاستعلام.

const posts = computed(() => result.value?.posts ?? [])

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

استخدم loading لعرض مؤشر تحميل، وerror لعرض رسالة. وكلاهما مراجع تفاعلية تتحدث مع تقدم الطلب.

<template>
  <p v-if="loading">Loading...</p>
  <p v-else-if="error">{{ error.message }}</p>
  <ul v-else>
    <li v-for="p in posts" :key="p.id">{{ p.title }}</li>
  </ul>
</template>

متغيرات الاستعلام

مرّر المتغيرات كوسيط ثانٍ. ويُعاد تشغيل الاستعلام كلما تغيرت قيمة أحد المتغيرات.

const { result } = useQuery(
  gql('query($id: ID!) { post(id: $id) { title } }'),
  { id: 1 }
)

متغيرات تفاعلية

بالنسبة إلى المتغيرات الديناميكية، مرّر دالة تعيد كائن المتغيرات، أو مرّر ref تفاعليًا. وعندما تتغير قيمة ref مُشار إليها، يعيد الاستعلام الجلب تلقائيًا.

const id = ref(1)
const { result } = useQuery(
  gql('query($id: ID!) { post(id: $id) { title } }'),
  () => ({ id: id.value })
)

خطاف onResult

يُستدعى onResult في كل مرة تصل فيها بيانات جديدة — وهو مفيد للآثار الجانبية مثل التحليلات أو المزامنة مع مخزن آخر.

const { onResult } = useQuery(QUERY)
onResult((res) => {
  console.log('Got', res.data)
})

إعادة الجلب يدويًا

يعيد useQuery دالة refetch لإعادة تشغيل الاستعلام عند الطلب — بعد تغيير خارجي أو النقر على زر التحديث.

const { result, refetch } = useQuery(QUERY)
function reload() { refetch() }

ترقيم الصفحات باستخدام fetchMore

يحمّل fetchMore صفحات إضافية ويدمجها في النتيجة الحالية باستخدام updateQuery — وهو الأساس للتمرير اللانهائي.

const { result, fetchMore } = useQuery(QUERY, { offset: 0 })
function loadMore() {
  fetchMore({
    variables: { offset: result.value.posts.length },
    updateQuery: (prev, { fetchMoreResult }) => ({
      posts: [...prev.posts, ...fetchMoreResult.posts]
    })
  })
}

سياسات الجلب

يتحكم الخيار fetchPolicy في استخدام ذاكرة التخزين المؤقت: يقرأ cache-first (الافتراضي) منها قبل الشبكة، ويتصل network-only بالخادم دائمًا، ويعرض cache-and-network البيانات المخزنة مؤقتًا ثم يحدّثها.

useQuery(QUERY, null, {
  fetchPolicy: 'cache-and-network'
})

استعلامات مشروطة

استخدم الخيار enabled لتأخير الاستعلام حتى يتحقق شرط معين — مثل عدم الجلب قبل اختيار معرّف.

const id = ref(null)
useQuery(QUERY, () => ({ id: id.value }), {
  enabled: computed(() => id.value !== null)
})

اختبار سريع

اختبر معرفتك بـ useQuery.

مراجعة

لقد تعلمت useQuery:

يعيد result وloading وerror تفاعلية.
اقرأ البيانات عبر result.value.
مرّر المتغيرات ككائن أو دالة لضمان التفاعلية.
تعيد refetch() التشغيل، ويجلب fetchMore() صفحات إضافية، بينما يتحكم fetchPolicy في استخدام ذاكرة التخزين المؤقت.

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

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

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

ماذا ستتعلم في «‏useQuery لجلب البيانات»؟

‏useQuery(QUERY)، وresult وloading وerror وvariables، وخيارات fetchPolicy تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

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

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

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

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

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

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

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