Vai al contenuto
Numio

Da GraphQL a TypeScript Definizioni — Numio

Genera tipi TypeScript da uno schema GraphQL con @graphql-codegen/typescript, oltre a tipi di risultati e variabili per qualsiasi operazione nel pannello Documento. I campi nullable diventano proprietà Maybe<T> opzionali; gli elenchi non nulli diventano Array<T>.

Digitare i dati restituiti da una query in un frontend senza impostare un'esecuzione codegen.yml e CLI.

GraphQL Schema

Document

TypeScript

Quando usarlo

  • Digitare i dati restituiti da una query in un frontend senza impostare un'esecuzione codegen.yml e CLI.
  • Controllare come apparirà una modifica allo schema (un campo che diventa nullable, un nuovo valore enum) nel TypeScript generato prima di eseguirne il commit.

Come si usa

  1. Incolla il tuo SDL (definizioni type, enum, interface, union e scalar) nell’editor dello schema GraphQL.
  2. Inserisci query, mutazioni o frammenti nell'editor dei documenti o cancellalo per ottenere solo i tipi di schema; un documento che non corrisponde allo schema viene ignorato con un commento di avviso.
  3. Copia i tipi generati: tipi di schema come Utente, oltre a GetUserQuery e GetUserQueryVariables per ogni operazione denominata.

Schema GraphQL + documento

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

Tipi TypeScript

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

Dettagli e limiti

L'output inizia con tipi di helper fissi (Forse, InputMaybe, Esatto, MakeOptional, Scalari, ...), abbreviati in "..." sopra. Gli scalari mappano ogni scalare per separare i tipi di input e output.

Gli scalari personalizzati come Data vengono digitati any; i valori enum diventano un'enumerazione TypeScript con le chiavi PascalCase (USER diventa Utente = "USER").

La generazione viene eseguita in un Web Worker nel tuo browser; non viene caricato nulla. Il risultato è formattato con Prettier senza punto e virgola e la pagina non ha opzioni di configurazione del codegen.

FAQ

Perché l’output inizia con "// Document ignored"?

Il contenuto dell’editor Document viene convalidato rispetto allo schema e il suo esempio predefinito interroga campi come username. Se la convalida fallisce, la pagina genera comunque i tipi dello schema e inserisce il primo errore in un commento iniziale. Correggi le operazioni oppure svuota l’editor Document.

Quali tipi vengono assegnati ai campi nullable?

Un campo nullable come name: String diventa name?: Maybe<Scalars["String"]["output"]>, dove Maybe<T> è T | null. Nei tipi dei risultati delle operazioni viene scritto inline come name?: string | null.

Solo i campi selezionati sono inclusi nel tipo di query?

Sì. GetUserQuery contiene solo i campi selezionati dalla query (qui id e name), con __typename come proprietà facoltativa, mentre il tipo User completo viene generato separatamente.

Specifiche e riferimenti