GraphQL tot TypeScript-definities — Numio

Wanneer gebruik je dit?

• Het typen van de gegevens die door een query in een frontend worden geretourneerd zonder een codegen.yml- en CLI-run in te stellen.
• Controleren hoe een schemawijziging (een veld dat nul kan worden gemaakt, een nieuwe enumwaarde) eruit zal zien in de gegenereerde TypeScript voordat deze wordt vastgelegd.

Hoe werkt het

1. Plak uw SDL (type, enum, interface, union, scalaire definities) in de GraphQL Schema-editor.
2. Plaats query's, mutaties of fragmenten in de Documenteditor, of wis deze om alleen schematypen te krijgen; een document dat niet overeenkomt met het schema wordt overgeslagen met een waarschuwingsopmerking.
3. Kopieer de gegenereerde typen: schematypen zoals Gebruiker, plus GetUserQuery en GetUserQueryVariables voor elke benoemde bewerking.

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

…
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 en beperkingen

De uitvoer begint met vaste helpertypen (Misschien, InputMaybe, Exact, MakeOptional, Scalars, …), hierboven afgekort tot '…'. Scalars wijst elke scalair toe aan afzonderlijke invoer- en uitvoertypen.

Aangepaste scalairen zoals Datum worden getypt als any; enum-waarden worden een TypeScript-enum met PascalCase-sleutels (USER wordt User = "USER").

Generatie draait in een Web Worker in uw browser; er wordt niets geüpload. Het resultaat is opgemaakt met Prettier zonder puntkomma's, en de pagina heeft geen codegen-configuratieopties.

FAQ

Gerelateerde tools

Specificaties en referenties

• GraphQL Codegenerator: typoscript-plug-in