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

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

GraphQL هي لغة استعلام وبيئة تشغيل لواجهات برمجة التطبيقات (API)، تم تطويرها بواسطة Facebook. على عكس REST، حيث تحصل على هياكل بيانات ثابتة، تسمح GraphQL للعميل بطلب ما يحتاجه فقط. وهذا يجعل واجهات برمجة التطبيقات أكثر مرونة وكفاءة.

في هذا البرنامج التعليمي العملي خطوة بخطوة، سنقوم بإنشاء واجهة برمجة تطبيقات GraphQL كاملة بلغة JavaScript باستخدام Node.js. ستتعلم كيفية إعداد الخادم، وتحديد المخططات، ومعالجة الاستعلامات والتحويرات. في نهاية المقال، سيكون لديك واجهة برمجة تطبيقات عاملة جاهزة للتكامل مع أي مشروع.

1. إعداد المشروع وتثبيت التبعيات

للبدء، سنقوم بإنشاء مشروع Node.js جديد وتثبيت الحزم اللازمة. سنستخدم apollo-server وهي مكتبة شائعة لإنشاء خوادم GraphQL.

الخطوة 1: تهيئة المشروع

mkdir graphql-tutorial\ncd graphql-tutorial\nnpm init -y

الخطوة 2: تثبيت Apollo Server و GraphQL

npm install apollo-server graphql

بعد التثبيت، سنقوم بإنشاء الملف الرئيسي index.js، حيث سيكون خادمنا.

2. إنشاء خادم GraphQL أساسي

الآن سنكتب خادمًا بسيطًا يستقبل الطلبات ويعيد الردود. للقيام بذلك، سنحدد المخطط (schema) والمحللات (resolvers).

الخطوة 1: تعريف نوع البيانات

سننشئ نوعًا بسيطًا Book مع الحقول id و title و author.

const { ApolloServer, gql } = require('apollo-server');\n\n// مخطط GraphQL\nconst typeDefs = gql`\n  type Book {\n    id: ID!\n    title: String!\n    author: String!\n  }\n\n  type Query {\n    books: [Book]\n    book(id: ID!): Book\n  }\n`;\n\n// بيانات مثال (في مشروع حقيقي - قاعدة بيانات)\nconst books = [\n  { id: '1', title: 'الحرب والسلام', author: 'ليو تولستوي' },\n  { id: '2', title: 'الجريمة والعقاب', author: 'فيودور دوستويفسكي' },\n  { id: '3', title: 'السيد ومارجريتا', author: 'ميخائيل بولغاكوف' }\n];\n\n// المحللات - دوال تعيد البيانات\nconst resolvers = {\n  Query: {\n    books: () => books,\n    book: (parent, args) => books.find(book => book.id === args.id)\n  }\n};\n\n// إنشاء الخادم\nconst server = new ApolloServer({ typeDefs, resolvers });\n\n// تشغيل الخادم\nserver.listen().then(({ url }) => {\n  console.log(`🚀  الخادم جاهز على العنوان: ${url}`);\n});

الخطوة 2: التشغيل والاختبار

قم بتنفيذ الأمر node index.js وافتح http://localhost:4000 في المتصفح. سترى GraphQL Playground - أداة لاختبار الاستعلامات.

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

{\n  books {\n    title\n    author\n  }\n}

يجب أن يحتوي الرد على قائمة الكتب مع الحقول المحددة.

3. إضافة التحويرات وتوسيع المخطط

الآن سنضيف إمكانية تعديل البيانات من خلال التحويرات. سيسمح هذا بإنشاء وتحديث وحذف السجلات.

الخطوة 1: تعريف التحويرات في المخطط

const typeDefs = gql`\n  type Book {\n    id: ID!\n    title: String!\n    author: String!\n  }\n\n  input BookInput {\n    title: String!\n    author: String!\n  }\n\n  type Query {\n    books: [Book]\n    book(id: ID!): Book\n  }\n\n  type Mutation {\n    addBook(input: BookInput!): Book\n    deleteBook(id: ID!): Book\n  }\n`;

الخطوة 2: تنفيذ المحللات للتحويرات

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