0Pricing
TypeScript Academy · درس

المحلِّلات محددة الأنواع باستخدام GraphQL Code Generator

اكتبوا محلِّلات بأنواع الإدخال والقيمة المُعادة الصحيحة

المحلِّلات محددة الأنواع باستخدام GraphQL Code Generator درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 4 دروس في المجموع.

مشكلة كتابة أنواع المحللات

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

// Without typed resolvers — any type allowed
const userResolver = async (_, { id }) => fetchUser(id);

إضافة مكوّن المحللات

ثبّتوا واضبطوا @graphql-codegen/typescript-resolvers لإنشاء أنواع خرائط المحللات.

npm install --save-dev @graphql-codegen/typescript-resolvers

codegen.yml للمحللات

أضيفوا مخرجات مكوّن المحللات إلى جانب أنواع TypeScript الأساسية.

# codegen.yml
generates:
  src/generated/types.ts:
    plugins:
      - typescript
  src/generated/resolvers.ts:
    plugins:
      - typescript-resolvers

استخدام ResolverMap المُنشأ

طبّقوا النوع المُنشأ Resolvers على كائن خريطة المحللات للحصول على أمان كامل للأنواع.

import { Resolvers } from "./generated/resolvers";

const resolvers: Resolvers = {
  Query: {
    user: async (_, { id }) => fetchUser(id),
    // Return type enforced: must match User schema
  },
};

كتابة نوع السياق

مرّروا نوع السياق إلى النوع العام Resolvers حتى تتلقى دوال المحللات كائن سياق موصوفًا بنوعه.

interface Context { db: Database; user?: AuthUser; }

// codegen.yml
config:
  contextType: "src/context#Context"

// Generated: Resolvers<Context>
const resolvers: Resolvers<Context> = {
  Query: {
    me: (_, __, ctx) => ctx.user, // ctx: Context
  },
};

أنواع التعيين

تتيح لكم أنواع التعيين ربط أنواع GraphQL بأنواع النماذج الداخلية، بحيث يمكن للمحللات إعادة كائنات المجال بدلًا من أنواع مخرجات GraphQL.

# codegen.yml
config:
  mappers:
    User: "src/models#UserModel"

كتابة أنواع محللات الحقول

تُكتب أنواع محللات الحقول الفردية في الأنواع أيضًا، بما في ذلك وسيطا الأصل والسياق.

// Typed field resolver on User type
const resolvers: Resolvers<Context> = {
  User: {
    fullName: (parent) => `${parent.firstName} ${parent.lastName}`,
    // parent is UserModel (from mapper)
  },
};

الطفرات الموصوفة بالأنواع

تتلقى محللات الطفرات وسائط إدخال موصوفة بالأنواع ومشتقة من أنواع الإدخال في المخطط.

// Schema: createUser(input: CreateUserInput!): User!
const resolvers: Resolvers = {
  Mutation: {
    createUser: (_, { input }) => {
      // input: CreateUserInput — fully typed
      return createUser(input.name, input.email);
    },
  },
};

الاشتراكات الموصوفة بالأنواع

تحتوي محللات الاشتراكات على دالة subscribe ودالة resolve، وتكون كلتاهما موصوفتين بالأنواع عبر codegen.

const resolvers: Resolvers = {
  Subscription: {
    messageAdded: {
      subscribe: () => pubsub.asyncIterator("MESSAGE_ADDED"),
      resolve: (payload) => payload.messageAdded, // typed
    },
  },
};

الحفاظ على تزامن Codegen

أضيفوا خطافًا قبل البناء أو قبل الإيداع لإعادة إنشاء أنواع المحللات عند تغير المخطط، مما يمنع وصول الأنواع القديمة إلى الإنتاج.

// package.json
{
  "scripts": {
    "predev": "graphql-codegen",
    "prebuild": "graphql-codegen"
  }
}

مراجعة: المحللات الموصوفة بالأنواع

ينشئ مكوّن codegen typescript-resolvers نوعًا باسم Resolvers يفرض أشكال الإرجاع الصحيحة وأنواع الوسائط وبنية السياق عبر جميع محللات GraphQL لديكم.

تحقّق سريع

ماذا يفعل خيار الإعداد contextType في codegen؟

ما تعلّمتموه

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

الأسئلة الشائعة

هل درس «المحلِّلات محددة الأنواع باستخدام GraphQL Code Generator» مجاني؟

نعم — نص درس «المحلِّلات محددة الأنواع باستخدام GraphQL Code Generator» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «المحلِّلات محددة الأنواع باستخدام GraphQL Code Generator»؟

اكتبوا محلِّلات بأنواع الإدخال والقيمة المُعادة الصحيحة تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟

لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «المحلِّلات محددة الأنواع باستخدام GraphQL Code Generator»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟

نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. تحويل مخطط GraphQL إلى أنواع TypeScript
  2. المحلِّلات محددة الأنواع باستخدام GraphQL Code Generator
  3. عميل GraphQL محدد الأنواع باستخدام Apollo وurql
  4. أمان الأنواع من البداية إلى النهاية: سير عمل المخطط أولًا
← العودة إلى TypeScript Academy