عندما وصلت جراف كيوال إلى الإنترنت ، انتشرت مثل الوباء. لقد غيرت جراف كيوال الطريقة التي تتم بها الأشياء تمامًا وتواصل تقدمها في كل مكان. إذا كان لديك خمس دقائق أمامك ، فسأشرح لك كل ما تحتاج إلى معرفته.
في يوم من الأيام
بحلول عام 2012 ، وصل اعتماد الهواتف المحمولة إلى أرقام مروعة في جميع أنحاء العالم. في تلك المرحلة ، كانت فيسبوك في خطر.
كان فيس بوك في الأساس شركة ويب. نتيجة لذلك ، جعلوا تطبيق اي او اس الخاص بهم مثل موقع ويب ، باستخدام فيو الويب. وسرعان ما أدركوا أن فيو الويب كان هراءًا (في ذلك الوقت). لذلك قرروا إعادته بالكامل باللغة النيتف ، من أجل الحصول على تجربة أفضل للعملاء. على الفور اصطدموا بجدار آخر.
الهيكلة البرمجية ان ذاك لفيس بوك لا تعمل. بشكل أساسي لأن نقاط النهاية لواجهة برمجة تطبيقات ريست لا تسمح بالمرونة في البيانات. كانت هناك حاجة إلى رحلات متعددة ذهابًا وإيابًا إلى نقاط نهاية سيرفرية مختلفة للبيانات المتداخلة ، مما تسبب في البطء وعدم الاتساق. لم يكن جزء من الحمولة مطلوبًا لمعظم الاستعلامات ، مما تسبب في عمليات نقل بيانات غير ضرورية. والأهم من ذلك ، كان التعامل مع العديد من طلبات اتش تي تي بي مملاً على فيسبوك.
في هذا السياق الجهنمي بدات فكرة الجراف كيو ال ، في فبراير 2012 ، حجز بايرون ودان شيفر ونيك شروك بعض محطات العمل في ركن من أركان الفيسبوك.
سريعًا جدًا ، تم إنتاج نموذج أولي أولي لـ جراف كيوال ، أطلق عليه اسم سوبر جراف ، بواسطة مطورينا الثلاثة. في أغسطس 2012 ، تم شحن جراف كيوال في الإنتاج باستخدام تطبيق فيس بوك الأصلي الجديد. في عام 2015 ، ظهرت أول نسخة عامة على الإنترنت. لا تزال جراف كيوال موجودة حتى اليوم عندما تقوم باستخدام فيس بوك الخاص بك. لكن المبرمجين الثلاثة لم يحلو فقط مشكلة تؤثر على فيس بوك ، ولكن على الصناعة البرمجاتية بأكملها؟
ما هي GraphQL؟
الجراف كيوال هي لغة استعلام عن البيانات لواجهات برمجة التطبيقات. الكيو ال ، كما في سيكوال ، تعني لغة الاستعلام. تسمح جراف كيوال بمعالجة البيانات بطريقة بسيطة ومرنة ودقيقة للغاية. إن الجراف كيوال ليست لغة برمجة ولا إطار عمل. الجراف كيوال هي مواصفات لتطبيق اي بي اي الخاص بك. بشكل ملموس يبدو كالتالي.
الطلب او الريكوست
{
pokemons {
name,
abilities {
name,
damage,
accuracy,
mana,
type
}
}
}
الاجابة او الريسبونس
{
"data": {
"pokemons": [
{
"name": "pikachu",
"abilities": [
{
"name": "Thunder punch",
"damage": 75,
"accuracy": 70,
"mana": 15,
"type": "physical"
},
{
"name": "Thunderbolt",
"damage": 90,
"accuracy": 80,
"mana": 15,
"type": "electric"
}
]
},
{
"name": "mewtwo",
"abilities": [
{
"name": "Earthquake",
"damage": 130,
"accuracy": 100,
"mana": 20,
"type": "ground"
},
{
"name": "Brutal swing",
"damage": 180,
"accuracy": 90,
"mana": 25,
"type": "physical"
}
]
}
]
}
}
هذه هي الطريقة التي تطلب بها البيانات وتتلقاها باستخدام الجراف كيوال. حسنًا ، الأمر غير واضح في الوقت الحالي. بادئ ذي بدء ، أين يتناسب هذا الشيء مع هندستك؟
الرجل الذي يبتسم هو أنت. ولجعل الحمولة التي أظهرتها لكم سابقًا مع البوكيمون ومهاراتهم ، فأنت في ورطة. أنت تكافح لأن واجهة برمجة تطبيقات الريست التي تستخدمها ليست مصممة لاحتياجاتك. ينتهي بك الأمر بإجراء مكالمة واحدة لكل بوكيمون ، ثم مكالمة واحدة لكل مهارة لكل بوكيمون.
في كل مرة يقوم المنطق في التطبيق الخاص بك بتقديم طلب إلى قاعدة البيانات ويرسل لك حمولة. وهكذا ، على الرغم من ابتسامتك الواضحة ، فإنك تشعر بالرغبة في إطلاق النار على نفسك. وهنا يأتي دور جراف كيوال.
مع الجراف كيوال ، لا مزيد من المشاكل. أنت تقوم بعمل بوست واحد وتسأل بالضبط عما تريده عبر طلب الجراف كيوال. بعد ذلك ، يدير الخادم كل شيء وستحصل على حمولتك الكاملة.
باستخدام ريست ، تحصل على كائنات محددة بنقاط النهاية. باستخدام الجراف كيوال ، لا تتكيف مع كائن محدد بواسطة الواجهة الخلفية ، فأنت تحدد بشكل ديناميكي الكائن الذي ستستلمه من جانب العميل. وهذا يغير كل شيء.
حسنًا ، هذا جيد ، ولكن كيف يعمل بشكل ملموس؟ كيف تصل الجراف كيوال إلى قاعدة بياناتك وتقوم بإجراء الاستعلامات؟ لفهم الجراف كيوال جيدا ، عليك أن تضع يديك عليها.
أرني الرمز
سأقدم لك تطبيق جافاسكريبت (نود). كن مدركًا أن كل ما يلي قابل للتطبيق في أي لغة. يظل منطق الجراف كيوال كما هو في كل مكان نظرًا لأنه قبل كل شيء أحد المواصفات.
لبدء العمل على الجراف كيوال ، انتقل إلى الموقع الرسمي وقائمة التنفيذ الخاصة بهم بجميع لغات العالم. لتبسيط الأمر مع نود جي اس ، نحتاج إلى وحدتي الرسم البياني السريع و الجراف كيوال. لنبدأ بتركيب الخادم الأساسي.
index.js
const path = require("path");
const express = require("express");
const graphqlHTTP = require("express-graphql");
const graphql = require("graphql");
const { query } = require(path.resolve("schema/query"));
const graphQLSchema = new graphql.GraphQLSchema({ query });
const app = express();
app.use(
"/graphql",
graphqlHTTP({
schema: graphQLSchema,
graphiql: true
})
);
app.listen(8080);
بادئ ذي بدء ، نسمي تبعياتنا. ثم السطر 6 نبحث عن استعلام الجذر الذي نمرره إلى المخطط الرئيسي على السطر 7. نقوم بتشغيل خادمنا السريع ، ونكشف المسار / جراف كيوال عبر برمجية وسيطة سريعة ، وأخيراً نستمع على المنفذ 8080. دعونا نرى ما يحدث داخل المخطط الآن.
const path = require("path");
const { GraphQLObjectType, GraphQLList } = require("graphql");
const { pokemonsType } = require(path.resolve("schema/types"));
const RootQuery = new GraphQLObjectType({
name: "RootQueryType",
type: "Query",
fields: {
pokemons: {
type: new GraphQLList(pokemonsType),
resolve() {
const data = require(path.resolve("data/pokemons.json"));
return data;
}
}
}
});
exports.query = RootQuery;
يعتبر المخطط مركزيًا في الجراف كيوال. سيحدد الاتصال بين عميلك وخادمك. تحدد الاستعلامات التي يمكن لعملائك إجراؤها وأنواع البيانات التي يمكن استردادها والعلاقات بين هذه الأنواع. يتم تعريف كل شيء في هذا المخطط. بدءا من الاستعلام الجذر.
يسمح الاستعلام الجذر لـ الجراف كيوال بمعرفة نوع البيانات التي يمكن استردادها. وهنا ، في استعلام الجذر الخاص بي ، أحدد أن لدي حقل البوكيمون سطر 9 وهو قائمة من نوع البوكمون سطر 10.
ثم لدينا محلل على السطر 11. إن أدوات الحل هي التي تقوم بمهمة جلب بياناتك من قاعدة البيانات الخاصة بك. يتم تعيين محلل لكل مجال من الحقول الخاصة بك. ومحلل حقل البوكيمون الخاص بي هو قائمة كائن البوكيمون. يقوم المحلل الخاص بي هنا بإرجاع البيانات عبر ملف جيسون الذي يتوافق مع مجموعة من البوكيمون.
أعيد جسيون للبيانات من أجل البساطة والإيجاز. ولكن في الحياة الواقعية ، هذا هو المكان الذي من المفترض أن تتصل بقاعدة البيانات الخاصة بك ، وتجري استعلامات ، وتعيد البيانات. الآن دعونا نرى كيف تبدو الأنواع.
schema/types.js
const path = require("path");
const graphql = require("graphql");
const { GraphQLObjectType, GraphQLString, GraphQLList } = graphql;
const abilitiesType = new GraphQLObjectType({
name: "ability",
fields: {
name: {
type: GraphQLString,
resolve: parent => parent.name
},
damage: {
type: GraphQLString,
resolve: parent => parent.damage
},
accuracy: {
type: GraphQLString,
resolve: parent => parent.accuracy
},
mana: {
type: GraphQLString,
resolve: parent => parent.mana
},
type: {
type: GraphQLString,
resolve: parent => parent.type
}
}
});
const pokemonsType = new GraphQLObjectType({
name: "pokemons",
fields: {
name: {
type: GraphQLString,
resolve: parent => parent.name
},
abilities: {
type: new GraphQLList(abilitiesType),
resolve(parent) {
const abilities = require(path.resolve("data/abilities.json"));
return abilities.filter(ability =>
ability.linkedTo.includes(parent.name)
);
}
}
}
});
exports.pokemonsType = pokemonsType;
المبدأ يبقى كما هو. نقوم بإنشاء أنواع كائنات جراف كيوال التي تمثل بنية بياناتنا. نحدد الحقول ولكل حقل ، نقوم بتعيين محلل يبحث عن البيانات الصحيحة. من المثير للاهتمام أن نرى هنا أنني أستخدم سياق الوالد لتصفية القدرات التي يجب إرجاعها لكل سطر بوكيمون 44.
شاهد هذا المثال
https://codesandbox.io/s/graphql-simplified-anbilarabi-r8t0cm?file=/schema/types.js
للتعلم معنا اكثر - يمكنك التسجيل في دورة الفل ستاك باللغة العربية معي انا احمد ناصر من هنا
https://qrcood.com/khottah-2-initial/
