gql.tada の紹介

Transcript

1. gql.tada の紹介 2024/04/19 tsukiji.graphql x ハッカー鮨 hirataku
2. 自己紹介 • Taku Hiramatsu（ひらたく） • X: @hirataq__ ◦ （最近アカウント作り直しました） • 関西在住、娘👭 • 趣味はサッカー、山登り、コードを書くこと • ソフトウェアエンジニア • 経歴 ◦ 新卒で株式会社フリークアウト ◦ いくつかの新規事業に従事 ◦ 2020/6〜 株式会社カケハシ
3. いいたいこと
4. いいたいこと GraphQL を利用する Web フロントエンドにおいて、 これまでは @graphql-codegen/client-preset 一択だったが、 gql.tada を検討してみてもいいかも。 より良い開発体験を得られるよ。
5. アジェンダ • Web フロントエンドにおける GraphQL 開発体験 • gql.tada とは • gql.tada の開発体験 • まとめ
6. Web フロントエンドにおける GraphQL 開発体験
7. Web フロントエンドにおける GraphQL 開発体験 • TypeScript と GraphQL の相性は抜群 • エコシステムも充実している ◦ 特に GraphQL Code Generator
8. GraphQL Code Generator をフル活用 GraphQL を利用する Web フロントエンドにおいて、GraphQL Code Generator のエコシステムは強力。利用しない手はない。 （以前、GraphQLスキーマからの自動生成 - フロントエンド開発体験の向上と いうタイトルで以前 LT させてもらいました） Web フロントエンドにおける GraphQL 開発体験
9. GraphQL Code Generator はプラグインが豊富 私は以下をよく使っています • @graphql-codegen/client-preset ◦ フロントエンド開発に必要なプラグインの組み合わせ ◦ TypedDocumentNode を生成（メジャーな GraphQL クライアントがサポート） ◦ Fragment Colocation を支援する fragment-masking の機能を提供 • @graphql-codegen/typescript-msw ◦ MSWモックハンドラを生成してくれる • graphql-codegen-typescript-mock-data ◦ GraphQL レスポンスモックデータの factory 関数の生成をしてくれる Web フロントエンドにおける GraphQL 開発体験
10. @graphql-codegen/client-preset 便利！ • 型安全な開発体験 • fragment-masking の制約はフロントエンドをシンプルにする ◦ チーム開発においては迷わず導入して良いと思う Web フロントエンドにおける GraphQL 開発体験
11. @graphql-codegen/client-preset の課題 ① コンポーネントに書く GraphQL operation, fragment に補完が効かない。 コード生成するまで正しく記述できているかわからない。 ② コンポーネントに GraphQL operation, fragment を書いた後、コード生成 しないと、コンパイルエラーになる Web フロントエンドにおける GraphQL 開発体験
12. @graphql-codegen/client-preset の課題 ① コンポーネントに書く GraphQL operation, fragment に補完が効かない。 コード生成するまで正しく記述できているかわからない。 Web フロントエンドにおける GraphQL 開発体験
13. @graphql-codegen/client-preset の課題 ② コンポーネントに GraphQL operation, fragment を書いた後、コード生成 しないと、コンパイルエラーになる Web フロントエンドにおける GraphQL 開発体験
14. @graphql-codegen/client-preset の課題 fragment-masking を導入し、Fragment Colocation したコンポーネントの増加 ↓ fragment を書く機会の増加 ↓ fragment を書き換えるたびに、コード再生成（graphql-codegen）=> エディタのTS サーバ再起動（VSCode => `TypeScript: Restart TS server`）を実行 Web フロントエンドにおける GraphQL 開発体験
15. @graphql-codegen/client-preset の課題 fragment-masking を導入し、Fragment Colocation したコンポーネントの増加 ↓ fragment を書く機会の増加 ↓ fragment を書き換えるたびに、コード再生成（graphql-codegen）=> エディタのTS サーバ再起動（VSCode => `TypeScript: Restart TS server`）を実行 Web フロントエンドにおける GraphQL 開発体験
16. @graphql-codegen/client-preset の課題 fragment-masking を導入し、Fragment Colocation したコンポーネントの増加 ↓ fragment を書く機会の増加 ↓ fragment を書き換えるたびに、コード再生成（graphql-codegen）=> エディタのTS サーバ再起動（VSCode => `TypeScript: Restart TS server`）を実行 もうちょっと体験が良くなるといいな Web フロントエンドにおける GraphQL 開発体験
17. そんなことを思っていたときに gql.tada を知った
18. gql.tada とは
19. 最初のコミットは2023/07 gql.tada とは https://github.com/0no-co/gql.tada/commit/e588410c64ca03ed2d50134bd0b6445b33890add • urql（GraphQL API Client）の コミッタ（kittenさん）が作って いる
20. gql.tada のモチベーション gql.tada as a project was started to answer the question: “Why can’t we teach TypeScript to understand the GraphQL query language?” ref: https://gql-tada.0no.co/get-started/ 訳: gql.tada は、「TypeScript に GraphQL クエリ言語を理解させること はできないか」という問いに答えるために開始されたプロジェクトです。 gql.tada とは
21. Magical GraphQL query engine for TypeScript • parses your GraphQL documents in the TypeScript type system ◦ TSの型システムで、GraphQLドキュメントをパース • uses your introspected schema and scalar configuration to derive a schema ◦ イントロスペクトされたスキーマとスカラーを使用してスキーマを導出 • maps your GraphQL queries and fragments with the schema to result and variables types ◦ GraphQL クエリとフラグメントをスキーマを使用して結果と変数の型にマッピング • creates fragment masks and enforces unwrapping fragments gradually ◦ フラグメントマスクを作成し、フラグメントのアンラップを段階的に強制 gql.tada とは ↑をTypeScriptの型システム、型チェッカーで実施するため、 コード編集中に即時反映される！
22. Magical GraphQL query engine for TypeScript • parses your GraphQL documents in the TypeScript type system ◦ TSの型システムで、GraphQLドキュメントをパース • uses your introspected schema and scalar configuration to derive a schema ◦ イントロスペクトされたスキーマとスカラーを使用してスキーマを導出 • maps your GraphQL queries and fragments with the schema to result and variables types ◦ GraphQL クエリとフラグメントをスキーマを使用して結果と変数の型にマッピング • creates fragment masks and enforces unwrapping fragments gradually ◦ フラグメントマスクを作成し、フラグメントのアンラップを段階的に強制 gql.tada とは ↑をTypeScriptの型システム、型チェッカーで実施するため、 コード編集中に即時反映される！ よさそう
23. gql.tada の開発体験
24. gql.tada の開発体験 • GraphQL query, mutation, fragmentを記 述する際に、補完が効く • コード生成不要で、クエリの variables, 結果 に型が効く
25. GraphQL query, mutation, fragmentを記述する際 に、補完が効く gql.tada の開発体験
26. コード生成不要で、クエリの variables, 結果に型が 効く gql.tada の開発体験
27. gql.tada の開発体験
28. デモ動画 gql.tada の開発体験 https://gql-tada-demo-video.pages.dev/demo.mp4
29. 開発体験上がりそうですね！
30. gql.tada の開発体験 その他 • client-preset の makeFragmentData （テストや Storybook で便利な モック Fragment 生成関数）相当の関数（readFragment）もある
31. まとめ
32. まとめ GraphQLを利用するWebフロントエンドにおいて、 これまでは @graphql-codegen/client-preset 一択だったが、 gql.tada を検討する価値はありそう。 （とはいえ、GraphQL Code Generatorのエコシステムは強力で、まだまだお世話 になります。）