لغة الاستعلام GraphQL

مفاهيم GraphQL :

خلال تصفحك للمواقع والمقالات التقنية قد يكون مر عليك مصطلح GraphQL , في هذا المقال ساقوم بتوضيح بعض المفاهيم الاساسية المتعلقة بهذه التقنية ومقارنتها ب REST لمزيد من الايضاح :arrow_down:
graphql

ولكن اولا لنوضح كيف يتم تبادل البيانات بين التطبيقات وبين الخادم ؟ :thinking:

كل تطبيق او موقع يقوم بمهمة محددة لا بد له من مصدر لجلب البيانات اللازمة لعمل التطبيق وايضا للقيام بعمليات المعالجة والحفظ , هذا المصدر يتمثل في الواجهة البرمجية الخلفية التي يتم تبادل البيانات بينها وبين المستخدمين باستخدام تقنيات عديدة اكثرها شيوعا هي تقنية REST.

ما الذي تقوم به REST ؟

هي خدمة برمجية تعمل في الخادم اهم ميزاتها هي سهولة الاستخدام . تتلخص مهمتها الاساسسية في توفير الموارد resources واتاحة الوصول لها عن طريق روابط http اعتياديه بحيث يتيح كل url الوصول لموارد معينه على الخادم, كما يمكن انشاء وتعديل وحذف الموارد بحسب الصلاحيات المتاحه للمستخدمين.

لنفترض ان لدينا تطبيق متجر يتيح للمستخدمين استعراض منتج ما والتفاصيل والتقييمات واراء المستهلكين. من ناحية برمجية يمكن للواجهة الخلفية توفيرمورد خاص يتيح كل البيانات المطلوبة.

الطلب request:

GET /api/v1/products/

الرد response:

{
   products: [
    {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
    {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
    {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
    {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
    {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
    {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
  ]
 }

هنا الخادم قام بارجاع البيانات المطلوبة لعمل التطبيق ويمكن عمل تمثيل للبيانات على الواجهة الامامية وعرضها للمستخدم.

ولكن هل تلاحظ اي شئ مختلف في البيانات المسترجعة ؟ :arrow_down_small:

من المفترض ان واجهة المستخدم ونماذج البيانات تتجه إلى الالتزام بنفس بنية المعلومات information architecture
ولكن في كثير من الاحيان قد تختلف الواجهة الامامية الخاصة بالعرض عن النموذج الفعلي للبيانات بسبب ان كلا النموذجين بناها فريق مختلف عن الاخر.

في المثال السابق قمنا بطلب قائمة بالمنتجات فقط, فجاء الرد محتويا على الكثير من البيانات التي قد نستخدمها وفي كثير من الاحيان يتم تجاهلها تماما :arrow_up_small:

هذا قد يسبب الكثير من المشاكل منها :

  • البطئ في عمل التطبيق بسبب حجم البيانات المسترجعه عبر الشبكة ولا يتم استخدامها.
  • الحاجة للقيام بالكثير من عمليات التصفية والتشكيل للبيانات في الواجهة الامامية مما يسبب في زيادة حجم التطبيق.
  • زيادة العبئ على الخادم وعلى قاعدة البيانات

مقارنة توضح الفروق بين REST و GraphQL :

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

ما هي GraphQL ؟

بحسب الموقع الرسمي هي لغة استعلام لل APIs , و مكتبة تعمل في الوقت التشغيلي للخادم لتنفيذ الاستعلامات.

او لنقل هي طريقة او مقياس يحدد كيفية طلب البيانات يتم ارسال هذه الصيغه من المستخدم عل شكل استعلام يتم التعامل معه في السرفر واسترجاع البيانات المطلوبة بدقة. فبدلا من اعتماد العديد من نقاط النهاية “endpoints” غير الذكية، اعتمدت على نقطة نهاية واحدة ذكية وقادرة على تلقي الإستعلامات المعقدة وتنفيذها ومن ثم صياغتها بالشكل الذي يرغب به العميل.

بعض من مميزاتها:

  • احصل على البيانت التي تريدها حيث يمكنك اختصار طلبك عن طريق اختيار الحقول التي تريد الاستعلام عنها فقط.
    20200530_134125
  • الحصول على عدة موارد في طلب واحد, حيث تدمج عدة أنظمة وراء واجهة برمجة التطبيقات API الخاصة بها، أي توحدهم وتخفي تعقيداتهم.
    graphql7
  • يمكن الوصول الى كل امكانيات البيانات عن طريق endpoint واحدة.
  • تتميز بعملية تدقيق ومراجعة على الاستعلامات والتأكد من موافقتها للمخطط مما يقلل من الاخطاء الغير متوقعة.

ما هي اجزاء GraphQL ؟
تتكون GraphQL API من ثلاث أجزاء رئيسية:

  1. مخطط البيانات (schema):
    مخطط محدد مسبقا وهو نموذج للبيانات التي يمكن طلبها من الخادم. يحدد المخطط أنواع الاستعلامات المسموح بها وأنواع البيانات التي يمكن جلبها والعلاقات بين هذه الأنواع.

  2. الاستعلامات (queries):
    صيغة طلب للبيانات تحدد الحقول اللازمة, ونلاحظ ان الاستعلام لدية نفس تركيبة مخطط البيانات.

  3. محلل الاستعلامات (resolver):
    وهو يقوم بارشاد خادم GraphQL إلى المكان والكيفية التي يجلب بها البيانات الموافقة لاستعلام معين.

اسهل طريقة لفهم اي شئ جديد هي استخدامه, في هذا الموقع يمكنك تجربة الاستعلامات على خادم حقيقي بشكل مباشر , فقط اقرأ الوثائق وابدأ في الاكتشاف !

أخيرا:

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

تحياتي للجميع :tulip:

المصادر:

8 Likes

مقال رائع أخي شكرا على التوضيح :heart_eyes: :ok_hand:

3 Likes

شكرا لك أخي ابراهيم على المقال الجميل، ولكن لزي سؤال
هل يمكن استعمال كلتا التقنيتين في مشروع واحد؟

4 Likes

رائع جدا
شكرا جزيلا اخي على الشرح الجميل

4 Likes

شرح رائع و كامل … من أفضل المقالات التي قرأتها حول ال REST و GraphQL :heart_eyes: شكرا جزيلا ابراهيم

هاته بعض أعمالي باستعمال GraphQL و nodeJS … التجربة كانت جميلة لكن اضطريت للانتقال مجددا ل REST في الأخير. مع ذلك يوجد استعمالات كثيرة مناسبة لهاته التقنية مثلما وضح ابراهيم في المقال :ok_hand:

وهنا واجهة للتعامل مع هذا النظام https://farmy-api.herokuapp.com/graphql

5 Likes

يعطيك العافية صديقي إبراهيم

يبدو لي أنك نسيت جزأين مهمين وهما Mutations لإدخال وتعديل البيانات وSubscriptions للحصول على بيانات من السيرفر عند حدثٍ ما

الجميل في GraphQL سهولة استخدامها، لكنه يأتي بعد المرحلة الصعبة وهي الإعداد :sob:

يقولون إنها جاءت لتحل محل لـ REST API وهو ما سيُسهل الكثير على مُطوري الـ Front End، لكن هؤلاء تفاجأوا بأنه ما زال عليهم كتابة Resolvers :face_with_head_bandage: وأنها تختلف من نظام قاعدة بيانات لآخر :exploding_head:

في النهاية ستجد نفسك وقد كتبت REST API لكن بطريقة أخرى :man_shrugging:

6 Likes

نعم يمكن ان تستخدم GraphQL مع مشروع قائم يعمل بREST , وذلك باضافتها كطبقة بين التطبيقات وال API’s الحالية والتي قد تكون REST او غيرها من الخدمات.

3 Likes

شكرا @LouayH على الاضافة المهمة :+1:

ايضا كما ذكرت يعيبها صعوبة الاعداد ولذلك يكثر استخدامها في التطبيقات الكبيرة لكي تستفيد من مميزاتها, اما بالنسبة للتطبيقات الصغيرة يمكن عملها بREST وذلك للسهولة.

5 Likes

معلومات مفيدة جداً اول مرة اسمع بها
ما شا الله يا ابراهيم :clap::clap:
لكن على ما يبدو أن تعلمها صعب وهل هي تحتاج لتثبيت في الفرنت ايند ام انه يوجد ايضا تغييرات في الباك ايند وتعديل في قواعد البيانات؟

5 Likes

الله عليك… موضوع رائع جدا يا ابراهيم :ok_hand:

أراء المبرمجين كثيرة حول GraphQL أم RESTful، لكن أنسب رأي يروقني هو انهما يكملان بعض، يعني بالإمكان بناء GraphQL API كطبقة اضافية للـ RESTful لتسهيل استجلاب البيانات وجعل كل شيء يتم في السيرفر بشكل أنيق وخفيف

بدلاً من عمل 3 طلبات على RESTful API بالإمكان جعلها طلب واحد على GraphQL والأخيرة بدورها تقوم بجلب البيانات المطلوبة على السيرفر (بمعنى أنها مجرد Wrapper أو تغليف أنيق وبسيط)، بهذا الشكل:


مصدر الصورة: للكاتب joeynimu في مقالته Wrapping a REST API in GraphQL

5 Likes

موضوع رائع، أوافق الرأي السائد، يكملان بعض

2 Likes

عظيم هشام :smiley:
سبقتني كثيرا :slight_smile:

2 Likes

شكرا جزيلا نصر، نحن نتسابق مع المشاريع الواحد تلو الآخر ههه أتعبونا يا صديقي :sweat_smile:

2 Likes