واجهة برمجة تطبيقات GraphQL مع JavaScript: دليل تعليمي خطوة بخطوة للمبتدئين

مقدمة إلى GraphQL ومزاياه

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

في هذا الدليل التعليمي، سننشئ خادم GraphQL بسيطًا على Node.js باستخدام مكتبة Apollo Server، ونضبط المخطط، وننفذ الاستعلامات والتحويرات. ستتعلم:

• كيفية تثبيت وضبط Apollo Server
• كيفية تعريف مخطط بأنواع البيانات
• كيفية كتابة المحللّات (Resolvers) للاستعلامات والتحويرات
• كيفية اختبار واجهة برمجة التطبيقات عبر GraphQL Playground

للعمل، ستحتاج إلى Node.js (الإصدار 16+) وفهم أساسي لـ JavaScript. لنبدأ!

الخطوة 1: إعداد المشروع وتثبيت التبعيات

أنشئ دليلاً جديدًا للمشروع وقم بتهيئة package.json:

mkdir graphql-tutorialcd graphql-tutorialnpm init -y

قم بتثبيت الحزم اللازمة:

npm install apollo-server graphql

توفر الحزمة apollo-server خادم HTTP جاهزًا لـ GraphQL، بينما توفر graphql النواة للعمل مع المخططات والاستعلامات.

الخطوة 2: إنشاء مخطط أساسي ومحلّلات

أنشئ ملف index.js واستورد Apollo Server:

const { ApolloServer, gql } = require('apollo-server');

// بيانات في الذاكرة (محاكاة لقاعدة بيانات)const books = [  { id: '1', title: 'الحرب والسلام', author: 'ليو تولستوي', year: 1869 },  { id: '2', title: 'الجريمة والعقاب', author: 'فيودور دوستويفسكي', year: 1866 },  { id: '3', title: 'السيد ومارجريتا', author: 'ميخائيل بولغاكوف', year: 1967 }];

الآن، سنحدد المخطط باستخدام الوسم gql:

const typeDefs = gql`  type Book {    id: ID!    title: String!    author: String!    year: Int  }

  type Query {    books: [Book]    book(id: ID!): Book  }

  type Mutation {    addBook(title: String!, author: String!, year: Int): Book  }`;

أنشئ المحلّلات - وهي دوال تعيد البيانات لكل حقل استعلام:

const resolvers = {  Query: {    books: () => books,    book: (parent, args) => books.find(book => book.id === args.id)  },  Mutation: {    addBook: (parent, args) => {      const newBook = {        id: String(books.length + 1),        title: args.title,        author: args.author,        year: args.year      };      books.push(newBook);      return newBook;    }  }};

الخطوة 3: تشغيل الخادم والاختبار

أنشئ مثيلاً للخادم وقم بتشغيله:

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {  console.log(`🚀 الخادم جاهز على العنوان: ${url}`);});

قم بتشغيل الخادم بالأمر node index.js. افتراضيًا، يعمل Apollo Server على المنفذ 4000 ويفتح GraphQL Playground - بيئة تفاعلية لاختبار الاستعلامات.

جرب تنفيذ استعلام بسيط:

query {  books {    title    author  }}

يجب أن يحتوي الرد على مصفوفة من الكتب مع الحقول المحددة:

{  "data": {    "books": [      { "title": "الحرب والسلام", "author": "ليو تولستوي" },      { "title": "الجريمة والعقاب", "author": "فيودور دوستويفسكي" },      { "title": "السيد ومارجريتا", "author": "ميخائيل بولغاكوف" }    ]  }}

الآن، اختبر التحوير (Mutation) لإضافة كتاب جديد:

mutation {  addBook(title: "آنا كارنينا", author: "ليو تولستوي", year: 1877) {    id    title    author  }}

بعد تنفيذ التحوير، سيعيد الخادم كائن الكتاب الجديد مع المعرف المخصص له.

الخطوة 4: توسيع المخطط - العلاقات