React-Komponenten aus GraphQL generieren — Numio

Wann sie hilft

• Fertige useXQuery- und useXLazyQuery-Hooks für eine React-App mit Apollo Client aus einer gerade geschriebenen Query erhalten.
• Vergleichen, wie dieselbe Operation als injizierbarer Apollo-Angular-Service oder als urql-Hook aussieht, bevor du dich für einen Client entscheidest.

Anwendung

1. Füge das Schema in den Editor GraphQL Schema und deine benannten Queries, Mutations oder Subscriptions in den Editor Document ein.
2. Wähle das Ziel im Ausgabe-Dropdown: TypeScript React Apollo, TypeScript Apollo Angular, TypeScript Stencil Apollo oder TypeScript urql.
3. Kopiere die erzeugte Document-Konstante (zum Beispiel GetUserDocument) und die Hooks, Services oder Komponenten in dein Projekt.

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

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,
  )
}
…

Details und Einschränkungen

Jede Option führt zuerst @graphql-codegen/typescript und typescript-operations aus, daher enthält die Ausgabe auch die vollständigen Schema- und Operationstypen (oben ausgelassen).

React Apollo importiert gql und die Hooks aus @apollo/client; urql und Stencil importieren gql aus graphql-tag; Apollo Angular erzeugt @Injectable-Klassen wie GetUserGQL.

Ohne gültige Operation im Editor Document werden keine Hooks oder Komponenten erzeugt; ein Document, das nicht zum Schema passt, wird mit einem Warnkommentar übersprungen. Die Erzeugung läuft in einem Web Worker im Browser.

FAQ

Ähnliche Tools

Spezifikationen und Referenzen

• GraphQL Code Generator: typescript-react-apollo