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

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

GraphQL هي لغة استعلام حديثة لواجهات API، تتيح للعملاء طلب البيانات التي يحتاجونها فقط. وبالاقتران مع TypeScript، الذي يضيف كتابة صارمة، يصبح التطوير أكثر قابلية للتنبؤ وأمانًا. في هذا البرنامج التعليمي خطوة بخطوة، سنقوم بإنشاء GraphQL API كامل باستخدام TypeScript، مع استخدام الأدوات الشائعة وأفضل الممارسات.

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

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

للبدء، سنقوم بإنشاء مشروع جديد وتثبيت الحزم اللازمة. سنستخدم Apollo Server — الخادم الأكثر شيوعًا لـ GraphQL، و TypeGraphQL للتكامل السلس مع TypeScript.

mkdir graphql-ts-tutorialcd graphql-ts-tutorialnpm init -ynpm install apollo-server graphql reflect-metadata class-validatornpm install typescript type-graphql @types/node --save-devnpx tsc --init

بعد التثبيت، سنقوم بتكوين tsconfig.json. تأكد من تضمين الخيارات التالية:

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "lib": ["ES2020"],    "experimentalDecorators": true,    "emitDecoratorMetadata": true,    "outDir": "./dist",    "rootDir": "./src",    "strict": true,    "esModuleInterop": true  }}

سنقوم بإنشاء هيكل المجلدات:

src/  ├── index.ts  ├── resolvers/  │   └── user.resolver.ts  ├── schemas/  │   └── user.schema.ts  └── data/      └── users.ts

إنشاء المخطط وأنواع البيانات

في TypeGraphQL، يتم وصف أنواع البيانات باستخدام الديكورات. سنقوم بإنشاء نموذج مستخدم ونوع بيانات الإدخال للـ mutation.

// src/schemas/user.schema.tsimport { ObjectType, Field, ID, InputType } from "type-graphql";

@ObjectType()export class User {  @Field(() => ID)  id!: number;

  @Field()  name!: string;

  @Field()  email!: string;

  @Field({ nullable: true })  age?: number;}

@InputType()export class CreateUserInput {  @Field()  name!: string;

  @Field()  email!: string;

  @Field({ nullable: true })  age?: number;}

لاحظ استخدام @ObjectType() لوصف الأنواع المُعادة و @InputType() للمعلمات المُدخلة. هذا يسمح لـ TypeGraphQL بتوليد مخطط GraphQL تلقائيًا.

تنفيذ الـ Resolvers

الـ Resolvers هي دوال تقوم بمعالجة الاستعلامات وإرجاع البيانات. سنقوم بإنشاء مصفوفة بسيطة في الذاكرة لتخزين المستخدمين.

// src/data/users.tsimport { User } from "../schemas/user.schema";

export const users: User[] = [  { id: 1, name: "إيوان بيتروف", email: "ivan@example.com", age: 28 },  { id: 2, name: "ماريا سيدوروفا", email: "maria@example.com", age: 32 },];

الآن سنقوم بكتابة الـ resolvers للاستعلامات والـ mutations:

// src/resolvers/user.resolver.tsimport { Resolver, Query, Mutation, Arg, Int } from "type-graphql";import { User, CreateUserInput } from "../schemas/user.schema";import { users } from "../data/users";

@Resolver()export class UserResolver {  @Query(() => [User])  async getAllUsers(): Promise<User[]> {    return users;  }

  @Query(() => User, { nullable: true })  async getUserById(    @Arg("id", () => Int) id: number  ): Promise<User | undefined> {    return users.find(user => user.id === id);  }

  @Mutation(() => User)  async createUser(    @Arg("input") input: CreateUserInput  ): Promise<User> {    const newUser: User =