GraphQL-Codegen

https://the-guild.dev/graphql/codegen

概要

GraphQL のエンドポイントや GraphQL Schema から TypeScript の型ファイルを生成するライブラリ

THE GUILD が開発

GraphQL クライアントとして Apollo Client や urql を採用した場合に良く用いられる

urql: https://commerce.nearform.com/open-source/urql/docs/basics/typescript-integration/

Relay は relay-compiler という独自機能があるため不要

セットアップ

インストール

code:sh

$ npm install -D @graphql-codegen/cli @graphql-codegen/client-preset

package.json の修正

code:package.json

{

"scripts": {

"codegen": "graphql-codegen"

}

設定ファイル（codegen.ts ）の作成

https://the-guild.dev/graphql/codegen/docs/config-reference/codegen-config

code:codegen.ts

import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {

schema: "http://localhost:4000",

documents: "src/**/*.tsx",

ignoreNoDocuments: true,

generates: {

"./src/gql/": {

preset: "client",

plugins: [],

};

export default config;

コマンド実行

code:sh

$ npm run codegen

実行すると、src/gql ディレクトリと型定義ファイルが生成される

利用例（urql）

warning.icon 都度生成コマンドを叩かないといけないので、自動的に実行する仕組みが必要

生成されたファイルで定義されている graphql を用いる

code:tsx

const PostQuery = graphql(`

query posts($tags: String!) {

posts(tags: $tags) {

title

body

author {

name

}

`);

戻り値として型情報を持つクエリを返すので、後は useQuery に渡せば良い

code:tsx

const result = useQuery({

query: PostQuery,

variables: { tags },

});

const { data, fetching, error } = result;

data に型が付与されることも確認できる

https://scrapbox.io/files/66f3f29fbbcc8f001d5a9c0b.png

#TypeScript