GraphQL مع Node.js و Express: دليل شامل

هل أنت مستعد لتغيير الطريقة التي تبني بها واجهات برمجة التطبيقات؟ إذا كنت قد قضيت بعض الوقت في عالم التطوير، فمن المحتمل أنك سمعت عن GraphQL وNode.js وExpress. معًا، تشكل هذه التقنيات مجموعة أدوات قوية لبناء واجهات برمجة التطبيقات الحديثة والفعالة. اليوم، نحن نغوص بعمق في عالم GraphQL مع Node.js وExpress لمساعدتك على فهم وتنفيذ هذا المزيج في مشاريعك.

لكن أولاً، دعني أقدم لك أداة ستجعل تطوير واجهة برمجة التطبيقات الخاصة بك أكثر سلاسة: Apidog. Apidog هي أداة مجانية لاختبار وإدارة واجهات برمجة التطبيقات تتكامل بسلاسة مع GraphQL وNode.js وExpress. إذا كنت ترغب في تبسيط عملية تطوير واجهة برمجة التطبيقات الخاصة بك، قم بتنزيل Apidog مجانًا وشاهد الفرق الذي يحدثه!

مقدمة إلى GraphQL وNode.js وExpress

ما هو GraphQL؟

GraphQL هي لغة استعلام لواجهة برمجة التطبيقات الخاصة بك، وبيئة تشغيل من جانب الخادم لتنفيذ الاستعلامات باستخدام نظام نوع تعرفه لبياناتك. تم تطويرها بواسطة Facebook، وتوفر بديلاً أكثر كفاءة وقوة ومرونة لـ REST. مع GraphQL، يمكنك طلب بالضبط البيانات التي تحتاجها، مما يمنع التحميل الزائد أو النقص في البيانات.

ما هو Node.js؟

Node.js هو بيئة تشغيل JavaScript مبنية على محرك JavaScript V8 الخاص بـ Chrome. يسمح للمطورين ببناء تطبيقات الشبكة القابلة للتوسع باستخدام JavaScript على جانب الخادم. يُعرف Node.js بنموذجه المدفوع بالأحداث وI/O غير المتزامن الذي يجعله خفيف الوزن وفعال.

ما هو Express؟

Express هو إطار تطبيق ويب بسيط ومرن مبني على Node.js يوفر مجموعة قوية من الميزات لتطوير تطبيقات الويب والهواتف المحمولة. يسهل تطوير تطبيقات الويب المعتمدة على Node بسرعة وغالبًا ما يستخدم كعمود فقري لبناء واجهات برمجة التطبيقات RESTful.

إعداد بيئة تطويرك

قبل أن نبدأ في بناء واجهة برمجة التطبيقات الخاصة بنا، دعنا نعد بيئة تطويرنا. إليك ما ستحتاجه:

• تم تثبيت Node.js وnpm (مدير حزم Node)
• محرر كود (مثل Visual Studio Code)
• طرفية أو موجه أوامر

تثبيت Node.js وnpm

قم بتنزيل وتثبيت Node.js من الموقع الرسمي لـ Node.js. يأتي npm مع Node.js، لذلك لا تحتاج لتثبيته بشكل منفصل.

تهيئة مشروع Node.js جديد

افتح الطرفية الخاصة بك وأنشئ دليلاً جديدًا لمشروعك. انتقل إلى دليل مشروعك وأدخل الأمر التالي لتهيئة مشروع Node.js جديد:

npm init -y

هذا الأمر سيقوم بإنشاء ملف package.json في دليل مشروعك.

إنشاء خادم Express أساسي

الآن بعد أن تم إعداد مشروعنا، دعنا ننشئ خادم Express أساسي.

تثبيت Express

قم بتشغيل الأمر التالي لتثبيت Express:

npm install express

إنشاء الخادم

قم بإنشاء ملف جديد باسم server.js وأضف الكود التالي:

const express = require('express');
const app = express();
const PORT = process.env.PORT || 4000;

app.get('/', (req, res) => {
  res.send('مرحبًا بالعالم!');
});

app.listen(PORT, () => {
  console.log(`الخادم يعمل على المنفذ ${PORT}`);
});

يقوم هذا الكود بإعداد خادم Express أساسي يستمع على المنفذ 4000 ويستجيب بـ "مرحبًا بالعالم!" عندما يتم الوصول إليه على عنوان URL الجذر.

لتشغيل الخادم، قم بإدخال:

node server.js

قم بزيارة http://localhost:4000 في متصفحك لرؤية رسالة "مرحبًا بالعالم!"

دمج GraphQL مع Express

الآن بعد أن أصبحت لدينا خادم أساسي يعمل، حان الوقت لدمج GraphQL.

تثبيت GraphQL وApollo Server

Apollo Server هو خادم GraphQL مفتوح المصدر Maintained by community ومتوافق مع أي عميل GraphQL. سنستخدمه للتعامل مع طلبات GraphQL الخاصة بنا.

قم بتثبيت Apollo Server وGraphQL:

npm install apollo-server-express graphql

إعداد Apollo Server

قم بتعديل server.js لإعداد Apollo Server مع Express:

const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
const app = express();
const PORT = process.env.PORT || 4000;

// تعريف المخطط
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// تعريف المحللات
const resolvers = {
  Query: {
    hello: () => 'مرحبًا بالعالم!',
  },
};

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

// تطبيق البرامج الوسيطة لربط ApolloServer مع Express
server.applyMiddleware({ app });

app.listen(PORT, () => {
  console.log(`الخادم يعمل على المنفذ ${PORT}${server.graphqlPath}`);
});

يقوم هذا الكود بإعداد خادم Apollo أساسي مع استعلام واحد hello الذي يُرجع "مرحبًا بالعالم!".

تحديد مخططات GraphQL والمحولات

الآن بعد أن لدينا خادم GraphQL أساسي يعمل، دعنا نغوص أعمق في المخططات والمحولات.

ما هو المخطط؟

يعرف مخطط GraphQL الأنواع والعلاقات في واجهة برمجة التطبيقات الخاصة بك. يصف ما يمكن القيام به من استعلامات وما يمكن استرجاعه من البيانات.

ما هي المحولات؟

المحولون هم وظائف تتعامل مع استرجاع البيانات لحقل معين في المخطط الخاص بك. يخبرون GraphQL كيفية الحصول على البيانات لكل استعلام.

تحديد مخططات أكثر تعقيدًا

قم بتوسيع typeDefs وresolvers في server.js:

const typeDefs = gql`
  type Book {
    title: String
    author: String
  }

  type Query {
    books: [Book]
  }
`;

const books = [
  {
    title: 'الصحوة',
    author: 'كيت شوبان',
  },
  {
    title: 'مدينة الزجاج',
    author: 'بول أوستر',
  },
];

const resolvers = {
  Query: {
    books: () => books,
  },
};

هذا المخطط يحدد نوع Book واستعلام books الذي يُرجع قائمة بالكتب.

الاتصال بقاعدة بيانات

لتطبيق في العالم الحقيقي، ستحتاج إلى الاتصال بواجهة برمجة التطبيقات الخاصة بك بقاعدة بيانات. دعنا نستخدم MongoDB كمثال هنا.

إعداد MongoDB

قم بالتسجيل للحصول على حساب مجاني على MongoDB Atlas أو إعداد مثيل محلي من MongoDB. ثم، قم بتثبيت mongoose للتفاعل مع MongoDB من Node.js:

npm install mongoose

الاتصال بـ MongoDB

قم بتعديل server.js للاتصال بـ MongoDB:

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/graphql', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'خطأ في الاتصال:'));
db.once('open', () => {
  console.log('متصل بـ MongoDB');
});

// تعريف مخطط وموديل Mongoose
const bookSchema = new mongoose.Schema({
  title: String,
  author: String,
});

const Book = mongoose.model('Book', bookSchema);

// تعديل المحول لاسترجاع البيانات من MongoDB
const resolvers = {
  Query: {
    books: async () => await Book.find(),
  },
};

الآن، يقوم استعلام books باسترجاع البيانات من MongoDB.

تحسين واجهة برمجة التطبيقات GraphQL الخاصة بك

لضمان فعالية وموثوقية واجهة برمجة التطبيقات GraphQL الخاصة بك، ضع في اعتبارك تقنيات التحسين التالية:

DataLoader لتحميل دفعات البيانات بكفاءة

DataLoader هي أداة لتحميل البيانات بكفاءة وذاكرة تخزين مؤقت. يساعد في تقليل عدد طلبات قاعدة البيانات.

قم بتثبيت DataLoader:

npm install dataloader

استخدم DataLoader في المحولات الخاصة بك:

const DataLoader = require('dataloader');

const bookLoader = new DataLoader(async (keys) => {
  const books = await Book.find({ _id: { $in: keys } });
  return keys.map((key) => books.find((book) => book.id === key));
});

const resolvers = {
  Query: {
    books: async () => await bookLoader.loadAll(),
  },
};

التخزين المؤقت

قم بتنفيذ استراتيجيات التخزين المؤقت لتجنب تحميل البيانات مرارًا وتكرارًا. يمكنك استخدام ذاكرة تخزين مؤقت في الذاكرة مثل Redis لتخزين البيانات المطلوبة بشكل متكرر.

تقسيم الصفحات

بالنسبة للاستعلامات التي تُرجع مجموعات بيانات كبيرة، نفذ تقسيم الصفحات لاسترجاع البيانات في قطع. استخدم معلمات limit وskip لتقسيم النتائج.

اختبار واجهة برمجة التطبيقات الخاصة بك باستخدام Apidog

اختبار واجهة برمجة التطبيقات الخاصة بك أمر بالغ الأهمية لضمان عملها كما هو متوقع. Apidog يبسط هذه العملية بواجهة مرنة وميزات قوية.

الخطوة 1: افتح Apidog وأنشئ طلبًا جديدًا.

الخطوة 2: ابحث عن أو قم بإدخال تفاصيل واجهة برمجة التطبيقات يدوياً لطلب POST الذي تريد إنشاؤه.

الخطوة 3: املأ المعلمات المطلوبة وأي بيانات تريد تضمينها في جسم الطلب.

من خلال دمج Apidog في سير العمل الخاص بك، يمكنك توفير الوقت وتجنب الأخطاء الشائعة في تطوير واجهات برمجة التطبيقات. بالإضافة إلى ذلك، إنه مجاني للتنزيل والاستخدام!

Apidog مع GraphQL الخاص بك

بمجرد تثبيت Apidog، يمكنك استيراد مخطط GraphQL الخاص بك لإدارة واختبار واجهة برمجة التطبيقات الخاصة بك بشكل أكثر كفاءة. انتقل إلى قسم الاستيراد في Apidog وقم بتحميل ملف schema.graphqls الخاص بك.

​أدخل استعلامك في مربع الاستعلام في علامة "تشغيل". يمكنك أيضًا النقر على زر Fetch Schema اليدوي في مربع الإدخال لتمكين ميزة "إكمال الكود" لعبارات الاستعلام، مما يساعد في إدخال استعلامات.

مع استيراد مخططك، يمكنك استخدام Apidog لاختبار استعلاماتك وتعديلاتك، وتوليد الوثائق، وحتى تزييف الاستجابات. سيساعدك ذلك على ضمان عمل واجهة برمجة التطبيقات الخاصة بك بشكل متوقع وتقديم دليل شامل لمستخدمي واجهة برمجة التطبيقات الخاصة بك.

استخدم ميزات الاختبار التلقائي في Apidog لتشغيل حالات اختبارك في جدول زمني. يساعد ذلك على اكتشاف أي مشكلات مبكراً ويضمن بقاء واجهة برمجة التطبيقات الخاصة بك موثوقة.

أفضل الممارسات لبناء واجهات برمجة التطبيقات

يتطلب بناء واجهات برمجة التطبيقات قوية وقابلة للتوسع اتباع أفضل الممارسات. إليك بعض النصائح الرئيسية:

استخدام رسائل خطأ وصفية

تأكد من أن واجهة برمجة التطبيقات الخاصة بك تُرجع رسائل خطأ ذات معنى لمساعدة العملاء على فهم ما الذي حدث خطأ.

تأمين واجهة برمجة التطبيقات الخاصة بك

قم بتنفيذ آليات المصادقة والتفويض لحماية واجهة برمجة التطبيقات الخاصة بك من الوصول غير المصرح به.

توثيق واجهة برمجة التطبيقات الخاصة بك

قدم وثائق واضحة وشاملة لواجهة برمجة التطبيقات الخاصة بك. يمكن لأدوات مثل Swagger وGraphQL Playground المساعدة في توليد الوثائق التفاعلية.

مراقبة الأداء

استخدم أدوات المراقبة لتتبع أداء واجهة برمجة التطبيقات الخاصة بك. حدد وحل عنق الزجاجة في الأداء بسرعة.

حافظ على تنظيم قاعدة الشيفرة الخاصة بك

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

الاستنتاج

تهانينا! لقد تعلمت كيفية بناء واجهة برمجة تطبيقات GraphQL قوية باستخدام Node.js وExpress. لقد غطينا كل شيء من إعداد بيئة تطويرك إلى تحديد المخططات والمحولات، والاتصال بقاعدة بيانات، وتحسين واجهة برمجة التطبيقات الخاصة بك، واختبارها باستخدام Apidog.

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