GraphQL in Flow-Typen umwandeln — Numio

Wann sie hilft

• Typisierte GraphQL-Ergebnisse in eine Codebasis einbauen, die noch mit Flow statt TypeScript typgeprüft wird.
• Variablen- und Ergebnistypen für eine einzelne Query erzeugen, um sie neben eine Komponente einzufügen.

Anwendung

1. Füge die Schema-SDL in den Editor GraphQL Schema ein.
2. Gib die verwendeten Operationen im Editor Document ein oder leere ihn, wenn du nur Schematypen brauchst.
3. Kopiere die Ausgabe, die mit // @flow beginnt, in eine .js-Datei unter 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 und Einschränkungen

Felder verweisen über $ElementType<Scalars, "ID"> auf Skalare; der Typ Scalars am Anfang (oben ausgelassen) bildet ID und String auf string sowie Int und Float auf number ab.

Ergebnistypen von Operationen werden aus Object-Spreads und einem lokalen $Pick-Helfer aufgebaut, sodass nur die ausgewählten Felder erscheinen.

Die Erzeugung läuft in einem Web Worker im Browser, das Ergebnis wird mit Prettier formatiert; die Seite hat keine Plugin-Optionen.

FAQ

Ähnliche Tools

Spezifikationen und Referenzen

• GraphQL Code Generator: flow plugin