Przejdź do treści
Numio

Definicje TypeScript ze schematu GraphQL — Numio

Generuje typy TypeScript na podstawie schematu GraphQL z @graphql-codegen/typescript, a także typy wyników i zmiennych dla dowolnych operacji w panelu Dokument. Pola dopuszczające wartość null stają się opcjonalnymi właściwościami Maybe<T>; listy inne niż null stają się Array<T>.

Wpisanie danych zwróconych przez zapytanie w interfejsie użytkownika bez konfigurowania pliku codegen.yml i uruchomienia CLI.

GraphQL Schema

Document

TypeScript

Kiedy go używać

  • Wpisanie danych zwróconych przez zapytanie w interfejsie użytkownika bez konfigurowania pliku codegen.yml i uruchomienia CLI.
  • Sprawdzenie, jak zmiana schematu (pole, które dopuszcza wartość null, nowa wartość wyliczeniowa) będzie wyglądać w wygenerowanym TypeScript przed jego zatwierdzeniem.

Jak używać

  1. Wklej swój SDL (typ, wyliczenie, interfejs, unia, definicje skalarne) do edytora schematu GraphQL.
  2. Umieść zapytania, mutacje lub fragmenty w Edytorze dokumentów lub wyczyść go, aby uzyskać tylko typy schematów; dokument niezgodny ze schematem jest pomijany z komentarzem ostrzegawczym.
  3. Skopiuj wygenerowane typy: typy schematów, takie jak User, a także GetUserQuery i GetUserQueryVariables dla każdej nazwanej operacji.

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 TypeScript

…
export type Query = {
  __typename?: "Query"
  user?: Maybe<User>
}

export type QueryUserArgs = {
  id: Scalars["ID"]["input"]
}

export type User = {
  __typename?: "User"
  id: Scalars["ID"]["output"]
  name?: Maybe<Scalars["String"]["output"]>
  tags: Array<Scalars["String"]["output"]>
}

export type GetUserQueryVariables = Exact<{
  id: Scalars["ID"]["input"]
}>

export type GetUserQuery = {
  __typename?: "Query"
  user?: { __typename?: "User"; id: string; name?: string | null } | null
}

Szczegóły i ograniczenia

Dane wyjściowe rozpoczynają się od ustalonych typów pomocniczych (Maybe, InputMaybe, Exact, MakeOptional, Scalars,…), skróconych do „…” powyżej. Skalary odwzorowują każdy skalar na oddzielne typy danych wejściowych i wyjściowych.

Własne skalary, np. Date, otrzymują typ any; wartości enum stają się enum TypeScript z kluczami PascalCase (USER staje się User = "USER").

Generowanie odbywa się w Web Workerze w Twojej przeglądarce; nic nie jest przesyłane. Wynik jest sformatowany za pomocą Prettier bez średników, a strona nie ma opcji konfiguracyjnych codegen.

FAQ

Dlaczego wynik zaczyna się od "// Document ignored"?

Edytor dokumentów jest sprawdzany pod kątem Twojego schematu, a jego domyślny przykład sprawdza pola, takie jak nazwa użytkownika. Jeśli weryfikacja nie powiedzie się, strona nadal generuje typy schematów i umieszcza pierwszy błąd w komentarzu na górze. Napraw operacje lub wyczyść Edytor dokumentów.

Jak wpisuje się pola dopuszczające wartość null?

Pole dopuszczające null, np. name: String, staje się name?: Maybe<Scalars["String"]["output"]>, gdzie Maybe<T> oznacza T | null. W typach wyników operacji jest zapisywane bezpośrednio jako name?: string | null.

Czy typ zapytania obejmuje tylko wybrane pola?

Tak. GetUserQuery zawiera tylko pola wybrane przez zapytanie (tutaj identyfikator i nazwa), z opcjonalną właściwością __typename, podczas gdy pełny typ użytkownika jest generowany oddzielnie.

Specyfikacje i referencje