2022-09-26

概要

@apollo/client などの一般的なGraphQLクライアントを用いてGraphQL APIからデータを取得するTypeScriptのコードで用いる型定義を、GraphQLサーバーから取得する方法のメモです。

インストール

以下をローカルにインストールします。pnpmの場合で説明。

$ pnpm add -D graphql
$ pnpm add -D @graphql-codegen/cli @graphql-codegen/typescript

設定ファイル

codegen.yaml を次のように設定します。

overwrite: true
schema: "http://hot-dang-homes-course.local/graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"

GraphQL Code Generator CLIから設定ファイルの元を生成することも可能（詳細はこちら）ですが、生成された設定ファイルで動くとは限りません（余計な設定が追加されてしまう）。

package.jsonに次の1行を追加します。

    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "generate": "graphql-codegen --config codegen.yml" <--- ★これ
    },

型定義ファイルの生成

上記の設定の場合、generateスクリプトを実行することにより、src/generated/graphql.tsx が生成されます。

型の利用

例えば次のように利用できます。

type Props = {
  blocks: any;
};

↓

import { Block } from 'src/generated/graphql';

type Props = {
  blocks: Block[];
};

おまけ：WPGraphQL

WPGraphQL General Settings の Enable Public Introspection をチェックつけないとエラーになるようです。