GraphQL API مع JavaScript: دليل تعليمي عملي خطوة بخطوة

مقدمة إلى GraphQL API مع JavaScript

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

في هذا البرنامج التعليمي، سنقوم بإنشاء GraphQL API كامل على Node.js باستخدام Apollo Server. ستتعلم كيفية تعريف المخططات (schemas)، وكتابة المحللات (resolvers)، وتنفيذ الاستعلامات (queries) والتحويرات (mutations). جميع أمثلة الكود جاهزة للتشغيل وتم اختبارها عمليًا.

للعمل، ستحتاج إلى Node.js الإصدار 14 أو أعلى ومعرفة أساسية بـ JavaScript. إذا كنت على دراية بـ Express.js، فسيبدو Apollo Server مشابهًا جدًا لك - فهو أيضًا يستخدم middleware ويعمل مع HTTP.

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

قم بإنشاء دليل جديد وتهيئة المشروع:

mkdir graphql-tutorialcd graphql-tutorialnpm init -y

قم بتثبيت التبعيات الضرورية:

npm install @apollo/server graphqlnpm install nodemon --save-dev

قم بإنشاء ملف index.js - سيكون هذا هو نقطة الدخول إلى تطبيقنا.

الهيكل الأساسي للمشروع سيكون كالتالي:

graphql-tutorial/├── node_modules/├── index.js├── package.json└── package-lock.json

إنشاء أول خادم GraphQL

لنبدأ بخادم بسيط يعيد رسالة بسيطة. افتح index.js وأضف الكود التالي:

import { ApolloServer } from '@apollo/server';import { startStandaloneServer } from '@apollo/server/standalone';

// تعريف مخطط GraphQLconst typeDefs = `#graphql  type Query {    hello: String  }`;

// محلل لاستعلام helloconst resolvers = {  Query: {    hello: () => 'مرحبًا بالعالم! هذا أول استعلام GraphQL!',  },};

// إنشاء مثيل للخادمconst server = new ApolloServer({  typeDefs,  resolvers,});

// تشغيل الخادمconst { url } = await startStandaloneServer(server, {  listen: { port: 4000 },});

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

قم بتشغيل الخادم باستخدام الأمر node index.js. افتح المتصفح وانتقل إلى العنوان http://localhost:4000. سترى واجهة Apollo Sandbox حيث يمكنك تنفيذ الاستعلامات.

أدخل في اللوحة اليسرى:

query {  hello}

واضغط على زر "Run". ستحصل على الرد التالي:

{  "data": {    "hello": "مرحبًا بالعالم! هذا أول استعلام GraphQL!"  }}

العمل مع أنواع البيانات والاستعلامات المعقدة

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

قم بتحديث ملف index.js:

import { ApolloServer } from '@apollo/server';import { startStandaloneServer } from '@apollo/server/standalone';

// تعريف الأنواعconst typeDefs = `#graphql  type Book {    id: ID!    title: String!    author: String!    publishedYear: Int  }

  type User {    id: ID!    name: String!    email: String!    books: [Book]  }

  type Query {    books: [Book]    book(id: ID!): Book    users: [User]    user(id: ID!): User  }`;

// بيانات اختباريةconst books = [  { id: '1', title: 'هاري بوتر', author: 'ج.ك. رولينج', publishedYear: 1997 },  { id: '2', title: 'سيد الخواتم', author: 'ج.ر.ر. تولكين', publishedYear: 1954 },  { id: '3', title: '1984', author: 'جورج أورويل', publishedYear: 1949 },];

const users = [  { id: '1', name: 'إيفان إيفانوف', email: 'ivan@example.com', bookIds: ['1', '2'] },  { id: '2', name: 'آنا بيتروفا', email: 'anna@example.com', bookIds: ['3'] },];

// المحللاتconst resolvers = {  Query: {    books: () => books,    book: (_, { id }) => books.find(book => book.id === id),    users: () => users,    user: (_, { i