دليل تعلم Apollo GraphQL للمبتدئين

GraphQL هو الآن الخيار السائد لتطوير واجهات برمجة التطبيقات (API). يتيح للعملاء طلب البيانات التي يحتاجونها بالضبط - لا أكثر ولا أقل. هذا يغير قواعد اللعبة مقارنة بواجهات برمجة التطبيقات السابقة.

قبل GraphQL، كانت SOAP و REST dominate تطوير واجهات برمجة التطبيقات في عصور مختلفة. كانت SOAP معقدة وثقيلة للغاية، في حين أن REST حلت هذه القضايا لكنها لا تزال تواجه مشاكل في عدم تطابق البيانات. تم إنشاء GraphQL بشكل خاص لمعالجة هذه النقاط المؤلمة.

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

من خلال تبسيط منحنى التعلم لـ GraphQL، سرّع Apollo انتشارها. يلعب Apollo دورًا مهمًا في نظام GraphQL البيئي، مما يمكّن المطورين من بناء واجهات برمجة التطبيقات بشكل أكثر كفاءة.

ما هو Apollo GraphQL

Apollo هو مجموعة أدوات مصممة خصيصًا لـ GraphQL. يوفر طريقة لجمع البيانات من مصادر مختلفة وتجميعها بطريقة موحدة. مع Apollo GraphQL، يمكن للمطورين إنشاء تطبيقات فعالة وسلسة. تقوم أدواته بمعالجة المهام المعقدة والبسيطة، مما يضمن أن العمل مع GraphQL يكون تجربة سلسة من البداية إلى النهاية.

معمارية Apollo GraphQL

Apollo هي مجموعة شاملة من الأدوات والمكتبات المصممة لمساعدة المطورين على بناء وإدارة وتوسيع التطبيقات باستخدام GraphQL. من خلال تقديم حلول للعميل والخادم، تقوم Apollo بتبسيط استعلام البيانات وتعديلها، مما يجعل تطوير تطبيقات GraphQL فعالاً وصديقًا للمطورين. تشمل معمارية Apollo العميل، الخادم، والاتحاد.

عميل Apollo GraphQL

Apollo Client هو مكتبة لإدارة الحالة لجافا سكريبت تتيح لك إدارة البيانات المحلية و البعيدة باستخدام GraphQL. يندمج بسلاسة مع أي مكتبة واجهة أمامية لجافا سكريبت، مثل React أو Vue، ويسمح بالتخزين المؤقت، وتحديثات واجهة المستخدم التفاؤلية، والبيانات في الوقت الحقيقي من خلال الاشتراكات.

مثال:

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

// هذا يعد الاتصال بالخادم الخاص بك.
const client = new ApolloClient({
  uri: 'http://localhost:4000/',
  cache: new InMemoryCache()
});

خادم Apollo GraphQL

Apollo Server هو حلقة وصل بين مخطط GraphQL الخاص بك ومصادر البيانات (مثل قواعد البيانات أو واجهات برمجة التطبيقات REST). يوفر إعدادًا سهلاً، مما يجعل من السهل ربط واجهات برمجة التطبيقات، وتحديد المخطط، وكتابة وظائف المحللات.

مثال:

const { ApolloServer } = require('apollo-server');
const typeDefs = `
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => "مرحبًا بالعالم!"
  }
};
const server = new ApolloServer({ typeDefs, resolvers });
server.listen();  // هذا يبدأ الخادم الخاص بنا.

اتحاد Apollo GraphQL

الاتحاد هو ميزة من خادم Apollo GraphQL يسمح لعدة خدمات تنفيذية بترتيب رسم بياني للبيانات واحد. يسمح لك بتقسيم واجهة برمجة تطبيقات GraphQL الضخمة إلى خدمات أصغر وأكثر قابلية للصيانة دون فقدان راحة الاستعلام عن كل شيء عبر نقطة نهاية واحدة.

مزايا اتحاد GraphQL Apollo

قابلية التوسع: قم بتقسيم طبقة GraphQL الخاصة بك إلى خدمات متعددة. مع نمو فريقك أو مشروعك، يمكنك تقسيم الرسم البياني الخاص بك دون تحميل نقطة واحدة.
سرعة التطوير: يمكن للفرق العمل على خدمات فردية دون التأثير على الآخرين، مما يسمح بتكرارات أسرع.
إعادة الاستخدام: يمكن إعادة استخدام الخدمات الشائعة عبر أجزاء مختلفة من المؤسسة، مما يقلل من التكرار.
وصول موحد: بالنسبة للعميل، لا تزال نقطة نهاية واحدة فقط. لن يلاحظوا الفرق بين استعلام خدمة واحدة أو خمس خدمات.

مثال:

const { ApolloServer, gql } = require('apollo-server');
const { buildFederatedSchema } = require('@apollo/federation');

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => "مرحبًا من الخادم الموحد!"
  }
};

const server = new ApolloServer({
  schema: buildFederatedSchema([{ typeDefs, resolvers }])
});

server.listen();  // هذا يبدأ الخادم الموحد الخاص بنا.

غوص عميق في عميل Apollo GraphQL

عميل Apollo هو أداة قوية تساعد التطبيقات على التواصل مع خوادم GraphQL، مما يجعل الحصول على البيانات فعالًا ومباشرًا. يوفر حلولاً للمشاكل الشائعة، مثل التخزين المؤقت وإدارة الحالة. دعونا نتعمق أكثر.

كيف يسهل عميل Apollo GraphQL الحصول على البيانات

مع طلبات HTTP العادية، يمكن أن يكون الحصول على البيانات مملًا، حيث يتضمن إعداد نقاط النهاية وتحليل الردود. يبسط عميل Apollo هذا.

خطوات أساسية للحصول على البيانات باستخدام عميل Apollo:

الإعداد: أولاً، يجب عليك إعداد عميل Apollo بتوجيهه إلى الخادم الخاص بك.

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

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache()
});

كتابة استعلام: استخدم لغة استعلام GraphQL لتحديد البيانات التي تحتاجها.

import { gql } from '@apollo/client';
const GET_DATA = gql`
{
  myData {
    name
    age
  }
}
`;

الحصول: استخدم الاستعلام لطلب البيانات من الخادم.

client.query({ query: GET_DATA }).then(response => {
  console.log(response.data.myData);
});

ستحتوي الاستجابة على الاسم والعمر فقط، لا أكثر ولا أقل، مما يضمن نقل البيانات بشكل فعال.

إدارة الحالة المحلية باستخدام عميل Apollo

عميل Apollo GraphQL ليس فقط لبيانات الخادم؛ يمكنه إدارة البيانات المحلية أيضًا، مما يجعله مصدر الحقيقة الوحيد لجميع بيانات تطبيقك.

الحقول المحلية: أضف حقولًا فقط على جانب العميل إلى بيانات الخادم الخاصة بك.

const GET_DATA_WITH_LOCAL_FIELD = gql`
{
  myData {
    name
    age
    isFavorite @client
  }
}
`;

توجه @client تخبر عميل Apollo أن isFavorite هو حقل محلي.

المحللات المحلية: التعامل مع الإجراءات على بيانات الجانب العميل.

const resolvers = {
  Mutation: {
    toggle: (_, { id }, { cache }) => {
      const data = cache.readFragment({
        fragment: gql`fragment favorite on Data { isFavorite }`,
        id
      });
      data.isFavorite = !data.isFavorite;
      cache.writeData({ id, data });
      return data;
    },
  },
};

باستخدام المحللات، يمكنك التلاعب بالحالة المحلية تمامًا كما تفعل مع بيانات الخادم.

استراتيجيات التخزين المؤقت للأداء

الحصول على البيانات من الخادم يستغرق وقتًا، لكن التخزين المؤقت في عميل Apollo يساعد في تسريع الأمور. إليك كيف:

تخزين مؤقت تلقائي: يتم تخزين كل استجابة من خادم GraphQL الخاص بك تلقائيًا. لذا، إذا كنت تطلب نفس البيانات مرة أخرى، يمكن لعميل Apollo الحصول عليها من التخزين المؤقت بدلاً من الخادم.
تخزين مؤقت منظم: لا يقوم عميل Apollo بتخزين البيانات بشكل أعمى. إنه يكسر استجاباتك إلى كائنات فردية ويخزنها حسب النوع والمعرف. تساعد هذه المقاربة على تجنب التكرار وتحافظ على تزامن التخزين المؤقت.
سياسات التخزين المؤقت: يتيح لك عميل Apollo تحديد كيفية الحصول على البيانات من التخزين المؤقت أو الخادم أو كليهما.

مع سياسات مثل التخزين المؤقت أولاً، الشبكة فقط، والتخزين المؤقت والشبكة، يمكنك ضبط أداء تطبيقك بشكل دقيق.

إتقان خادم Apollo GraphQL

يوفر خادم Apollo بيئة قوية لمساعدة المطورين على تنفيذ خادم GraphQL. من إعداد الأساسيات إلى الغوص في الميزات المتقدمة، يعد إتقان خادم Apollo أمرًا ضروريًا لتنفيذات GraphQL الفعالة.

أساسيات إعداد خادم Apollo

تبدأ أساسيات أي مشروع خادم Apollo مع إعداده.

التثبيت: ابدأ بتثبيت الحزم المطلوبة:

npm install apollo-server graphql

تهيئة خادم Apollo GraphQL:

const { ApolloServer } = require('apollo-server');
const typeDefs = /*...*/; // تعريف المخطط الخاص بك
const resolvers = /*...*/; // وظائف المحللات الخاصة بك

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`الخادم جاهز على ${url}`);
});

تحديد مخططات GraphQL والمحلات

تحتاج كل خادم GraphQL إلى مخطط لتعريف شكل واجهة برمجة التطبيقات الخاصة به ومحلات للتعامل مع طلبات البيانات.

مخطط GraphQL: وصف هيكل بياناتك.

const { gql } = require('apollo-server');

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

المحللات: تحديد كيفية الحصول على البيانات أو تعديلها.

const resolvers = {
  Query: {
    hello: () => 'مرحبًا بالعالم!',
  },
};

عندما يرسل عميل استعلامًا للحصول على hello، سيستجيب الخادم بـ "مرحبًا بالعالم!".

النظام البيئي المتقدم لـ Apollo GraphQL

لقد تجاوز Apollo حدود كونه مجرد أداة تنفيذ GraphQL. إنه يقدم الآن نظامًا بيئيًا واسعًا يغطي ليس فقط الحصول على البيانات وإدارة الحالة ولكن أيضًا بنية الخدمات الصغيرة وأدوات التعاون للمطورين. دعونا نتعمق في بعض المكونات الأساسية لهذا النظام البيئي.

ما هو Apollo GraphQL Studio؟

Apollo Studio (المعروف سابقًا باسم Apollo Engine) هو منصة تقدمها فريق Apollo تضم مجموعة من خدمات وأدوات السحابة لتطوير وتنفيذ ومراقبة عمليات GraphQL. تم تصميم Apollo Studio للعمل جنبًا إلى جنب مع عميل Apollo وخادم Apollo ولكن يمكن أيضًا استخدامه مع أي مخطط وواجهة تنفيذ GraphQL.

ها هي جولة سريعة وبعض النقاط التي يجب مراعاتها:

إعداد وتنفيذ الاستعلام:

يعد محرر العمليات هو المنطقة الرئيسية حيث يمكنك مسودة طلبات GraphQL، والتعديلات، أو الاشتراكات.

في قسم "المتغيرات"، أدخل التفاصيل اللازمة، مثل {"code": "AF"}، وقم بتعديلها حسب الحاجة للاستعلامات المحددة.
إذا كان استعلامك يتطلب رؤوس HTTP (على سبيل المثال، للمصادقة)، فقم بملؤها في قسم "الرؤوس"، ثم ابدأ استعلامك باستخدام زر التشغيل أو أمر تنفيذي مشابه.

تفسير الاستجابة:

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

استكشاف المخططات:

تعرّف على مخطط GraphQL باستخدام علامة "التوثيق" على اليسار؛ والتي تسرد الاستعلامات المتاحة، والتعديلات، والأنواع.
توفر هذه الوثائق رؤى حول الحقول، والوسائط المتوقعة، وأنواع العودة.
استفد من ميزة الإكمال التلقائي في المحرر، والتي تقدم اقتراحات بناءً على المخطط، مما يجعل صياغة الاستعلامات أسرع.

ميزات إضافية:

تسمح لك ميزة "التاريخ" في Apollo Studio بإعادة زيارة وتنفيذ الاستعلامات السابقة، مما يساعد في الاختبار التكراري.
بينما يمكنك صياغة وحفظ استعلامات/تعديلات متعددة في علامة واحدة، تذكر أن تقوم بتنفيذها واحدًا تلو الآخر، وهو أمر مفيد بشكل خاص عند وجود الاستعلامات التي تعتمد على بعضها البعض.

التكامل مع Apidog

Apidog يُعزز تجربة GraphQL من خلال التكامل بسلاسة مع ميزة تصحيح الأخطاء. يضمن هذا التكامل أن يتمكن المطورون من تحديد المشاكل بدقة وحلها ضمن تنفيذاتهم لـ GraphQL بكفاءة.

نشجع المطورين والفرق على استكشاف وتجربة مجموعة ميزات Apidog. من خلال تجربة Apidog، يمكن للمستخدمين الاستفادة من طبقة إضافية من الأدوات والرؤية، مما يعزز جهود تطوير واختبار GraphQL الخاصة بهم.

الخاتمة

في الختام، لقد أخذتك هذه المقالة عبر الميزات الثورية لـ GraphQL والقدرات القوية لـ Apidog. سواء كنت مطورًا متمرسًا أو جديدًا في اختبار واجهات برمجة التطبيقات، يمكن للأدوات والرؤى التي تقدمها GraphQL و Apidog مساعدتك في بناء تطبيقات أكثر قوة وموثوقية. جرب Apidog اليوم!