مدينة الحندية

GraphQL 101: إليك كل ما تحتاج إلى معرفته حول GraphQL

June 11, 2020

دقيقة

جدول المحتوى

مثال H2

API أو واجهة برنامج التطبيق هي مجموعة من البروتوكولات والأوامر والوظائف التي يتم استخدامها لإنشاء برامج التطبيقات ودمجها. في الأساس، API هي الوسيط الذي يمكّن تطبيقين من الاتصال. ولسنوات، تم التعرف على REST API كبروتوكول قياسي لواجهات برمجة تطبيقات الويب. ومع ذلك، هناك اتجاه واضح يمكن أن يقلب هذا الميل نحو REST API. تقرير حالة جافا سكريبت 2018 وجد أنه من بين المطورين الذين تم استطلاع آرائهم في عام 2016، استخدم 5٪ فقط GraphQL. بينما في عام 2018، ارتفعت الأرقام بسرعة إلى 20.4٪. على الرغم من أن هذه الأرقام لا تمثل تفضيل GraphQL على REST API، فإن هذا يشير بوضوح إلى النمو الكبير في عدد المطورين الذين يختارون GraphQL في تطبيقات الويب.

في سلسلة من جزأين حول GraphQL، نناقش الموضوعات التالية:

مقدمة إلى GraphQL
غرافكيو إل مقابل ريست
جلب البيانات التعريفية لـ GraphQL
GraphQL: التكوينات الخاطئة الشائعة التي تمكّن المتسللين
اختبار التكوينات الخاطئة الشائعة في GraphQL

في هذا الجزء، نستكشف:

ما هي جرافكيو إل؟
كيفية التعرف على مثيل GraphQL؟
كيفية تكوين خادم GraphQL؟
الأنواع الجذرية لمخطط GraphQL
GraphQL مقابل REST (تركز على جلب البيانات)
GraphQL: جلب البيانات على نحو سلس وإعلاني

مقدمة إلى GraphQL

ما هي جرافكيو إل؟

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

تم تطويره بواسطة Facebook في عام 2012 وتم إصداره لاحقًا علنًا في عام 2015. اليوم، يتم اعتماد GraphQL بسرعة من قبل العملاء، الكبار والصغار، من جميع أنحاء العالم. تستخدم مواقع الويب البارزة وتطبيقات الأجهزة المحمولة مثل Facebook و Twitter و GitHub و Pinterest و Airbnb وما إلى ذلك GraphQL.

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

GraphQL resolver

تسمح GraphQL لمطوري الواجهة الأمامية باسترداد البيانات من الواجهة الخلفية بسهولة لا مثيل لها، وهو ما يفسر سبب وصفها عمومًا بتقنية Frontend Directed API. من الواضح أنها أكثر كفاءة وقوة ومرونة، وهي بديل أفضل لـ REST API.

كيفية التعرف على مثيل GraphQL؟

عادةً ما يتم إرسال طلب GraphQL HTTP إلى نقاط النهاية التالية:
- /رسم بياني
- /الرسوم/وحدة التحكم
- /رسومي

يبدو طلب GraphQL مشابهًا لـ JSON ولكنه مختلف، كما هو موضح في الطلب التالي:

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

كيفية تكوين خادم GraphQL؟

يمكننا تشغيل خادم GraphQL API على المضيف المحلي باستخدام Express، وهو إطار تطبيق ويب لـ Node.js.

لهذا، بعد تثبيت «npm»، تابع تثبيت تبعيتين إضافيتين يمكن القيام بهما باستخدام الأمر التالي:

npm install إكسبريس جراف-غرافال --save

لمزيد من وضوح المفهوم، هذه هي الطريقة التي نجلب بها بيانات «hello world» من خادم GraphQL باستخدام استعلام.

سيارة اكسبريس = تتطلب(«إكسبرس»)؛

سيارة الرسم البياني QLhttp = تتطلب(«الرسم السريع»)؛


سيارة { مخطط البناء } = تتطلب(«رسم بياني»)؛

//إنشاء مخطط باستخدام لغة مخطط GraphQL

سيارة مخطط = مخطط البناء(`

 اكتب الاستعلام {

 مرحبا: سلسلة

 }

`)؛

//يوفر الجذر وظيفة محلل لكل نقطة نهاية لواجهة برمجة التطبيقات

سيارة الجذر = {

 مرحبا: () => {

    رجوع «مرحبًا بالعالم!»؛

  }،

}؛

سيارة التطبيق = أعرب()؛

التطبيق.استخدام('رسومي'، الرسم البيانيQLHTTP({

 مخطط: مخطط،

 قيمة الجذر: جذر،

 تصويري: صحيح،

}))؛

التطبيق.استمع(4000)؛

وحدة التحكم.خشبة(«تشغيل خادم واجهة برمجة تطبيقات GraphQL على http://localhost:4000/graphql»)؛

احفظ الكود التالي باسم GraphQL_Server.js.
الآن، قم بتشغيل خادم GraphQL هذا باستخدام:

عقدة GraphQL_Server.js

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

انتقل إلى نقطة النهاية http://locahost:4000/graphql في متصفح الويب حيث ستصادف واجهة GraphQL. يمكنك الآن إدخال استفساراتك هنا.
بمجرد إصدار الاستعلام «hello»، فإنه يجلب البيانات التالية من الخادم:

الأنواع الجذرية لمخطط GraphQL

يحتوي مخطط GraphQL على ثلاثة أنواع جذرية. يجب أن تبدأ الطلبات مقابل نقطة نهاية GraphQL بأي من أنواع الجذر هذه أثناء الاتصال بالخادم:

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

GraphQL Subscription

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

غرافكيو إل مقابل ريست

يساعد كل من REST و GraphQL المطورين على تصميم أداء واجهات برمجة التطبيقات والعملية التي ستتمكن التطبيقات من خلالها من الوصول إلى البيانات منها. يرسلون البيانات عبر HTTP. ومع ذلك، هناك بعض الاختلافات بينهما والتي تثبت أن GraphQL متفوقة.

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

في REST API، يتم إرسال طلبات متعددة في نقاط نهاية متعددة لجلب البيانات المحددة أو الخاصة من الخادم. على سبيل المثال، من أجل جلب معرف المستخدم، ومشاركاته على منصة التواصل الاجتماعي، ومتابعيه على نفس القناة، يتعين علينا إرسال طلبات متعددة في نقطة النهاية باستخدام المسار الصحيح مثل /المستخدم/ <id>، /المستخدمون/المعرف/ <posts>، و /المستخدمون/المعرف/ <followers> على التوالي، فقط للحصول على ردود متعددة بخصوص نفس الشيء.

REST API multiple endpoints

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

جلب البيانات على نحو سلس وإعلاني

في حالة REST API المذكورة أعلاه، رأينا أنه تم تقديم 3 طلبات في 3 نقاط نهاية مختلفة لاسترداد الاستجابة المقابلة من الخادم. ولكن في GraphQL، هذه العملية أسهل نسبيًا. إن الاستعلام الذي يتضمن متطلبات البيانات الدقيقة مثل المعرفات والمشاركات والمتابعين في نقطة نهاية واحدة سيؤدي المهمة.

دعونا نلقي نظرة على الاستعلام الذي تم إرساله إلى الخادم لجلب معرف المستخدم والمشاركات والمتابعين:

GraphQL endpoint

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

تعتبر الاختلافات بين REST و GraphQL مهمة جدًا ويمكن فهمها أثناء مقارنة أدائها.

Difference between GraphQL and REST API

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

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