Générateur GraphQL vers TypeScript

Générateur GraphQL vers TypeScript

Convertissez vos schémas SDL et requêtes GraphQL en types, interfaces, énumérations et résolveurs TypeScript. Génération instantanée dans le navigateur, sans configuration ni transfert serveur.

Modèles
Écosystème cible de génération
Source du schéma GraphQL (SDL ou introspection JSON)
Mappages scalaires rapides :
Export prêt pour la production
12Nodes
AST Architecture
Object: 6Interface: 1Enum: 1Input: 1
83%Strict
Nullability Guard

High non-null strictness (safe against unexpected runtime undefined).

Schéma AST valide
/**
 * Strongly Typed GraphQL TypeScript Artifacts
 * Generated via ToolsAA In-Browser Codegen Engine [Regime: strict-modern]
 * 100% In-Browser AST synthesis - Zero server upload
 */

type Maybe<T> = T | null;

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

/** All Built-In & Custom GraphQL Scalars */
type Scalars = {
  DateTime: string;
};

type Scalars = {
  JSON: Record<string, unknown>;
};

type Scalars = {
  Money: number;
};

type ProductStatus = 'DRAFT' | 'ACTIVE' | 'ARCHIVED' | 'OUT_OF_STOCK';

type Node = {
  __typename?: string;
  readonly id: string;
  readonly createdAt: string;
  readonly updatedAt: string;
};

type MoneyAmount = {
  __typename?: 'MoneyAmount';
  readonly amount: number;
  readonly currency: string;
};

type ProductVariant = {
  __typename?: 'ProductVariant';
  readonly id: string;
  readonly sku: string;
  readonly title: string;
  readonly price: MoneyAmount;
  readonly inStock: boolean;
  readonly inventoryQuantity: number;
  readonly createdAt: string;
  readonly updatedAt: string;
};

type Review = {
  __typename?: 'Review';
  readonly id: string;
  readonly author: string;
  readonly rating: number;
  readonly comment: Maybe<string>;
  readonly metadata: Maybe<Record<string, unknown>>;
  readonly createdAt: string;
  readonly updatedAt: string;
};

type Product = {
  __typename?: 'Product';
  readonly id: string;
  readonly title: string;
  readonly slug: string;
  readonly description: Maybe<string>;
  readonly status: ProductStatus;
  readonly price: MoneyAmount;
  readonly variants: ReadonlyArray<ProductVariant>;
  readonly reviews: ReadonlyArray<Review>;
  readonly createdAt: string;
  readonly updatedAt: string;
};

type Query = {
  __typename?: 'Query';
  readonly product: Maybe<Product>;
  readonly products: ReadonlyArray<Product>;
};

type Mutation = {
  __typename?: 'Mutation';
  readonly createProduct: Product;
  readonly deleteProduct: boolean;
};

type CreateProductInput = {
  readonly title: string;
  readonly slug: string;
  readonly description?: Maybe<string>;
  readonly price: number;
  readonly currency?: Maybe<String = "USD">;
  readonly status?: Maybe<ProductStatus = DRAFT>;
};
Nombre de types12
Nombre de champs40
Énumérations1
Unions0
Scalaires3
Temps d'exécution< 1ms
Référence technique et guide d'architecture

Générateur GraphQL vers TypeScript — Guide de référence

Convertissez vos schémas SDL et requêtes GraphQL en types, interfaces, enums et résolveurs TypeScript. Génération instantanée dans le navigateur, sans configuration ni envoi au serveur.

Générateur GraphQL vers TypeScript — Guide de référence — Architecture en mémoire côté client et flux de données
Générateur GraphQL vers TypeScript — Guide de référence — Architecture en mémoire côté client et flux de données

Paramètres clés et contrôles

Source du schéma GraphQL (SDL vs JSON d'introspection)Document de définition de schéma (Entrée AST)

Texte standard au format SDL (Schema Definition Language) ou réponse d'introspection sérialisée en JSON (objet racine __schema). Conforme à la grammaire officielle de la spécification GraphQL d'octobre 2021.

Par défaut : Schema Definition Language (SDL)
Stratégie de nullabilité et d'optionalitéMode de nullabilité du compilateur (Enum)

Mappe les champs GraphQL non nuls (!) et nullables vers les expressions de type TypeScript. Détermine si les champs nullables génèrent 'T | null', 'Maybe<T>' ou des propriétés optionnelles 'field?: T' sous strictNullChecks.

Par défaut : Maybe<T> = T | null | undefined
Paradigme de déclaration des typesSyntaxe d'émission des types (Enum)

Définit si les types d'objets GraphQL sont compilés en alias 'type' ou en déclarations 'interface' TypeScript. Les alias de type prennent en charge les accès indexés et les unions ; les interfaces permettent la fusion de déclarations (declaration merging) dans les SDK extensibles.

Par défaut : type (Alias de type)
Format de compilation des énumérationsReprésentation d'enum (Enum)

Détermine si les enums GraphQL sont compilées en objets d'exécution 'enum' natifs TypeScript ou en unions de littéraux de chaîne ('ADMIN' | 'USER') optimisées pour le tree-shaking avec dictionnaires const associés.

Par défaut : Union de littéraux de chaîne
Mappage des scalaires personnalisés (ScalarMappingDictionary)Dictionnaire (Record<string, string>)

Résout les types scalaires GraphQL personnalisés en types TypeScript concrets. Mappages par défaut : ID vers 'string', Int vers 'number', Float vers 'number', String vers 'string', Boolean vers 'boolean', DateTime vers 'string | Date'.

Par défaut : DateTime: string, JSON: Record<string, unknown>
Modificateur d'immuabilité et tableaux en lecture seuleIndicateur d'immuabilité (Booléen)

Injecte le modificateur 'readonly' sur chaque champ d'objet et encapsule toutes les listes dans 'ReadonlyArray<T>', imposant l'immuabilité au moment de la compilation pour les stores d'état Redux et Zustand.

Par défaut : true

Conseils de pro et bonnes pratiques

Piège universel de nullabilité : champs nullables GraphQL vs undefined TypeScript

En GraphQL, un champ de sortie nullable sans point d'exclamation renvoie explicitement null en l'absence de valeur, et non undefined. En TypeScript, déclarer 'field?: string' autorise undefined mais rejette un null explicite sous strictNullChecks. Pour les types de réponse client, générez systématiquement 'field: Maybe<string>' (string | null) plutôt que 'field?: string' afin d'éviter les erreurs TypeError à l'exécution lors de la lecture de réponses serveur contenant des valeurs nulles.

Bannir les enums numériques natifs : privilégier les unions de chaînes littérales sans surcoût d'exécution

L'instruction native 'enum' de TypeScript génère un objet d'exécution JavaScript sous forme d'IIFE à double sens de recherche qui ne peut pas être éliminé par tree-shaking via les bundlers modernes (Vite, Rollup, esbuild). Dans les applications clientes, générer 'type UserRole = "ADMIN" | "MEMBER"' combiné à un tableau gelé 'as const' élimine 100 % du poids dans le bundle tout en offrant une autocomplétion identique et un rétrécissement de type (type narrowing) plus strict.

Masquage de fragments avec TypedDocumentNode plutôt que des wrappers génériques

Plutôt que d'émettre des types monolithiques de résultats de requêtes et de convertir manuellement les réponses d'appel fetch, générez des instances TypedDocumentNode<ResultType, VariablesType>. Les clients GraphQL modernes (Apollo Client 3.7+, urql et graphql-request) déduisent automatiquement la structure des données et les variables requises directement depuis le nœud de document sans aucun paramètre de type explicite.

Distinguer les types réseau sérialisés des modèles de domaine en mémoire

Les scalaires personnalisés tels que DateTime, JSON et BigInt transitent sur le réseau sous forme de chaînes JSON ou de nombres bruts. Si votre générateur mappe 'DateTime' vers l'objet JavaScript 'Date', un appel standard avec JSON.parse() laissera le champ sous forme de chaîne de caractères, provoquant des erreurs à l'exécution lors de l'appel de méthodes de date (ex. date.toISOString() is not a function). Utilisez 'string' pour les types de réponse réseau et réservez 'Date' aux modèles de domaine désérialisés.

Pièges courants et dépannage

⚠️Erreur du compilateur TypeScript TS2322 : Le type 'null' n'est pas assignable au type 'undefined' sur les objets d'entrée générés

Les objets d'entrée GraphQL considèrent les champs omis comme undefined, tandis qu'un null explicite indique une réinitialisation volontaire. Activez exactOptionalPropertyTypes dans tsconfig.json et configurez le générateur pour émettre 'field?: string | null' sur les arguments d'entrée, permettant ainsi de distinguer l'omission d'une clé de la transmission d'une valeur nulle explicite.

⚠️La profondeur de référence circulaire dépasse les limites du compilateur TypeScript sur les schémas récursifs imbriqués

Les structures de schéma auto-référencées (comme Comment -> replies: [Comment!]! ou Category -> children: [Category!]!) peuvent déclencher l'erreur TS2589 d'instanciation de type infinie. Résolvez ce problème en émettant des définitions sous forme d'instructions 'interface' plutôt que d'alias 'type' récursifs, tirant parti de la résolution différée (lazy evaluation) des propriétés d'interface par TypeScript.

⚠️Erreur de syntaxe : Unexpected token in JSON at position 0 lors du collage des résultats d'introspection

Assurez-vous de coller la charge utile JSON complète contenant la clé racine '__schema' ou 'data.__schema'. Si la requête d'introspection a été extraite via cURL ou Postman, retirez les en-têtes HTTP de réponse ou déséchappez les guillemets protégés avant l'analyse.

⚠️Les directives Apollo Federation (@key, @external, @shareable) provoquent des erreurs d'analyse de directive inconnue

L'analyseur officiel de la spécification GraphQL n'intègre pas par défaut les directives de schéma Apollo Federation v1/v2. Le générateur inclut des définitions factices (stubs) de directives de fédération : assurez-vous que l'option 'Activer les directives Federation' est activée ou collez le bloc standard de définition des directives Federation au début de votre SDL.

Foire aux questions (FAQ)

Comment la nullabilité GraphQL est-elle transposée en propriétés optionnelles ou unions nulles TypeScript ?▼

Dans le SDL GraphQL, les champs sont nullables par défaut et ne deviennent non nuls que lorsqu'ils sont marqués d'un point d'exclamation (!). En TypeScript avec strictNullChecks, les champs non nuls (String!) sont compilés en 'string', tandis que les champs nullables (String) deviennent 'string | null' (ou 'Maybe<string>'). Pour les objets d'entrée (input objects), les champs nullables se transforment en propriétés optionnelles ('field?: string | null') car GraphQL autorise l'omission d'arguments dans les requêtes et mutations.

Faut-il convertir les énumérations GraphQL en types enum TypeScript ou en unions de littéraux de chaîne ?▼

Les unions de littéraux de chaîne ('type Status = "ACTIVE" | "INACTIVE"') sont recommandées pour les applications web modernes car elles ne génèrent aucun code JavaScript à l'exécution, sont parfaitement éliminées par tree-shaking et acceptent des chaînes brutes sans import spécifique. Les enums natifs TypeScript ('enum Status { Active = "ACTIVE" }') ne doivent être retenus que si vous avez impérativement besoin de réflexion d'objet au runtime, de recherche inverse ou d'une rétrocompatibilité avec des bibliothèques historiques.

Quelle est la différence entre la génération de types de schéma et celle des types d'opérations clientes ?▼

La génération de types de schéma compile l'intégralité du backend GraphQL (chaque type, entrée, énumération et signature de résolveur) en un ensemble complet d'interfaces TypeScript. La génération de types d'opérations clientes analyse les documents de requêtes spécifiques au client, n'extrait que les sous-champs demandés (en appliquant les sélections et fragments) et génère des types de réponse précis et aplatis correspondant exactement à la charge utile JSON renvoyée par cette requête spécifique.

Pourquoi le scalaire GraphQL ID est-il sérialisé en string ou number plutôt qu'en un type dédié en TypeScript ?▼

La spécification officielle de GraphQL définit le scalaire ID comme un identifiant unique sérialisé sous forme de String, mais permet aux clients de fournir indifféremment des valeurs de type chaîne ou entier en entrée. En conséquence, les générateurs TypeScript mappent ID vers 'string' (pour les types de sortie) ou 'string | number' (pour les arguments d'entrée). Les architectures exigeant une sécurité de typage stricte entre différentes entités doivent employer des types nominaux marqués (branded types, par exemple 'type UserId = string & { readonly __brand: unique symbol }').

Outils et utilitaires connexes

Tous les outils →
Convertisseur HTML en Markdown (GFM)Développement

Convertissez du code HTML en Markdown GitHub Flavored (GFM) avec tableaux, blocs de code et nettoyage d'extraits web. Supprimez les styles inline et exportez des fichiers .md propres.

Ouvrir l'outil→
Comparateur de Texte & Diff CheckerDéveloppement

Comparez vos textes, codes et fichiers avec notre comparateur de diff instantané. Visualisez les écarts côte à côte ou en ligne au caractère près, ignorez les espaces et exportez vos patchs unifiés.

Ouvrir l'outil→
Générateur de Balises Canoniques & URLDéveloppement

Générez des balises rel=canonical et en-têtes HTTP valides. Supprimez les paramètres de suivi, normalisez les URL et éliminez le contenu dupliqué en SEO.

Ouvrir l'outil→
Convertisseur cURL en Fetch (JS & Node)Développement

Convertissez instantanément vos commandes cURL en syntaxe Fetch API. Analysez en-têtes HTTP, tokens d'authentification, cookies et payloads JSON en code JavaScript async/await moderne.

Ouvrir l'outil→
Validateur Sitemap XML & Syntaxe URLDéveloppement

Validez instantanément vos sitemaps XML et fichiers d'index. Vérifiez le seuil des 50 000 URLs, la syntaxe W3C Datetime, les balises hreflang, schémas médias et erreurs Google Search Console.

Ouvrir l'outil→
Simulateur SERP Google & Aperçu SnippetDéveloppement

Prévisualisez vos extraits Google SERP sur ordinateur et mobile avec troncature précise au pixel près, badges rich snippets, sitelinks et score CTR en direct.

Ouvrir l'outil→