Vue Academy · درس

إعداد Apollo Client في Vue 3

‏ApolloClient وInMemoryCache وprovideApolloClient()، وإعداد @vue/apollo-composable

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

GraphQL مع Vue

يتيح GraphQL للعميل طلب البيانات التي يحتاج إليها بالضبط في طلب واحد. ويُعد Apollo Client عميل GraphQL الأكثر شيوعًا، بينما تدمجه @vue/apollo-composable مع Composition API في Vue 3.

تثبيت الحزم

تحتاج إلى نواة Apollo ومحلل GraphQL وطبقة composable الخاصة بـ Vue.

npm install @apollo/client graphql @vue/apollo-composable

إنشاء العميل

يحتاج عميل Apollo إلى uri للخادم وإلى ذاكرة تخزين مؤقت. يخزن InMemoryCache نتائج الاستعلامات، مما يجعل القراءات المتكررة فورية.

import { ApolloClient, InMemoryCache } from '@apollo/client/core'

const apolloClient = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache()
})

وظيفة ذاكرة التخزين المؤقت

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

توفير العميل

سجّل العميل على مستوى التطبيق حتى يتمكن كل مكون من تشغيل الاستعلامات. ويربط مفتاح الحقن DefaultApolloClient العميل بـ Composition API.

import { DefaultApolloClient } from '@vue/apollo-composable'
import { createApp, provide, h } from 'vue'

const app = createApp({
  setup() {
    provide(DefaultApolloClient, apolloClient)
    return () => h(App)
  }
})

عملاء متعددون

عند استخدام عدة نقاط نهاية لـ GraphQL، وفّر خريطة ApolloClients وسمِّ كل عميل. ويمكن للمكونات اختيار أحدها عبر الخيار clientId.

import { ApolloClients } from '@vue/apollo-composable'

provide(ApolloClients, {
  default: apolloClient,
  analytics: analyticsClient
})

provideApolloClient

خارج setup الخاص بمكون — مثلًا داخل composable — استخدم provideApolloClient لإتاحة العميل لاستدعاءات useQuery.

import { provideApolloClient } from '@vue/apollo-composable'

provideApolloClient(apolloClient)
// now useQuery works in this composable

إضافة ترويسات المصادقة

تحتاج واجهات API الحقيقية إلى رمز مصادقة. اضبط headers في خيارات العميل، أو استخدم رابط Apollo لإرفاق الرمز بكل طلب.

const apolloClient = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  headers: {
    Authorization: 'Bearer ' + token
  }
})

ضبط الخيارات الافتراضية

يضبط الحقل defaultOptions سلوكًا مثل سياسة الجلب الافتراضية — كأن يقرأ التطبيق من ذاكرة التخزين المؤقت أولًا دائمًا.

const apolloClient = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: { fetchPolicy: 'cache-and-network' }
  }
})

كتابة أول استعلام لك

عرّف استعلامًا باستخدام وسم القالب gql من @apollo/client/core. فهو يحلل سلسلة GraphQL إلى مستند يفهمه Apollo.

import { gql } from '@apollo/client/core'

const GET_POSTS = gql(
  'query { posts { id title } }'
)

التحقق من الإعداد

بعد توفير العميل، يمكن لأي مكون استدعاء useQuery باستخدام ذلك المستند. فإذا عادت البيانات، فهذا يعني أن إعداد العميل وموفّر الخدمة صحيحان.

اختبار سريع

اختبر معرفتك بإعداد Apollo.

مراجعة

لقد أعددت Apollo في Vue 3:

أنشئ ApolloClient باستخدام uri وInMemoryCache.
تطبّع ذاكرة التخزين المؤقت النتائج حسب معرّف الكيان.
وفّره باستخدام DefaultApolloClient (أو ApolloClients عند استخدام عدة عملاء).
استخدم provideApolloClient داخل composables، وعرّف الاستعلامات باستخدام gql.

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

هل درس «إعداد Apollo Client في Vue 3» مجاني؟

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

ماذا ستتعلم في «إعداد Apollo Client في Vue 3»؟

‏ApolloClient وInMemoryCache وprovideApolloClient()، وإعداد @vue/apollo-composable تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «إعداد Apollo Client في Vue 3»؟

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

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

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

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

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

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