VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発 フロントエンドカンファレンス福岡 スピンオフ

Noriyuki Shinpuku Frontend engineer Findy Co., Ltd. @puku0x 2

@puku0x FindyはREST→GraphQL移行中 3

@puku0x 型の自動生成が欲しい 4

@puku0x GraphQL Code Generator ● スキーマから型やロジックを生成 5 https://www.graphql-code-generator.com/

schema: http://localhost:3000/graphql documents: ./src/**/*.graphql generates: ./src/types.ts: plugins: - typescript - typescript-operations codegen.yml 6

@puku0x APIドキュメントは？ 7

@puku0x GraphiQL 8 https://github.com/graphql/graphiql

@puku0x 良さそう 9

@puku0x コード補完も欲しい 10

@puku0x GraphiQLも良いけど VSCodeでコード補完したい （あとシンタックスハイライトも） 11

@puku0x VSCode GraphQL ● 公式のVS Code拡張 12 https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql

@puku0x 勝ったな 13

@puku0x 👀 設定 14

@puku0x 🤔 また設定...? 15

@puku0x GraphQL Config ● GraphQLツールの共通設定 16 https://www.graphql-config.com/

schema: http://localhost:3000/graphql documents: ./src/**/*.graphql extensions: codegen: generates: ./src/types.ts: plugins: - typescript - typescript-operartions codegen.yml → .graphqlrc.yml 17

@puku0x 設定ファイル統合できた 18

@puku0x HTTPSを使いたい 19

NODE_TLS_REJECT_UNAUTHORIZED=0 .env 20

@puku0x モノレポで使いたい 21

projects: my-app: schema: - https://localhost:3000/graphql documents: 'apps/my-app/src/**/*.graphql' extensions: … my-lib: schema: - https://localhost:3000/graphql documents: 'libs/my-lib/src/**/*.graphql' extensions: … Projects 22

$ graphql-codegen --project=my-lib プロジェクト単位で実行 23

@puku0x Nx + @graphql-codegen/near-operation-file-preset 24

@puku0x Nx ● モノレポ管理 + ビルド環境 25 https://nx.dev

アプリケーション側 ライブラリ側（型定義の元はこっち） 26 generates: apps/my-app/src/: preset: near-operation-file presetConfig: baseTypesPath: '~@workspace/my-lib folder: __generated__ plugins: - typescript-operations - typescript-react-apollo generates: libs/my-lib/src/__generated__/types.generated.ts: plugins: - typescript libs/my-lib/src: preset: near-operation-file presetConfig: baseTypesPath: '~./types.generated' folder: __generated__ plugins: - typescript-operations - typescript-react-apollo

@puku0x まとめ ● GraphQLはいいぞ ○ 型の自動生成が最高だった ○ VSCodeでコード補完 ○ モノレポ対応 ■ Nxはいいぞ 27

@puku0x 28 https://careers.findy.co.jp/ 採用のお知らせ

@puku0x Thank you! @puku0x Noriyuki Shinpuku