GraphQL API مع JavaScript: دليل تعليمي خطوة بخطوة لـ Node.js

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

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

GraphQL هي لغة استعلام لواجهات برمجة التطبيقات (API) تتيح للعملاء طلب البيانات التي يحتاجونها فقط. على عكس REST، حيث تكون بنية الاستجابة ثابتة، توفر GraphQL المرونة والتحكم. في هذا الدليل التعليمي، سننشئ واجهة برمجة تطبيقات GraphQL بسيطة على Node.js باستخدام مكتبة Apollo Server الشهيرة.

ستتعلم كيفية إعداد الخادم، وتحديد أنواع البيانات، وكتابة الدوال الحلالة (resolvers)، وتنفيذ الاستعلامات والتحويرات (mutations). يمكن تشغيل جميع أمثلة الكود محليًا.

1. إعداد البيئة وتثبيت التبعيات

قبل كتابة الكود، تأكد من تثبيت Node.js (الإصدار 14 أو أحدث). أنشئ مجلدًا جديدًا للمشروع وقم بتهيئة npm:

mkdir graphql-tutorialcd graphql-tutorialnpm init -y

الآن قم بتثبيت الحزم اللازمة. التبعيات الأساسية هي: express (إطار عمل ويب)، @apollo/server (خادم GraphQL)، graphql (جوهر GraphQL) و cors (للطلبات عبر النطاقات).

npm install express @apollo/server graphql cors

أنشئ ملفًا باسم index.js — سيكون فيه كل كود الخادم.

2. إنشاء مخطط GraphQL والدوال الحلالة (Resolvers)

المخطط (Schema) هو وصف لأنواع البيانات والعمليات (الاستعلامات، التحويرات). الدوال الحلالة (Resolvers) هي دوال تُرجع البيانات لكل حقل.

سنضيف نموذج بيانات بسيطًا — قائمة بالكتب. كل كتاب له id و title و author و year.

افتح index.js واكتب الكود التالي:

const { ApolloServer } = require('@apollo/server');const { startStandaloneServer } = require('@apollo/server/standalone');const express = require('express');const cors = require('cors');

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

// تعريف المخطط (Type Definitions)const typeDefs = `#graphql  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    deleteBook(id: ID!): Book  }`;

// الدوال الحلالة (Resolvers)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;    },    deleteBook: (parent, args) => {      const index = books.findIndex(book => book.id === args.id);      if (index === -1) return null;      const deletedBook = books.splice(index, 1)[0];      return deletedBook;    }  }};

// تشغيل الخادمasync function startServer() {  const app = express();  app.use(cors());

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

  const { url } = await startStandaloneServer(server, {    listen: { port: 4000 },  });

  console.log(`خادم GraphQL قيد التشغيل على ${url}`);}

startServer();

دعنا نحلل الكود:

typeDefs — يحدد الأنواع Book و Query (الاستعلامات) و Mutation (التحويرات).
resolvers — يحتوي على دوال لكل حقل. بالنسبة لـ books، يتم إرجاع المصفوفة بأكملها، وبالنسبة لـ book، يتم التصفية حسب id.
startStandaloneServer — يشغل الخادم على المنفذ 4000.