Apollo toolingでTypeScriptのクライアントの型定義を自動生成

GraphQLのスキーマを定義してTypeScriptのクライアントから利用する場合、型定義をなんとかしないといけない。

GraphQLのスキーマから作成するツールがいくつかある。クライアントライブラリとしてApolloのものを試した。

バックエンドはlighthouseを利用している

TypeScript + Apollo ClientでGraphQLのデータに型を付ける - $shibayu36->blog;

apollo.config.jsを書く

clientのスキーマ読み込みの方法は3種類ある

Apollo Engineをつかう

graphqlのエンドポイントから読み込む(GraphQLはそういう仕様がある？)

今回はこれを利用

gqlタグから生成しているようだが、この設定いるの？

ないと生成コマンドがコケる

code:zsh

Generating query files

› Error: Error initializing Apollo GraphQL project "project name": Error: Error in "Loading schema for project name": TypeError: Cannot read property 'foo' of undefined

ローカルにスキーマファイルを置くを使う

npx apollo client:codegen --useReadOnlyTypes --target=typescript

apollographql/apollo-tooling: ✏️ Tooling for development and production Apollo workflows

ハマり

クエリの名前に重複があるとエラーが出てしまう

Datetime型がつくりたいんやけど

独自定義の型（scalar DateTimeとか）はデフォルトではanyになる

--passthroughCustomScalarsをつけると自分で定義した名前の型(たとえぼDateTime)の名前にしてくれる

https://github.com/apollographql/apollo-tooling/issues/369#issuecomment-428759650

名前がつくだけで定義はないため使えない。自分でglobalな型をつける

https://github.com/dotansimha/graphql-code-generator/issues/153#issuecomment-407742950

code:最終的なコマンド

npx apollo client:codegen --useReadOnlyTypes --target=typescript --passthroughCustomScalars --customScalarsPrefix=GraphQL_

read onlyにするとsortが使えない

https://github.com/Microsoft/TypeScript/issues/17291