Преобразование GraphQL в компоненты React — Numio

Когда пригодится

• Получить готовые хуки useXQuery и useXLazyQuery для React-приложения на Apollo Client из только что написанного запроса.
• Сравнить, как одна и та же операция выглядит в виде внедряемого сервиса Apollo Angular или хука urql, прежде чем выбрать клиент.

Как пользоваться

1. Вставьте схему в редактор GraphQL Schema, а именованные queries, mutations или subscriptions — в редактор Document.
2. Выберите цель в выпадающем списке вывода: TypeScript React Apollo, TypeScript Apollo Angular, TypeScript Stencil Apollo или TypeScript urql.
3. Скопируйте в проект сгенерированную константу документа (например, GetUserDocument) и хуки, сервисы или компоненты.

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

Подробности и ограничения

Каждый вариант сначала запускает @graphql-codegen/typescript и typescript-operations, поэтому вывод также содержит полные типы схемы и операций (выше опущены).

React Apollo импортирует gql и хуки из @apollo/client; urql и Stencil импортируют gql из graphql-tag; Apollo Angular генерирует классы @Injectable, например GetUserGQL.

Без корректной операции в редакторе Document хуки и компоненты не генерируются; документ, не соответствующий схеме, пропускается с комментарием-предупреждением. Генерация выполняется в Web Worker в браузере.

FAQ

Похожие инструменты

Спецификации и справка

• GraphQL Code Generator: typescript-react-apollo