تحويل مخطط GraphQL إلى أنواع TypeScript

المشكلة: انجراف المخطط والأنواع

# Without codegen: manual types that drift from schema
interface User { id: string; name: string; } // may not match schema

GraphQL Code Generator

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

إعداد codegen.yml

# codegen.yml
schema: "./api/schema.graphql"
generates:
  src/generated/types.ts:
    plugins:
      - typescript

تشغيل المولّد

npx graphql-codegen
# Generates src/generated/types.ts with all schema types

مثال على المخرجات المُنشأة

// src/generated/types.ts (generated)
export type User = {
  __typename?: "User";
  id: string;
  name: string;
  email: string;
};

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

مخطط من نقطة نهاية بعيدة

# codegen.yml with remote schema
schema:
  - https://api.example.com/graphql:
      headers:
        Authorization: "Bearer ${AUTH_TOKEN}"

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

# codegen.yml
config:
  scalars:
    DateTime: string
    JSON: Record<string, unknown>
    Upload: File

معالجة التعدادات

# Generated from GraphQL enum Role { ADMIN USER GUEST }
export enum Role {
  Admin = "ADMIN",
  User = "USER",
  Guest = "GUEST",
}

القيم غير الخالية وMaybe

// GraphQL: name: String (nullable)
// Generated: name?: Maybe<string>

// GraphQL: id: ID! (non-null)
// Generated: id: string

التكامل مع CI

# CI: check no drift
npx graphql-codegen --check
# Exits 1 if generated files are out of date

مراجعة: من المخطط إلى الأنواع

تحقّق سريع

ما تعلّمتموه