Convertir GraphQL a tipos de Flow — Numio

Cuándo usarla

• Añadir resultados GraphQL tipados a una base de código que todavía comprueba tipos con Flow en lugar de TypeScript.
• Generar los tipos de variables y de resultado de una sola query para pegarlos junto a un componente.

Cómo usarla

1. Pega el SDL del esquema en el editor GraphQL Schema.
2. Escribe en el editor Document las operaciones que usas, o vacíalo si solo necesitas los tipos del esquema.
3. Copia la salida, que empieza por // @flow, en un archivo .js bajo Flow.

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

// @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?: * |}>,
    },
  |},
}

Detalles y limitaciones

Los campos hacen referencia a los escalares mediante $ElementType<Scalars, "ID">; el tipo Scalars del principio (omitido arriba) asigna ID y String a string, e Int y Float a number.

Los tipos de resultado de las operaciones se construyen con spreads de objeto y un helper local $Pick, así que solo aparecen los campos seleccionados.

La generación se ejecuta en un Web Worker de tu navegador y el resultado se formatea con Prettier; la página no tiene opciones de plugin.

FAQ

Herramientas relacionadas

Especificaciones y referencias

• GraphQL Code Generator: flow plugin