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

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

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

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

ما هي GraphQL ولماذا نحتاجها؟

تحل GraphQL عدة مشاكل في REST API:

تكرار البيانات: يحصل العميل فقط على الحقول التي طلبها.
استعلامات متعددة: يمكن لاستعلام GraphQL واحد أن يحل محل عدة نقاط نهاية REST.
الكتابة الصارمة: يحدد المخطط أنواع البيانات والعلاقات بينها.

JavaScript (Node.js) هو الخيار الأمثل لإنشاء GraphQL API بفضل النظام البيئي الضخم للحزم والطبيعة غير المتزامنة.

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

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

mkdir graphql-api-tutorial
cd graphql-api-tutorial
npm init -y

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

npm install apollo-server graphql

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

الخطوة 2: تعريف مخطط GraphQL

المخطط هو جوهر GraphQL API. يصف أنواع البيانات والعمليات المتاحة (الاستعلامات، التحويرات، الاشتراكات). سننشئ مخططاً بسيطاً لإدارة الكتب.

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

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
    deleteBook(id: ID!): Book
  }
`;

هنا قمنا بتعريف:

Book - نوع كائن بحقول id, title, author, year.
Query - نقطة دخول لقراءة البيانات (قائمة الكتب وكتاب حسب المعرف).
Mutation - عمليات تعديل البيانات (إضافة وحذف كتاب).

الخطوة 3: كتابة المحللات

المحللات هي دوال تعيد البيانات لكل حقل في المخطط. سننشئ قاعدة بيانات وهمية (مصفوفة من الكائنات) وننفذ المحللات.

let books = [
  { id: '1', title: '1984', author: 'George Orwell', year: 1949 },
  { id: '2', title: 'To Kill a Mockingbird', author: 'Harper Lee', year: 1960 },
];

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;
    },
  },
};

لاحظ البنية: Query و Mutation هما كائنات تحتوي على دوال محللة. كل محلل يقبل ثلاث وسائط: parent (نتيجة المحلل الأب)، args (وسائط الاستعلام)، و context (كائن السياق، مثلاً للمصادقة).

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

الآن سنربط المخطط والمحللات في Apollo Server:

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

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

المدونات

Swift مقابل Python للباك إند: أيهما تختار عمليًا في 2024

الأنواع العامة (Generics) والتصنيف في JavaScript: كيفية كتابة كود خالٍ من الأخطاء

GetHashCode وEquals: لماذا إعادة تعريفهما أمر حيوي في C#

توصيات الكتب

مقابلة Rust: 200 سؤال وجواب

Go (Golang): نصائح وأفضل الممارسات

Rust: نصائح وأفضل الممارسات

C# 9.0 in a Nutshell: دليل الجيب