GraphQL naar Flow-typen omzetten — Numio

Wanneer gebruik je dit?

• Getypte GraphQL-resultaten worden toegevoegd aan een codebase die nog steeds typecontroles uitvoert met Flow in plaats van TypeScript.
• Variabelen en resultaattypen genereren voor een enkele query om naast een component te plakken.

Hoe werkt het

1. Plak het schema SDL in de GraphQL Schema-editor.
2. Voer de bewerkingen in die u gebruikt in de Documenteditor, of wis deze als u alleen schematypen nodig heeft.
3. Kopieer de uitvoer, die begint met // @flow, naar een .js-bestand onder 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?: * |}>,
    },
  |},
}

Details en beperkingen

Velden verwijzen naar scalairen tot en met $ElementType<Scalars, "ID">; het Scalars-type bovenaan (hierboven weggelaten) wijst ID en String toe aan string, Int en Float aan nummer.

Resultaattypen voor bewerkingen zijn opgebouwd uit objectspreads en een lokale $Pick-helper, zodat alleen de geselecteerde velden verschijnen.

Het genereren wordt uitgevoerd in een Web Worker in uw browser en het resultaat wordt opgemaakt met Prettier; er zijn geen plug-in-opties op de pagina.

FAQ

Gerelateerde tools

Specificaties en referenties

• GraphQL Codegenerator: stroomplug-in