ReactQueryとCodegenとgraphql-codegen-typescript-mock-dataを使ってMock関数の自動生成したけど、参照の型が無いもの呼び出してエラーになる問題
堀川登喜矢現状
graphql.schemaをhasuraから取得していて、mock関数をschema.jsonから生成している。
しかし、graphql.tsで作成された型に存在しないものを大量に使っているためエラーで怒られている。
graphql.tsの設定とmock.tsの設定に乖離があるために起こっているのは分かるが、graphql.tsは*.graphqlファイルのoperationを元にしているので、hasuraが自動生成してくれたschema.jsonとどうしても乖離が出てしまう。
さて、どうする？
codegen.yml
overwrite: true
schema: 'http://localhost:8080/v1/graphql'
documents: 'graphql/**/*.graphql'
generates:
./graphql/graphql.ts:
plugins:
- 'typescript'
- 'typescript-operations'
- 'typescript-react-query'
config:
fetcher: graphql-request
withComponent: false
withHOC: false
withHooks: true
withRefetchFn: true
./graphql/mock.ts:
plugins:
- typescript-mock-data:
typesFile: './graphql.ts'
addTypename: true
enumValues: pascal-case#pascalCase
typename: keep
prefix: mock
scalars:
BaseDateTime:
generator: date
arguments: 'YYYY-MM-DD'
./graphql.schema.json:
plugins:
- 'introspection'
課題感
型エラーでmockが使えない。
Hasuraの自動生成したschemaはまだ型の未定義な使っていない関数まで生成して、
型を予測した名前でimportしようするが、そんなものは無いとエラーになる。
仮説1
Hasuraが生成するschemaを使うものだけに制限する。
→ そもそも、そんなことできるの？
仮説2
mockの生成ライブラリの設定で、使っているものだけのmockを作る制限する。
→ schemaを見て作っているけど、operationやgraphql.tsのapiファイルを見る様にできたりするのか？
仮説3
HASURAが生成したschemaのすべての.graphqlファイルを作成する
→ できなくは無いけどcodegenしている意味が無い
堀川登喜矢これは課題の認識がそもそも間違っている。
実際は、HASURAのschemaから生成した型の命名規則がXxx_Xxxなのに対して、mock側で期待している型の命名規則がXxxXxxであるような乖離が存在しているから、importしてもそんな型はありませんよ。とエラーになる。
そこで、どちらかに合わせればいいが、HASURAのスネークケースをパスカルケースに合わせるのが一番やりやすい。
堀川登喜矢HASURAのGraphQL Schemaをパスカルケースに統一したい
テーブル名をパスカルケースに変える（ex: login_users → loginUsers）
→ loginUsers_by_pickなどの命名はスネークのままで意味がない
HASURAの設定をイジる
それっぽいGItHub Issueがopen状態で議論されていた
堀川登喜矢このアプローチは失敗
堀川登喜矢Codegenでnaming caseを指定できるか探る
GraphQL Codegenの設定でケースの変換設定を見つけた！
Remove Underscores
config:
namingConvention:
typeNames: change-case-all#pascalCase
transformUnderscore: true