GraphQLから再利用可能なReactコンポーネントへの変換 — Numio

Document パネルの各オペレーションについて、型付きのデータ取得コードを生成します。React Apollo hooks（デフォルト）、Apollo Angular サービス、Stencil Apollo コンポーネント、urql hooks のいずれかを、TypeScript のスキーマ型・オペレーション型とあわせて出力します。

書いたばかりのクエリから、Apollo Client を使う React アプリ用の useXQuery / useXLazyQuery hooks をすぐに得る。

GraphQL Schema

Document

こんなときに使えます

書いたばかりのクエリから、Apollo Client を使う React アプリ用の useXQuery / useXLazyQuery hooks をすぐに得る。
クライアントを決める前に、同じオペレーションが Apollo Angular の injectable サービスや urql hook ではどうなるかを比較する。

使い方

GraphQL Schema エディターにスキーマを、Document エディターに名前付きの query、mutation、subscription を貼り付けます。
出力のドロップダウンでターゲットを選びます：TypeScript React Apollo、TypeScript Apollo Angular、TypeScript Stencil Apollo、TypeScript urql。
生成された document 定数（例：GetUserDocument）と hooks、サービス、コンポーネントをプロジェクトにコピーします。

GraphQL スキーマ + ドキュメント

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

TypeScript コンポーネントと hooks

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 と hooks を @apollo/client から、urql と Stencil は gql を graphql-tag からインポートします。Apollo Angular は GetUserGQL のような @Injectable クラスを生成します。

Document エディターに有効なオペレーションがないと hooks やコンポーネントは生成されません。スキーマと合わないドキュメントは警告コメント付きでスキップされます。生成はブラウザの Web Worker で実行されます。

FAQ

useGetUserQuery の baseOptions が必須なのはなぜですか？

このクエリには non-null の変数（$id: ID!）があるため、生成される hook は variables を含むオプションを必須にします。必須の変数がないクエリでは baseOptions 引数は省略可能です。

React Apollo の出力に lazy query の hooks は含まれますか？

含まれます。クエリごとに useXQuery と useXLazyQuery、さらに GetUserQueryHookResult や GetUserQueryResult などの結果型エイリアスを生成します。mutation には useXMutation hook が生成されます。

withHooks やインポート元などのプラグインオプションは変更できますか？

できません。各プラグインはデフォルト設定で実行され、ページで選べるのは出力ターゲットのドロップダウンだけです。

仕様を確認する

GraphQL Code Generator: typescript-react-apollo