Vai al contenuto
Numio

Convertitore da GraphQL a tipi Flow — Numio

Genera definizioni di tipi Flow da uno schema GraphQL e dalle operazioni usando @graphql-codegen/flow e flow-operations. I tipi oggetto diventano oggetti Flow esatti ({| |}) e i campi nullable diventano proprietà facoltative con tipi maybe (?T).

Aggiunta di risultati GraphQL digitati a una codebase che esegue ancora il controllo del tipo con Flow anziché con TypeScript.

GraphQL Schema

Document

Flow

Quando usarlo

  • Aggiunta di risultati GraphQL digitati a una codebase che esegue ancora il controllo del tipo con Flow anziché con TypeScript.
  • Generazione di variabili e tipi di risultati per una singola query da incollare accanto a un componente.

Come si usa

  1. Incolla lo schema SDL nell'editor dello schema GraphQL.
  2. Inserisci le operazioni che utilizzi nell'editor dei documenti o deselezionalo se ti servono solo i tipi di schema.
  3. Copia l'output, che inizia con // @flow, in un file .js in Flow.

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 di flusso

// @flow
…
export type User = {|
  __typename?: "User",
  id: $ElementType<Scalars, "ID">,
  name?: ?$ElementType<Scalars, "String">,
  tags: Array<$ElementType<Scalars, "String">>,
|}

export type GetUserQueryVariables = {
  id: $ElementType<Scalars, "ID">,
}

export type GetUserQuery = {
  ...{ __typename?: "Query" },
  ...{|
    user?: ?{
      ...{ __typename?: "User" },
      ...$Pick<User, {| id: *, name?: * |}>,
    },
  |},
}

Dettagli e limiti

I campi fanno riferimento a scalari fino a $ElementType<Scalars, "ID">; il tipo Scalars in alto (omesso sopra) mappa ID e String su stringa, Int e Float su numero.

I tipi di risultati dell'operazione sono creati dalle distribuzioni di oggetti e da un helper $Pick locale, quindi vengono visualizzati solo i campi selezionati.

La generazione viene eseguita in un Web Worker nel tuo browser e il risultato è formattato con Prettier; non ci sono opzioni di plugin nella pagina.

FAQ

I tipi di oggetto generati sono esatti?

Sì. I tipi di oggetto dello schema utilizzano la sintassi esatta dell'oggetto {| ... |}, quindi le proprietà aggiuntive vengono rifiutate da Flow.

Come vengono rappresentati i campi nullable?

Un campo nullable diventa una proprietà facoltativa con un tipo maybe, ad esempio name?: ?$ElementType<Scalars, "String">. I campi non null sono obbligatori e non usano tipi maybe.

Perché l’output contiene un commento "Document ignored"?

Le operazioni dell’editor Document vengono convalidate rispetto allo schema. Se non corrispondono (l’esempio predefinito interroga username), vengono generati soltanto i tipi dello schema e il primo errore compare come commento sotto // @flow. Modifica o svuota il documento.

Specifiche e riferimenti