GraphQL API مع TypeScript: دليل خطوة بخطوة للمبتدئين

مقدمة إلى GraphQL و TypeScript

GraphQL هي لغة استعلام لواجهات API تتيح للعملاء طلب البيانات التي يحتاجونها فقط. وبالاقتران مع TypeScript، الذي يضيف كتابة الأنواع الثابتة (Static Typing) إلى JavaScript، تحصل على أداة قوية لإنشاء واجهات API موثوقة وقابلة للتوسع. في هذا الدليل التعليمي، سنقوم خطوة بخطوة بإنشاء GraphQL API بسيط باستخدام TypeScript. ستتعلم كيفية إعداد المشروع، تعريف المخطط، كتابة المحللات (Resolvers)، وتنفيذ الاستعلامات.

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

الخطوة 1: إعداد المشروع

قبل كتابة الكود، يجب تهيئة المشروع وتثبيت التبعيات. سنستخدم Apollo Server - واحدة من أشهر المكتبات للعمل مع GraphQL في Node.js.

تهيئة npm

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

mkdir graphql-typescript-tutorialcd graphql-typescript-tutorialnpm init -y

تثبيت التبعيات

قم بتثبيت الحزم اللازمة:

npm install apollo-server graphqlnpm install typescript ts-node @types/node --save-dev

• apollo-server - خادم لمعالجة استعلامات GraphQL.
• graphql - جوهر لغة GraphQL.
• typescript و ts-node - لتجميع وتشغيل TypeScript.

إعداد TypeScript

أنشئ ملف tsconfig.json في جذر المشروع:

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "strict": true,    "esModuleInterop": true,    "outDir": "./dist",    "rootDir": "./src"  },  "include": ["src/**/*"],  "exclude": ["node_modules"]}

أنشئ مجلد src وملف index.ts - سيكون فيه الكود الرئيسي للخادم.

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

يصف مخطط GraphQL البيانات المتاحة وكيفية طلبها. في TypeScript، سنستخدم سلسلة نصية بتركيب gql لتعريف الأنواع.

المخطط الأساسي

افتح src/index.ts وأضف الكود التالي:

import { ApolloServer, gql } from 'apollo-server';

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

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

هنا قمنا بتعريف النوع Book مع الحقول id و title و author. يحتوي Query على استعلامين: الحصول على جميع الكتب والحصول على كتاب واحد بواسطة المعرف (ID).

بيانات وهمية

لأغراض الاختبار، سنضيف مصفوفة من الكتب:

const books = [  { id: '1', title: 'الحرب والسلام', author: 'ليو تولستوي' },  { id: '2', title: 'الجريمة والعقاب', author: 'فيودور دوستويفسكي' },];

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

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

تنفيذ المحللات

أضف كائن resolvers:

const resolvers = {  Query: {    books: () => books,    book: (_: any, args: { id: string }) => {      return books.find(book => book.id === args.id);    },  },};

الوسيطة الأولى _ هي الكائن الأصلي (غير مستخدمة هنا). الوسيطة الثانية args تحتوي على معاملات الاستعلام، مثل id.

بناء الخادم

الآن سننشئ مثيلاً للخادم ونشغله:

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

server.listen().then(({ url }) => {  console.log(`🚀 الخادم يعمل على ${url}`);});