apollo-tooling vs GraphQL Code Generator

GraphQL 並びに Apollo Client を用いたクライアント開発に於いて、schema に準じた型生成をしてもらいたいことはあると思う。
そのうち 2 つのツール

apollo-toolingの client:codegen
GraphQL Code Generator

という時系列で使ってみた感想。
なお、React + TypeScript + Apollo Client の環境前提である。
実際に実験している repo はここ

以降 apolllo-tooling のことは、 apollo client:codegenのことと置き換えて読んでほしい。

結論

GraphQL Code Generator のほうが扱いやすい

apollo-tooling について

apollo client:codegenで apollo.config.js をもとに型を生成してくれる。

apollo-tooling を選定した理由

Apollo Client 使ってるんだから公式が開発してる apollo-tooling でいいんじゃないかという予想が大きかった。技術選定した際は TS と React 初めてで、生成された型の違いなど全然わからなかったのでここらへんが大きかったと思う。

apollo-tooling 使って思ったこと

@apollo/react-hooksがちょうどリリースされるか間際で開発に入ったので、最初から hooks 使ってた。
生成された型を使った運用としては、

query ExampleQuery {
  users {
    edges {
      node {
        id
        name
      }
    }
  }
}

export interface ExampleQuery_users_edges_node {
  id: string;
  name: string;
}
export interface ExampleQuery_users_edges {
  node: ExampleQuery_users_edges_node;
}
export interface ExampleQuery_users {
  edges: ExampleQuery_users_edges[];
}
export interface ExampleQuery {
  users: ExampleQuery_users;
}

みたいな型が生成されるので、

import { useQuery } from "@apollo/react-hooks";
import ExampleQuery from "./query/ExampleQuery.graphql";
import { ExampleQuery as ExampleQueryType } from "./query/__generated__/ExampleQuery";
export const Component = () => {
  const { data } = useQuery<ExampleQueryType>(ExampleQuery);
  return <>componentだよ</>;
};

みたいにして使っていた。
ここで、

graphql file の import がめんどくさい
型に任意の suffix 付ける option がないのでいちいち alias 書くがめんどくさい
生成された enum に const つけられない

ってなって、つらさが募っていった。
そのため GraphQL Code Generator を試してみた。

GraphQL Code Generator

TS の型生成に注力しているだけあって、柔軟性もあり、プラグインで組み合わせて好きな機能を選択できるので、いろいろてんこ盛りってことも避けられる。
React Apollo 対応のプラグインを使えば、@apollo/react-hooks をラップした関数を提供してくれるため、その関数さえ import すれば、.graphql の import も、型の import もする必要がない。
Apollo Client 3 の開発が進んで、beta も 40 台まできているが、GraphQL Code Generator はApollo client3 の対応も進めていて、react-apollo の deprecationもちゃんと考慮されて、@apollo/clientを使って型生成されるようになってる。

https://github.com/tyankatsu0105/sandbox-react-apollo/blob/master/apps/client/src/graphql/generated/schema.tsx#L4-L5
その他にもいいなと思った機能は以下

const enum の設定が可能
一つの config ファイルで plugin とか schama とかスコープが可能なのでわかりやすくて柔軟性がある
生成された型ファイルへの割り込みが可能
GraphQL ファイルの型定義ファイルの生成が可能

apollo.config.js の使いみち

VSCode の Apollo 拡張はルートのapolo.config.jsをもとに GraphQL の validate、auto complete などやってくれる。
codegen.ymlの schema と設定が一部被るが、より DX 高めたい場合はこの拡張のために config ファイルを作るといい。

終わりに

開発をどうやって楽にするかを考えるのは楽しい。
DX 高めるの良いですよね。