GraphQL في TypeScript: مكتبات لواجهات برمجة تطبيقات آمنة من حيث الأنواع

GraphQL في TypeScript: نظرة شاملة على المكتبات والأدوات

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

لماذا TypeScript مع GraphQL؟

استعلامات واستجابات GraphQL لها بنية صارمة، ويسمح TypeScript بالتحقق من هذه البنية في مرحلة التجميع. هذا يلغي فئة كاملة من الأخطاء المتعلقة بأنواع البيانات غير الصحيحة. المزايا الرئيسية:

• أمان الأنواع — توليد تلقائي للأنواع من مخطط GraphQL
• الإكمال التلقائي — يقترح IDE الحقول وأنواع الاستعلامات
• إعادة الهيكلة — تغيير المخطط يحدث تلقائيًا جميع استعلامات العميل
• تقليل الأخطاء — يتم اكتشاف أخطاء الأنواع قبل تنفيذ الكود

المكتبات الرئيسية لجانب الخادم

1. TypeGraphQL

TypeGraphQL هي المكتبة الأكثر شيوعًا لإنشاء واجهات برمجة تطبيقات GraphQL على TypeScript. تستخدم الديكورات لتحديد المخطط والمحللين.

التثبيت:

npm install type-graphql graphql reflect-metadata

مثال على تعريف نوع ومحلل:

import { ObjectType, Field, Int, Resolver, Query, Arg } from "type-graphql";

@ObjectType()class User {  @Field(() => Int)  id: number;

  @Field()  name: string;

  @Field({ nullable: true })  email?: string;}

@Resolver(User)class UserResolver {  @Query(() => User, { nullable: true })  async user(@Arg("id", () => Int) id: number): Promise<User | null> {    // منطق الحصول على المستخدم من قاعدة البيانات    return { id, name: "John", email: "john@example.com" };  }}

بناء المخطط:

import { buildSchema } from "type-graphql";

const schema = await buildSchema({  resolvers: [UserResolver],  emitSchemaFile: true,});

2. GraphQL Yoga

GraphQL Yoga هو خادم GraphQL متعدد الاستخدامات يعمل بشكل ممتاز مع TypeScript. يعتمد على Express ولكنه يدعم أي منصة.

التثبيت:

npm install graphql-yoga graphql

مثال على الخادم:

import { createYoga, createSchema } from "graphql-yoga";import { createServer } from "node:http";

const schema = createSchema({  typeDefs: `    type Query {      hello: String      user(id: Int!): User    }    type User {      id: Int!      name: String    }  `,  resolvers: {    Query: {      hello: () => "Hello, GraphQL!",      user: (_, { id }) => ({ id, name: "Alice" }),    },  },});

const yoga = createYoga({ schema });const server = createServer(yoga);server.listen(4000, () => console.log("Server running on http://localhost:4000/graphql"));

مكتبات جانب العميل

3. Apollo Client (مع دعم TypeScript)

Apollo Client هو عميل قوي للعمل مع GraphQL. مع TypeScript، يوفر تحديدًا كاملاً لأنواع الاستعلامات.

التثبيت:

npm install @apollo/client graphql

مثال على استعلام محدد الأنواع:

import { gql, useQuery } from "@apollo/client";

const GET_USER = gql`  query GetUser($id: Int!) {    user(id: $id) {      id      name      email    }  }`;

interface UserData {  user: {    id: number;    name: string;    email?: string;  };}

function UserProfile({ userId }: { userId: number }) {  const { loading, data } = useQuery<UserData>(GET_USER, {    variables: { id: userId },  });

  if (loading) return <p>جاري التحميل...</p>;  return <p>{data?.user.name}</p>;}