GraphQLからTS型生成
GraphQL Code Generator

GraphQL SDL to TypeScript Types & Interfaces Converter

GraphQL スキーマ定義言語 (SDL) の type、input、enum をクリーンで依存関係ゼロの TypeScript インターフェースや型エイリアスにブラウザ上で直接変換します。

プリセット:
入力
/**
 * -----------------------------------------------------------------------------
 * GraphQL SDL to TypeScript Types & Interfaces
 * Zero-dependency, client-synthesized TypeScript definitions.
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
 * GRAPHQL SCALARS & UTILITY HELPER TYPES
 * ============================================================================= */

export type Maybe<T> = T | null;
export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };

/** All custom GraphQL scalar types defined in schema */
export type DateTime = string;
export type JSON = Record<string, any>;


/* =============================================================================
 * ENUMS
 * ============================================================================= */

export enum UserRole {
  ADMIN = 'ADMIN',
  CUSTOMER = 'CUSTOMER',
  VENDOR = 'VENDOR',
}

export enum OrderStatus {
  PENDING = 'PENDING',
  PROCESSING = 'PROCESSING',
  SHIPPED = 'SHIPPED',
  DELIVERED = 'DELIVERED',
  CANCELLED = 'CANCELLED',
}


/* =============================================================================
 * GRAPHQL INTERFACES, OBJECT TYPES & UNIONS
 * ============================================================================= */

export interface Node {
  id: string;
}

export interface Timestamps {
  createdAt: string;
  updatedAt: string | null;
}

/**
 * Represents a customer or administrator account in the store.
 */
export interface User extends Node, Timestamps {
  id: string;
  email: string;
  displayName: string;
  role: UserRole;
  orders: Order[];
  defaultAddress: Address | null;
  createdAt: string;
  updatedAt: string | null;
}

export interface Product extends Node, Timestamps {
  id: string;
  sku: string;
  title: string;
  price: number;
  inventoryCount: number;
  tags: string[];
  createdAt: string;
  updatedAt: string | null;
}

export interface Order extends Node, Timestamps {
  id: string;
  orderNumber: string;
  customer: User;
  status: OrderStatus;
  items: OrderItem[];
  totalAmount: number;
  shippingAddress: Address;
  createdAt: string;
  updatedAt: string | null;
}

export interface OrderItem {
  id: string;
  product: Product;
  quantity: number;
  unitPrice: number;
}

export interface Address {
  street: string;
  city: string;
  postalCode: string;
  country: string;
}

export interface Query {
  me: User | null;
  user: User | null;
  product: Product | null;
  products: Product[];
  search: SearchResult[];
}

export interface Mutation {
  createProduct: Product;
  checkoutCart: Order;
  cancelOrder: Order;
}

export type SearchResult = Product | User | Order;


/* =============================================================================
 * GRAPHQL INPUT OBJECTS & OPERATION ARGUMENTS
 * ============================================================================= */

export interface CreateProductInput {
  sku: string;
  title: string;
  price: number;
  inventoryCount?: number | null;
  tags?: string[] | null;
}

export interface CheckoutCartInput {
  userId: string;
  itemIds: string[];
  shippingAddress: AddressInput;
}

export interface AddressInput {
  street: string;
  city: string;
  postalCode: string;
  country: string;
}

/**
 * Arguments for User.orders
 */
export interface UserOrdersArgs {
  limit?: number | null;
  offset?: number | null;
}

/**
 * Arguments for Query.user
 */
export interface QueryUserArgs {
  id: string;
}

/**
 * Arguments for Query.product
 */
export interface QueryProductArgs {
  id: string;
}

/**
 * Arguments for Query.products
 */
export interface QueryProductsArgs {
  limit?: number | null;
  cursor?: string | null;
}

/**
 * Arguments for Query.search
 */
export interface QuerySearchArgs {
  query: string;
  limit?: number | null;
}

/**
 * Arguments for Mutation.createProduct
 */
export interface MutationCreateProductArgs {
  input: CreateProductInput;
}

/**
 * Arguments for Mutation.checkoutCart
 */
export interface MutationCheckoutCartArgs {
  input: CheckoutCartInput;
}

/**
 * Arguments for Mutation.cancelOrder
 */
export interface MutationCancelOrderArgs {
  orderId: string;
  reason?: string | null;
}

スキーマシンボル数
15 エンティティ
Object types, inputs, interfaces, enums and unions parsed
フィールド定義
56 個生成済み
TypeScript型定義および引数スキーマ
Compilation Speed
$<span suppressHydrationWarning>{generated.metrics.parseTimeMs}ms</span> (純クライアントAST)
説明

ゼロナレッジ・完全ローカル実行

すべてのデータ処理、解析、コード生成はお使いのブラウザ内部メモリで完結します。外部サーバーへの送信はゼロです。

超高速・即時リアクティブ演算

最適化されたクライアント側解析パイプラインにより、キーストロークと同時に遅延なくリアルタイムで結果を生成します。

公式仕様準拠・高信頼アーキテクチャ

IETF RFCや公式業界仕様に厳格に準拠し、エッジケースの安全な処理とメモリリークのない堅牢な実行を保証します。

技術リファレンス&アーキテクチャガイド

GraphQL SDL to TypeScript 型・インターフェース変換ツール — リファレンスガイド

GraphQL スキーマ定義言語 (SDL) の type、input、enum をクリーンで依存関係ゼロの TypeScript インターフェースや型エイリアスにブラウザ上で直接変換します。

主要パラメータ&設定項目

宣言フォーマットEnum (interface | type)

TypeScript 出力形式を拡張可能な interface または厳格な type エイリアスから選択します。

初期値: interface
Null 許容フィールド戦略Enum (null | undefined | both)

非 null 修飾子 (!) を持たないオプション/Nullable な GraphQL フィールドの型付け戦略を指定します。

初期値: both
配列の記法Enum (T[] | Array<T>)

GraphQL のリストコレクション [Type] に対する TypeScript 配列記法を指定します。

初期値: T[]
Enum の表現形式Enum (enum | union | const_object)

GraphQL enum の出力スタイル (TypeScript enum、文字列リテラル共用体、または const アサーションオブジェクト) を設定します。

初期値: union
カスタムスカラーマッピングRecord<string, string>

独自スカラー型 (DateTime, JSON, UUID など) を TypeScript の基本型にマッピングする JSON 辞書です。

初期値: {"DateTime": "string", "JSON": "Record<string, unknown>"}

プロの活用テクニック&推奨設定

__typenameによる型絞り込み

生成されるインターフェースに __typename プロパティを含めることで、Apollo Client や Urql などのキャッシュ正規化や判別可能な共用体 (Discriminated Union) の型絞り込みを自動化できます。

文字列リテラル共用体の採用

TypeScript の標準 enum ではなく文字列リテラル共用体 ("ADMIN" | "USER") を出力することで、コンパイル後の JS コード肥大化を防ぎ、Tree-shaking の効果を最大化できます。

入力型とエンティティの分離

GraphQL の input オブジェクト型と Query/Mutation 引数を明確に分離して型定義 (例: CreateUserInput) することで、API コール用コンポーネントの型安全性を向上させます。

配列のNull許容性の区別

GraphQL リストの感嘆符の位置に注目してください: [Item!]! は Item[]、[Item]! は (Item | null)[]、[Item!] は Item[] | null に厳密に対応します。

よくあるトラブルと解決策

カスタムスカラー型で TS2304: Cannot find name エラーが発生する

「カスタムスカラーマッピング」設定で、DateTime や JSON などのスカラー型を string や Record<string, unknown> などの有効な TypeScript 型に明示的に対応付けてください。

再帰的な GraphQL 型定義で循環型の参照エラーが発生する

宣言フォーマットを "type" エイリアスから "interface" に切り替えてください。TypeScript の interface は再帰的および相互参照定義を制限なくサポートします。

スキーマディレクティブで構文解析エラーや警告が出る

本ツールは @deprecated ディレクティブを標準の JSDoc コメントに自動変換します。その他のカスタムディレクティブが有効な SDL AST 構文に準拠しているか確認してください。

よくある質問 (FAQ)

GraphQL の非 null (!) 制約は TypeScript でどのように変換されますか?▼

感嘆符が付いたフィールド (例: name: String!) は必須プロパティ (name: string) にマッピングされます。! がないフィールドは設定された戦略に応じて省略可能または nullable (name?: string | null) となります。

GraphQL の Union (共用体) や Interface 型にも対応していますか?▼

はい。GraphQL の interface は継承可能な TypeScript interface に変換され、GraphQL union は __typename を判別子として持つ TypeScript の判別可能共用体型に変換されます。

@deprecated などのスキーマディレクティブは型定義に反映されますか?▼

はい。SDL 内の @deprecated(reason: "...") ディレクティブは自動解析され、生成される TypeScript プロパティの直前に JSDoc の /** @deprecated ... */ 注釈として出力されます。

入力した GraphQL SDL スキーマが外部サーバーに送信されることはありますか?▼

一切ありません。すべての SDL 構文解析、AST 構築、TypeScript コード生成はブラウザ内のローカル環境で 100% 完結して実行され、外部への通信は行われません。

GraphQL の input 型と通常の type 型の両方を変換できますか?▼

はい。GraphQL の type 宣言だけでなく input オブジェクト宣言も完全にサポートしており、ミューテーションペイロード用の型安全なインターフェースを生成できます。

関連するおすすめ開発ツール

すべてのツール →
Kubernetes ConfigMap & Secret YAML ジェネレーター開発ツール

Base64データエンコード、stringData、TLS、Dockerレジストリ認証、およびimmutableリソースフラグに対応したKubernetes ConfigMapおよびSecretマニフェスト生成ユーティリティ。

ツールを開く→
Kubernetes HorizontalPodAutoscaler (HPA v2) 生成ツール開発ツール

CPU・メモリ使用率ターゲット、カスタムメトリクス、スケールアップ/ダウンの安定化ポリシーを含む Kubernetes HPA v2 (autoscaling/v2) マニフェストを生成します。

ツールを開く→
Redis (redis.conf) 本番運用設定ビルダー&チューニングガイド開発ツール

maxmemory退避ポリシー、RDB/AOF永続化、ネットワークバインド、セキュリティACL認証を最適化したredis.conf設定ファイルを即座に生成・調整します。

ツールを開く→
PostgreSQL (postgresql.conf) ハードウェアチューニング&構成ビルダー開発ツール

ハードウェアスペック(RAM、CPU、ストレージ種別)に基づき、shared_buffers、work_mem、effective_cache_size、max_connections などの最適化された postgresql.conf 設定を自動計算・生成します。

ツールを開く→
Linux Systemd (.timer & .service) ユニット生成ツール開発ツール

OnCalendar スケジューリング、OnBootSec インターバル、Persistent 実行、ランダム遅延(ジッター)を備えた実用的な systemd タイマーおよびコンパニオンサービスユニットを設計・生成します。

ツールを開く→
TypeScript (tsconfig.json) 設定ジェネレーター開発ツール

Next.js、Node.js、Vite、ライブラリ開発に最適な現代的で堅牢な tsconfig.json 設定を生成。厳格モード、パスエイリアス、モジュール解決を完全サポート。

ツールを開く→