GraphQL in TypeScript-Typen umwandeln — Numio
Erzeugt mit @graphql-codegen/typescript TypeScript-Typen aus einem GraphQL-Schema sowie Ergebnis- und Variablentypen für alle Operationen im Document-Panel. Nullable Felder werden zu optionalen Maybe<T>-Eigenschaften, Non-Null-Listen zu Array<T>.
Die von einer Query zurückgegebenen Daten im Frontend typisieren, ohne codegen.yml und einen CLI-Lauf einzurichten.
Wann sie hilft
- Die von einer Query zurückgegebenen Daten im Frontend typisieren, ohne codegen.yml und einen CLI-Lauf einzurichten.
- Prüfen, wie eine Schemaänderung (ein Feld wird nullable, ein neuer Enum-Wert) im erzeugten TypeScript aussieht, bevor du sie committest.
Anwendung
- Füge deine SDL (type-, enum-, interface-, union-, scalar-Definitionen) in den Editor GraphQL Schema ein.
- Gib Queries, Mutations oder Fragments in den Editor Document ein oder leere ihn, um nur Schematypen zu erhalten; ein Document, das nicht zum Schema passt, wird mit einem Warnkommentar übersprungen.
- Kopiere die erzeugten Typen: Schematypen wie User sowie GetUserQuery und GetUserQueryVariables für jede benannte Operation.
GraphQL-Schema + 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-Typen
…
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
}Details und Einschränkungen
Die Ausgabe beginnt mit festen Hilfstypen (Maybe, InputMaybe, Exact, MakeOptional, Scalars, …), oben zu '…' gekürzt. Scalars bildet jeden Skalar auf getrennte Input- und Output-Typen ab.
Benutzerdefinierte Skalare wie Date werden als any typisiert; Enum-Werte werden zu einem TypeScript-enum mit PascalCase-Schlüsseln (USER wird zu User = "USER").
Die Erzeugung läuft in einem Web Worker im Browser; nichts wird hochgeladen. Das Ergebnis wird mit Prettier ohne Semikolons formatiert, und die Seite hat keine Codegen-Konfigurationsoptionen.
FAQ
Warum beginnt die Ausgabe mit "// Document ignored"?
Der Editor Document wird gegen dein Schema validiert, und sein Standardbeispiel fragt Felder wie username ab. Schlägt die Validierung fehl, erzeugt die Seite trotzdem die Schematypen und setzt den ersten Fehler als Kommentar an den Anfang. Korrigiere die Operationen oder leere den Editor Document.
Wie werden nullable Felder typisiert?
Ein nullable Feld wie name: String wird zu name?: Maybe<Scalars["String"]["output"]>, wobei Maybe<T> gleich T | null ist. In Ergebnistypen von Operationen steht es inline als name?: string | null.
Sind im Query-Typ nur die ausgewählten Felder enthalten?
Ja. GetUserQuery enthält nur die Felder, die die Query auswählt (hier id und name), mit __typename als optionaler Eigenschaft, während der vollständige Typ User separat erzeugt wird.