انتقل إلى المحتوى
Numio

تحويل GraphQL إلى تعريفات TypeScript — Numio

يُنشئ أنواع TypeScript من مخطط GraphQL باستخدام @graphql-codegen/typescript، إضافة إلى أنواع النتيجة والمتغيرات لأي عمليات في لوحة Document. تصبح الحقول القابلة لـ null خصائص Maybe<T> اختيارية، وتصبح القوائم غير القابلة لـ null بصيغة Array<T>.

تنميط البيانات التي يعيدها استعلام في الواجهة الأمامية دون إعداد codegen.yml وتشغيل CLI.

GraphQL Schema

Document

TypeScript

متى تستخدمها

  • تنميط البيانات التي يعيدها استعلام في الواجهة الأمامية دون إعداد codegen.yml وتشغيل CLI.
  • التحقق من شكل تغيير في المخطط (حقل يصبح قابلًا لـ null، أو قيمة enum جديدة) في TypeScript المُنشأ قبل اعتماده.

طريقة الاستخدام

  1. الصق SDL الخاص بك (تعريفات type وenum وinterface وunion وscalar) في محرر GraphQL Schema.
  2. ضع queries أو mutations أو fragments في محرر Document، أو أفرغه للحصول على أنواع المخطط فقط؛ ويُتخطّى المستند الذي لا يطابق المخطط مع تعليق تحذيري.
  3. انسخ الأنواع المُنشأة: أنواع المخطط مثل User، إضافة إلى GetUserQuery وGetUserQueryVariables لكل عملية مسمّاة.

مخطط GraphQL + document

# GraphQL Schema editor
type Query {
  user(id: ID!): User
}

type User {
  id: ID!
  name: String
  tags: [String!]!
}

# Document editor
query GetUser($id: ID!) {
  user(id: $id) { id name }
}

أنواع TypeScript

…
export type Query = {
  __typename?: "Query"
  user?: Maybe<User>
}

export type QueryUserArgs = {
  id: Scalars["ID"]["input"]
}

export type User = {
  __typename?: "User"
  id: Scalars["ID"]["output"]
  name?: Maybe<Scalars["String"]["output"]>
  tags: Array<Scalars["String"]["output"]>
}

export type GetUserQueryVariables = Exact<{
  id: Scalars["ID"]["input"]
}>

export type GetUserQuery = {
  __typename?: "Query"
  user?: { __typename?: "User"; id: string; name?: string | null } | null
}

التفاصيل والقيود

تبدأ المخرجات بأنواع مساعدة ثابتة (Maybe وInputMaybe وExact وMakeOptional وScalars و…)، مختصرة إلى '…' أعلاه. يربط Scalars كل نوع عددي بنوعين منفصلين للإدخال والإخراج.

تُنمَّط الأنواع العددية المخصصة مثل Date بـ any؛ وتصبح قيم enum نوع enum في TypeScript بمفاتيح PascalCase (يصبح USER هو User = "USER").

يجري الإنشاء في Web Worker داخل متصفحك؛ ولا يُرفع أي شيء. تُنسَّق النتيجة بـ Prettier دون فواصل منقوطة، ولا توجد في الصفحة خيارات لإعداد codegen.

FAQ

لماذا تبدأ المخرجات بـ "// Document ignored"؟

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

كيف تُنمَّط الحقول القابلة لـ null؟

الحقل القابل لـ null مثل name: String يصبح name?: Maybe<Scalars["String"]["output"]>، حيث Maybe<T> هو T | null. وفي أنواع نتائج العمليات يُكتب مباشرة بصيغة name?: string | null.

هل يتضمن نوع الاستعلام الحقول المحددة فقط؟

نعم. يحتوي GetUserQuery على الحقول التي يحددها الاستعلام فقط (id وname هنا)، مع __typename كخاصية اختيارية، بينما يُنشأ نوع User الكامل بشكل منفصل.

المواصفات والمراجع