Przejdź do treści
Numio

Konwerter GraphQL na typy Flow — Numio

Generuje definicje typów Flow ze schematu i operacji GraphQL za pomocą @graphql-codegen/flow i flow-operations. Typy obiektów stają się dokładnymi obiektami Flow ({| |}), a pola dopuszczające null stają się opcjonalnymi typami maybe (?T).

Dodanie wpisanych wyników GraphQL do bazy kodu, która nadal sprawdza typ za pomocą Flow zamiast TypeScript.

GraphQL Schema

Document

Flow

Kiedy go używać

  • Dodanie wpisanych wyników GraphQL do bazy kodu, która nadal sprawdza typ za pomocą Flow zamiast TypeScript.
  • Generowanie zmiennych i typów wyników dla pojedynczego zapytania do wklejenia obok komponentu.

Jak używać

  1. Wklej schemat SDL do edytora schematów GraphQL.
  2. Wprowadź operacje, których używasz w Edytorze dokumentów lub wyczyść je, jeśli potrzebujesz tylko typów schematów.
  3. Skopiuj dane wyjściowe rozpoczynające się od // @flow do pliku .js w obszarze Flow.

Schemat GraphQL + dokument

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

Typy przepływów

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

Szczegóły i ograniczenia

Pola odwołują się do skalarów przez $ElementType<Scalars, "ID">; typ Scalars na początku (pominięty powyżej) mapuje ID i String na string, a Int i Float na number.

Typy wyników operacji są zbudowane z rozkładówek obiektów i lokalnego pomocnika $Pick, więc wyświetlane są tylko wybrane pola.

Generowanie odbywa się w narzędziu Web Worker w przeglądarce, a wynik jest sformatowany za pomocą Prettier; na stronie nie ma opcji wtyczek.

FAQ

Czy wygenerowane typy obiektów są dokładne?

Tak. Typy obiektów schematu używają dokładnej składni obiektu {| ... |}, więc dodatkowe właściwości są odrzucane przez Flow.

W jaki sposób reprezentowane są pola dopuszczające wartość null?

Pole dopuszczające null staje się opcjonalną właściwością z typem maybe, np. name?: ?$ElementType<Scalars, "String">. Pola non-null są wymagane i nie mają typu maybe.

Dlaczego wynik zawiera komentarz "Document ignored"?

Operacje w Edytorze dokumentów są sprawdzane względem schematu. Jeśli nie są one zgodne (domyślny przykład pyta o nazwę użytkownika), generowane są tylko typy schematów, a pierwszy błąd pojawia się jako komentarz poniżej // @flow. Dostosuj lub wyczyść dokument.

Specyfikacje i referencje