ما هو GraphQl و strapi و Gatsby

• ال GraphQl  هي لغة إستعلام لجلب البيانات من السيرفر عن طريق ال api وهي إختصار لل application programming interface وتعتبر تقنية جديدة عن ال rest
• strapi هو headless cms ويعني ببساطة نظام إدارة محتوي مثل ال wordpress ولكن يختلف عنه أنه يقوم بالتواصل مع ال frontend من خلال ال api فقط للعمل مع الإطارات مثل react  على عكس wordpres
• Gatsby هو static site generator وهو مخصص لل react يمكنك من بناء مواقع ديناميكية ولكن بدون استخدام قواعد البيانات وبالتالي بدون استخدام أي لغة backend

ال GraphQl  هي وجه أخر للتعامل مع ال api فى الباك فالطريقة التقليدية هي إذا أردنا التعامل مع ال api لجلب بيانات المنتجات التى لدينا فى السيرفر فسنقوم بعمل استعلام عن طريق رابط معين مثل 

https://www.example.com/api/products

ومثلا إذا أردنا الإستعلام عن الأقسام الموجودة أيضاً سنقوم بعمل إستعلام عن طريق رابط معين مثل 

https://www.example.com/api/categories

فلو تلاحظ أنه كلما إحتاجنا للإستعلام عن شئ نقوم بزيارة رابط معين معروف مسبقا عن طريق التنسيق بين فريق الباك أند وفريق الفرونت إند وهنا كانت المشكلة فلو إفترضنا أن فريق الفرونت إند يحتاج قيمة معينة تكون موجودة فى ال response الموجود من خلال ال api فى تلك الحالة سيضطر تيم الباك أند أن يقوم بعمل تعديل على الكود لكى تعمل ال api مثلما يريد تيم الفرونت إند مثال : 

لو لإفترضنا أنه لدينا جدول خاص بالمنتجات فى الباك إند به قيم كالتالي : 

1 - id
2 - name 
3 - description
4 - price
5 - cost_price

ولدينا باك إند على الرابط التالي 

https://www.example.com/api/products

والناتج الراجع منها هو : 

{
	"id" : 1,
    "name" : "product name",
    "description" : "product description"
}

المشكلة هنا لو إفترضنا أن تيم الفرونت إند يريد قيمة السعر أيضاً سيضطر تيم الباك إند للتعديل على ال api الخاصة ب 

https://www.example.com/api/products

لجعل الناتج كالتالي : 

{
	"id" : 1,
    "name" : "product name",
    "description" : "product description",
    "price" : 10
}

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

أمثلة على طريقة الإستعلام عن المنتجات عن طريق ال GrapQl 

{
	products {
   	name , 
    	description,
  	},
}

في هذا المثال نحن نقوم بالتحكم فيما نريد أن نستعلم عنه فمثلا نحن نطلب المنتجات وأيضا نتحكم فى البيانات التى نريدها فى المنتجات حيث نريد الاسماء والوصف فقط 

ويكمن أن نقوم بعملها كالتالي :

{
	products {
   	id , 
    	price,
  	},
}

نفس ال api ونفس الإند بوينت نستطيع أن نستعلم عن المنتجات ولكن نطلب حقول مختلفة وهذة هي الفكرة العامة من  ال GraphQl.

أما بالنسبة ل Gatsby فهو فريم ورك مبنى على تقنية ال react js لتساعدك فى عمل مواقع بطريقة سريعة ومنظمة أكثر ممكن أن تفكر فيها على أنها bootstrap بالنسبة ل css.

وأخيراً strapi هوا نظام إدراة المحتوى CMS ولكن يختلف عن الورد بريس حيث أنه عبارة عن مشروع باك إند فقط ويتيح لك التعامل معه عن طريق Api خاصة به 

GraphQL هو بديل لRESTful API للتواصل وطلب البيانات بين الواجهة (العميل) والخلفية (الخادم - السيرفر)

لكي تفهم GraphQL يجب أن تكون عارف كيف يعمل RESTful API 

ال RESTful API بإختصار يقوم بطلب بيانات من عدة نقاط نهاية endpoints مثال 

تقوم بعمل طلب من نقطة النهاية posts/ فتحصل على المنشورات وتقوم بعمل طلب من نقطة النهاية الأخرى users/ لكي تحصل على المستخدمين وهكذا 

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

فالآن لديك نقطة نهاية واحدة وتستطيع وصف البيانات التي تريد الحصول عليها وتحصل فقط على البيانات المطلوبة فقط ، ففي RESTful API إذا كنت تريد بيانات محددة كنت ستحصل على كثير من البيانات الذي لا تحتاجها

Strapi هو headless cms وهو عبارة عن نظام إدارة محتوى أو بشكل أقرب إدارة الخلفية والبيانات بحيث على سبيل المثال مطوري الواجهة يقومون بتطوير الواجهة بإستخدام أي إطار عمل والحصول على البيانات أو المحتوى من هذا النظام، في Strapi يمكنك إستخدام RESTful أو GraphQL

Gatsby هو عبارة عن إطار عمل مبني على React يعمل Gatsby على توليد المواقع الثابتة من أجل الحصول على أداء أفضل ، تحسين محركات البحث SEO ، وحماية أفضل وGatsby يقوم بإستخدام GraphQL 

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

Gatsby هو منشئ مواقع ويب ثابت مفتوح المصدر (SSG) يعتمد على إطار عمل تطوير الواجهة الأمامية React ويستخدم Webpack وتقنية GraphQL. يمكن استخدامه لبناء مواقع ثابتة عبارة عن تطبيقات ويب تقدمية ، وتتبع أحدث معايير الويب ، ومُحسَّنة للسرعة والأمان.

Strapi هو نظام مفتوح المصدر ، يستند إلى Node.js Headless CMS يوفر للمطورين الكثير من وقت التطوير مع منحهم حرية استخدام الأدوات والأطر المفضلة لديهم.يتيح Strapi أيضًا لمحرري المحتوى تبسيط تسليم المحتوى (نصوص وصور وفيديو وما إلى ذلك) عبر أي جهاز.