Przejdź do treści
Numio

Konwerter GraphQL na komponenty React — Numio

Generuje wpisany kod pobierania danych dla każdej operacji w panelu Dokument: hooki React Apollo (domyślne), usługi Apollo Angular, komponenty Stencil Apollo lub hooki urql, wraz ze schematem TypeScript i typami operacji.

Pobieranie gotowych hooków useXQuery i useXLazyQuery dla aplikacji Apollo Client React z właśnie napisanego zapytania.

GraphQL Schema

Document

Kiedy go używać

  • Pobieranie gotowych hooków useXQuery i useXLazyQuery dla aplikacji Apollo Client React z właśnie napisanego zapytania.
  • Porównanie tego, jak wygląda ta sama operacja w przypadku usługi wstrzykiwania Apollo Angular lub haka urql przed wyborem klienta.

Jak używać

  1. Wklej schemat do edytora schematów GraphQL, a nazwane zapytania, mutacje lub subskrypcje do edytora dokumentów.
  2. Wybierz cel z listy rozwijanej wyników: TypeScript React Apollo, TypeScript Apollo Angular, TypeScript Stencil Apollo lub TypeScript urql.
  3. Skopiuj wygenerowaną stałą dokumentu (na przykład GetUserDocument) oraz hooki, usługi lub komponenty do swojego projektu.

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

Elementy i haki TypeScript

import { gql } from "@apollo/client"
import * as Apollo from "@apollo/client"
…
export const GetUserDocument = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
    }
  }
`
…
export function useGetUserQuery(
  baseOptions: Apollo.QueryHookOptions<GetUserQuery, GetUserQueryVariables>,
) {
  const options = { ...defaultOptions, ...baseOptions }
  return Apollo.useQuery<GetUserQuery, GetUserQueryVariables>(
    GetUserDocument,
    options,
  )
}
…

Szczegóły i ograniczenia

Każda opcja uruchamia najpierw operacje @graphql-codegen/typescript i TypeScript, więc dane wyjściowe zawierają również pełny schemat i typy operacji (pominięte powyżej).

Reaguj Apollo importuje gql i hooki z @apollo/client; urql i Stencil importują gql z graphql-tag; Apollo Angular generuje klasy @Injectable, takie jak GetUserGQL.

Bez prawidłowej operacji w Edytorze dokumentów nie są generowane żadne zaczepy ani komponenty; dokument niezgodny ze schematem jest pomijany z komentarzem ostrzegawczym. Generacja działa w przeglądarce Web Worker.

FAQ

Dlaczego baseOptions jest wymagane w useGetUserQuery?

Zapytanie zawiera zmienną różną od null ($id: ID!), więc wygenerowany hak wymaga opcji zawierających zmienne. Zapytania bez wymaganych zmiennych otrzymują opcjonalny parametr baseOptions.

Czy dane wyjściowe React Apollo zawierają leniwe haki zapytań?

Tak. Dla każdego zapytania generuje useXQuery i useXLazyQuery oraz aliasy typów wyników, takie jak GetUserQueryHookResult i GetUserQueryResult. Mutacje otrzymują hak useXMutation.

Czy mogę zmienić opcje wtyczki, takie jak withHooks lub źródło importu?

Nie. Strona uruchamia każdą wtyczkę z jej domyślną konfiguracją i oferuje jedynie listę rozwijaną celu wyjściowego.

Specyfikacje i referencje