VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発

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 Conﬁg • GraphQLツールの共通設定 16 https://www.graphql-conﬁg.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-ﬁle-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

VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発

VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発

puku0x

More Decks by puku0x

Other Decks in Technology

Featured

Transcript