Zenn
Closed8

[memo]graphql-code-generator で生成されたファイルを整形する

メモ
batibati

昨日の続き

https://zenn.dev/bati/scraps/2b254628200ef1

やること

  • 生成されたファイルを整形するオプションを設定（準備）
  • hooks が生成されるように設定
  • useQuery, useMutation を使っている箇所を hooks に置き換える

狙い

  • クライアントサイドの開発を楽にする
batibati

hooks: { afterAllFileWrite: ['prettier --write'] },

を記載して整形できた。
, で区切って後ろにコマンドを書けば複数コマンドを実行できる。
また、package.json の scripts のコマンドも実行できた。

以下理由で prettier だけ実行することにした。

  • eslint の fix は自動ではエラーが全て解消できない。
  • 色々コマンドを追加すると codegen が重くなる。
  • 生成ファイルが整形できて見やすくできたら十分。
batibati

codegen の実行時に --check をつけると dry run ができる。
変更があれば以下のような stale files （古いファイル）が検出される。

The following stale files were detected:
  - src/domains/apollo/gql/generated/fragment-masking.ts
,  - src/domains/apollo/gql/generated/gql.ts
,  - src/domains/apollo/gql/generated/graphql.ts
,  - src/domains/apollo/gql/generated/index.ts
batibati

We now recommend using the client-preset package for a better developer experience and smaller impact on bundle size.

ドキュメントの最初に client-preset を進める旨の記載があったので、react-apollo は使わない方向で進めることにする。

このスクラップは2023/12/20にクローズされました