تحويل GraphQL إلى أنواع Flow — Numio

متى تستخدمها

• إضافة نتائج GraphQL مُنمَّطة إلى قاعدة شيفرة لا تزال تُفحص أنواعها بـ Flow بدلًا من TypeScript.
• إنشاء أنواع المتغيرات والنتيجة لاستعلام واحد للصقها بجوار مكوّن.

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

1. الصق SDL الخاص بالمخطط في محرر GraphQL Schema.
2. أدخل العمليات التي تستخدمها في محرر Document، أو أفرغه إذا كنت تحتاج أنواع المخطط فقط.
3. انسخ المخرجات التي تبدأ بـ // @flow إلى ملف .js يخضع لـ Flow.

# 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 }
}

// @flow
…
export type User = {|
  __typename?: "User",
  id: $ElementType<Scalars, "ID">,
  name?: ?$ElementType<Scalars, "String">,
  tags: Array<$ElementType<Scalars, "String">>,
|}

export type GetUserQueryVariables = {
  id: $ElementType<Scalars, "ID">,
}

export type GetUserQuery = {
  ...{ __typename?: "Query" },
  ...{|
    user?: ?{
      ...{ __typename?: "User" },
      ...$Pick<User, {| id: *, name?: * |}>,
    },
  |},
}

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

تشير الحقول إلى الأنواع العددية عبر $ElementType<Scalars, "ID">؛ ونوع Scalars في البداية (محذوف أعلاه) يربط ID وString بـ string، وInt وFloat بـ number.

تُبنى أنواع نتائج العمليات من object spread ومساعد $Pick محلي، فلا يظهر إلا الحقول المحددة.

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

FAQ

أدوات ذات صلة

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

• GraphQL Code Generator: flow plugin