برنامج GraphQL التعليمي للمبتدئين: ما هو وميزاته ومثال عليه

ما هو GraphQL؟

GraphQL هي تقنية من جانب الخادم لطبقة التطبيقات تم تطويرها بواسطة Facebook لتنفيذ الاستعلامات باستخدام البيانات الموجودة. يمكن لـ GraphQL تحسين مكالمات RESTful API. إنه يوفر طريقة تعريفية لجلب بياناتك وتحديثها. يساعدك GraphQL على تحميل البيانات من الخادم إلى العميل. فهو يمكّن المبرمجين من اختيار أنواع الطلبات التي يرغبون في تقديمها.

لماذا نستخدم GraphQL؟

فيما يلي أسباب استخدام GraphQL:

  • إنه يوفر استعلامًا قابلاً للقراءة من قبل الإنسان.
  • في GraphQL، من السهل جدًا التعامل مع العديد من قواعد البيانات.
  • فهو مناسب للخدمات المصغرة والأنظمة المعقدة.
  • يمكنك جلب البيانات من خلال استدعاء API واحد.
  • يساعدك في تجميع الاستعلامات والتخزين المؤقت.
  • أنت لا تواجه مشاكل أو تزيد أو تحت الجلب.
  • طلبات الخياطة لاحتياجاتك.
  • يساعدك على اكتشاف المخطط بالتنسيق المناسب.
  • تحافظ GraphQL تلقائيًا على مزامنة الوثائق مع تغييرات واجهة برمجة التطبيقات.
  • تطور واجهة برمجة التطبيقات (API) ممكن بدون إصدار.
  • تُستخدم حقول GraphQL في استعلامات متعددة يمكن مشاركتها مع مستوى مكون أعلى لإعادة استخدامها.
  • يمكنك اختيار الوظائف التي تريد كشفها وكيفية عملها.
  • ويمكن استخدامه للنماذج الأولية للتطبيق السريع.

تطبيقات GraphQL

فيما يلي التطبيقات المهمة لـ GraphQL:

  • ويوفر التتابع وأطر العميل الأخرى
  • يساعدك GraphQL على تحسين أداء تطبيق الهاتف المحمول.
  • يمكن أن يقلل من مشكلة الجلب الزائد لتقليل الخدمة السحابية من جانب الخادم وتقليل استخدام الشبكة من جانب العميل.
  • يمكن استخدامه عندما يتعين على تطبيق العميل تحديد الحقول المطلوبة بتنسيق استعلام طويل.
  • يمكن استخدام GraphQL بشكل كامل عندما يتعين عليك إضافة وظائف إلى واجهة برمجة التطبيقات القديمة أو الموجودة لديك.
  • يتم استخدامه عندما يتعين عليك تبسيط واجهة برمجة التطبيقات المعقدة.
  • نمط واجهة المزيج والمزج، والذي يستخدم بشكل شائع في البرمجة الموجهة للكائنات.
  • عندما يتعين عليك تجميع البيانات من أكثر من مكان في واجهة برمجة تطبيقات واحدة ملائمة.
  • يمكنك استخدام GraphQL كتجريد لواجهة برمجة التطبيقات (API) الموجودة لتحديد بنية الاستجابة بناءً على احتياجات المستخدم.

ما الذي تحتاج إلى تعلمه قبل تعلم GraphQl؟

يعتمد هذا البرنامج التعليمي GraphQL على اكسبريس و NodeJs. لذلك، يمكنك تعلم GraphQL بسهولة شديدة من خلال الفهم الأساسي لـ NodeJS.

المكونات الرئيسية لـ GraphQL

الآن في هذا البرنامج التعليمي GraphQL، دعونا نتعلم المكونات الرئيسية لـ GraphQL:

المكونات الرئيسية لـ GraphQL
المكونات الرئيسية لـ GraphQL

كما هو موضح في الشكل أعلاه، هناك ثلاثة مكونات رئيسية لـ GraphQL: 1) الاستعلام، 2) المحلل، و3) المخطط.

سؤال

الاستعلام هو طلب API تم إجراؤه بواسطة تطبيق جهاز العميل. وهو يدعم الزيادات ويشير إلى المصفوفات. يتم استخدام الاستعلام لقراءة أو جلب القيم.

أجزاء الاستعلام:

فيما يلي الأجزاء المهمة من الاستعلام

  1. حقل:

يشير الحقل ببساطة إلى أننا نطلب من الخادم معلومات معينة. فيما يلي مثال لحقل في استعلام GraphQL في GraphQL.

query {
    team {
        id name
    }
}

"data": {
    "team":[ {
        "id": 1, 
        "name": "Avengers"
    }
    ,
    …
]
}
}

في مثال GraphQL أعلاه، نطلب من الخادم الحقل المسمى الفريق وحقوله الفرعية مثل المعرف والاسم. يقوم خادم GraphQL بإرجاع البيانات التي طلبناها.

  1. الحجج

In REST، يمكننا فقط تمرير مجموعة واحدة من الوسائط كأجزاء URL ومعلمات استعلام. للحصول على ملف تعريف معين، ستبدو مكالمة REST النموذجية على النحو التالي:

GET /api'team?id=2 Content-Type: application JSON
 {
    "id": 2, 
    "name": "Justice League."
}

حل

توفر أدوات التحليل التوجيهات لتحويل عملية GraphQL إلى بيانات. فهي تحل الاستعلام إلى بيانات من خلال تعريف وظائف أداة التحليل.

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

مخطط

مخطط GraphQL هو مركز تنفيذ GraphQL. فهو يصف الوظائف المتاحة للعملاء المتصلين بها.

مميزات برنامج GraphQL

فيما يلي ميزات مهمة لـ GraphQL:

  • فهو يوفر لغة استعلام تعريفية، وهي ليست ضرورية.
  • فهو هرمي ويركز على المنتج.
  • GraphQL هو نوع قوي. وهذا يعني أن الاستعلامات يتم تنفيذها في سياق نظام معين.
  • يتم ترميز الاستعلامات في GraphQL في العميل، وليس في الخادم.
  • يحتوي على جميع ميزات طبقة التطبيق لنموذج OSI.

عملاء GraphQL

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

هذه Javaتم تطوير مكتبة البرامج النصية بواسطة Facebook لإنشاء تطبيقات React باستخدام GraphQL. يمكن أن يكون عملاء GraphQL عبارة عن نظام إدارة محتوى مثل Drupal أو تطبيق صفحة واحدة أو تطبيق جوال وما إلى ذلك.

خوادم GraphQL

خوادم GraphQL هي تطبيق من جانب الخوادم لمواصفات GraphQL. فهو يصور بياناتك على أنها GraphQL API، والتي يمكن لبرنامج العميل الخاص بك الاستعلام عنها قاعدة بيانات.

بوابات GraphQL

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

ما هو المتغير في GraphQL؟

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

لدى GraphQL طريقة جيدة لتحليل القيم الديناميكية من الاستعلام. فهي تمررها كقاموس منفصل. تُعرف هذه القيم باسم المتغيرات. كلما عملنا مع المتغيرات، نحتاج إلى القيام بالأمور الثلاثة التالية:

  1. استبدل القيمة الثابتة في الاستعلام باسم متغير.
  2. قم بتعريف اسم المتغير كأحد المتغيرات المقبولة بواسطة استعلام GraphQL.
  3. قم بتمرير القيمة في قاموس المتغيرات الخاص بالنقل.

إليك ما يبدو معًا:

query HeroNameAndFriends($episode: Episode) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}
{
  "episode": "JEDI"
}
{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

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

ما هي الطفرة؟

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

نقاط يجب مراعاتها أثناء تصميم طفرات GraphQL

فيما يلي النقاط المهمة أثناء تصميم GraphQL:

  • التسمية: أولا وقبل كل شيء، عليك تسمية الفعل الطفرات الخاص بك. ثم الاسم أو "الكائن" إن أمكن. استخدم CamelCase أثناء تسمية الطفرات.
  • النوعية: عليك أن تجعل طفرة محددة قدر الإمكان. يجب أن تمثل الطفرات الإجراءات الدلالية التي اتخذها المستخدم.
  • كائن الإدخال: استخدم نوع كائن إدخال واحدًا وفريدًا ومطلوبًا كوسيطة لتنفيذ الطفرة على العميل.
  • نوع الحمولة الفريدة: يجب عليك استخدام نوع حمولة فريد لكل طفرة. يمكنك أيضًا إضافة مخرجات الطفرة كحقل إلى نوع الحمولة النافعة هذا.
  • التعشيش: استخدم التعشيش مع طفرتك أينما كان ذلك منطقيًا. يسمح لك بالاستفادة الكاملة من GraphQL API.

الفرق بين GraphQL و REST

الجدول التالي يوضح الفرق المهم بين GraphQL وREST.

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

عيوب GraphQL

فيما يلي عيوب GraphQL:

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

التطبيقات والأدوات مفتوحة المصدر المستخدمة بواسطة GraphQL

التطبيقات والأدوات المهمة مفتوحة المصدر التي يستخدمها GraphQL هي كما يلي:

  • غاتسبي: Gastby هو تطبيق مدعوم من GraphQL يمكنه استخدام البيانات المشتقة من أكثر من مصدر GraphQL API. يمكنك استخدامه لتطوير تطبيق React ثابت ومعتمد على العميل.
  • GraphiQL: إنه معرف يتكامل مع المتصفح ويتفاعل أيضًا مع واجهة برمجة تطبيقات GraphQL. بعض الوظائف التي يتضمنها GraphiQL هي الطفرات والاستعلام عن البيانات واستعلامات الإكمال التلقائي.
  • ملعب GraphQL: إنه IDE قوي يحتوي على محرر مدمج للتعامل مع الطفرات والتحقق من الصحة واستعلامات GraphQl والاشتراكات وما إلى ذلك. يمكن للمطور استخدام IDE هذا لتصور بنية المخطط.
  • بريزما: Prisma هي طبقة تجريد قاعدة البيانات التي تقوم بتحويل قواعد البيانات الخاصة بك إلى واجهات برمجة تطبيقات GraphQL باستخدام عمليات CRUD (إنشاء وقراءة وتحديث وحذف).
  • قطعة: إنها أداة مفتوحة المصدر ونظام أساسي يحول التعليمات البرمجية القابلة لإعادة الاستخدام إلى مكونات. يمكن للمطورين استخدامها لمشاركة وتطوير المشاريع المختلفة.

ملخص

  • GraphQL عبارة عن تقنية من جانب الخادم لطبقة التطبيقات تم تطويرها بواسطة Facebook لتنفيذ الاستعلامات باستخدام البيانات الموجودة.
  • يمكنك استخدام GraphQL لجلب البيانات من خلال استدعاء API واحد.
  • يساعدك GraphQL على تحسين أداء تطبيق الهاتف المحمول.
  • مكونات استعلام GraphQL المهمة هي: 1) الاستعلام، 2) المحلل، 3) المخطط.
  • GraphQL هو نوع قوي. وهذا يعني أن الاستعلامات يتم تنفيذها في سياق نظام معين.
  • عميل GraphQL هو رمز يقدم طلبات POST إلى خادم GraphQL ذي الصلة.
  • خوادم GraphQL هي تطبيق من جانب الخوادم لمواصفات GraphQL.
  • البوابة عبارة عن نمط خدمة صغيرة حيث يمكنك إنشاء خدمة منفصلة للتعامل مع الخدمات الخلفية الأخرى.
  • لدى GraphQL طريقة واحدة جيدة لتحليل القيم الديناميكية من الاستعلام.
  • الطفرة هي طريقة لتغيير مجموعة البيانات في GraphQL.
  • النقاط المهمة أثناء تصميم GraphQL هي: 1) التسمية، 2) الخصوصية، 3) نوع الحمولة الفريد لكائن الإدخال، و4) التداخل.
  • يمكن تنظيم GraphQL من حيث المخطط، في حين يمكن تنظيم REST من حيث نقاط النهاية.
  • عيب GraphQL هو أنه يفتقر إلى الموارد في الجزء الخلفي.

تلخيص هذه التدوينة بـ: