Converter GraphQL em tipos Flow — Numio

Quando usar

• Adicionar resultados GraphQL tipados a uma base de código que ainda faz checagem de tipos com Flow em vez de TypeScript.
• Gerar os tipos de variáveis e de resultado de uma única query para colar ao lado de um componente.

Como usar

1. Cole o SDL do schema no editor GraphQL Schema.
2. Informe no editor Document as operações que você usa, ou esvazie-o se precisar apenas dos tipos do schema.
3. Copie a saída, que começa com // @flow, para um arquivo .js sob 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?: * |}>,
    },
  |},
}

Detalhes e limitações

Os campos referenciam escalares por meio de $ElementType<Scalars, "ID">; o tipo Scalars no início (omitido acima) mapeia ID e String para string, e Int e Float para number.

Os tipos de resultado das operações são montados com spreads de objeto e um helper local $Pick, então só aparecem os campos selecionados.

A geração roda em um Web Worker no seu navegador e o resultado é formatado com Prettier; a página não tem opções de plugin.

FAQ

Ferramentas relacionadas

Especificações e referências

• GraphQL Code Generator: flow plugin