ゼロから始める型安全なGraphQL開発

PHPConference福岡2024LT登壇資料

Transcript

1. ゼロから始める 型安全なGraphQL開発 with Laravel + Lighthouse + TypeScript 黒柳シャチ子 / 髙山 伶
2. ・黒柳シャチ子 / 髙山 伶 (@shachi_daikon55) ・所属: ディップ株式会社 ・バイトルなどのWEBアプリ開発 / 3年目 ・PHP / TypeScript / AWS … 自己紹介
3. 今日伝えたいこと
4. GraphQLを使った スキーマ駆動開発
5. めっちゃいいぞっ 👍
6. GraphQL使うなら Laravel + Lighthouse
7. めっちゃいいぞっ 👍
8. GraphQLでの型安全な 開発体験の良さを
9. ぜひ皆さんにも伝えたい！！
10. そんなLTです
11. まずは GraphQLおさらい
12. RESTの手法と 比較しながら説明
13. APIサーバー RESTの場合 クライアント “/users/1” エンドポイント毎に決め られた処理を実行
14. APIサーバー RESTの場合 クライアント “/users/1” しかしuser情報のうち ”name”しか必要としない場合 エンドポイント毎に決め られた処理を実行
15. APIサーバー RESTの場合 クライアント “/users/1” ここの取得データが余分 エンドポイント毎に決め られた処理を実行
16. APIサーバー RESTの場合 クライアント “/users/1” ここの取得データが余分 エンドポイント毎に決め られた処理を実行 リソースのオーバー・アンダーフェッチ
17. GraphQLの場合
18. APIサーバー クライアント “/graphql” エンドポイントは一つだけ 必要なデータ のみを クライアントが指定して取得 できる 取れたデータは ”name”だけ
19. どうやってクライアントは クエリを作るの？
20. GraphQLでは必ず スキーマと呼ばれる 型を伴ったデータリソースを定義 = I/F まずGraphQLで定義する スキーマ(I/F)を参照
21. まずGraphQLで定義する スキーマ(I/F)を参照
22. まずGraphQLで定義する スキーマ(I/F)を参照 この型の、
23. まずGraphQLで定義する スキーマ(I/F)を参照 このフィールドが欲しい
24. まずGraphQLで定義する スキーマ(I/F)を参照 User型はこの二つのクエリで提供されている
25. まずGraphQLで定義する スキーマ(I/F)を参照 User型はこの二つのクエリで提供されている このデータを取得するクエリは
26. このような形で組み上げられる
27. このような形で組み上げられる
28. APIサーバー クライアント 必要なデータ のみを クライアントが指定して取得 できる 取れたデータは ”name”だけ
29. APIサーバー クライアント 必要なデータ のみを クライアントが指定して取得 できる 取れたデータは ”name”だけ 必要なリソースを柔軟に指定できる オーバー・アンダーフェッチを防げる
30. APIサーバー クライアント 必要なデータ のみを クライアントが指定して取得 できる 取れたデータは ”name”だけ それが GraphQL
31. 以上GraphQLの 前提知識おさらい
32. 開発体験的に嬉しい点 （クライアント）
33. ・ 欲しいデータを component毎に分けて記述できる ・生成ツールを使って、 GraphQLスキーマの型を クライアントでも利用できる 開発体験的に嬉しい点 (クライアント )
34. ・ 欲しいデータを component毎に分けて記述できる ・生成ツールを使って、 GraphQLスキーマの型を クライアントでも利用できる 開発体験的に嬉しい点 (クライアント ) 簡単に型安全に開発できちゃう ✅
35. ・ 欲しいデータを component毎に分けて記述できる ・生成ツールを使って、 GraphQLスキーマの型を クライアントでも利用できる 開発体験的に嬉しい点 (クライアント )
36. クエリするデータを component単位で記述する User詳細画面の componentたち UserName.tsx UserEmail.tsx
37. クエリするデータを component単位で記述する User詳細画面の componentたち UserName.tsx UserEmail.tsx 欲しい
38. じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配
39. じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配 ただこれ、
40. じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配 親 component (page)が 子 component で必要なデータを 知ってなきゃいけない。。。
41. じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配 もしcomponentの 必要なデータが変わった場合、
42. じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配 そのcomponentを使っているすべての pageでクエリの書き換えが必要になる 🤨
43. そこで、
44. Fragment Colocation という仕組みを使用 UserName.tsx UserEmail.tsx component毎に 欲しいデータを定義
45. Fragment Colocation という仕組みを使用 UserName.tsx UserEmail.tsx 要は componentたちは 各々欲しいデータを自ファイル中で主張
46. 分配 page側でそのFragment(主張)をまとめる
47. 分配する時 pageは子の欲しいデータについて 関心を持たない 分配
48. 分配する時 pageは子の欲しいデータについて 関心を持たない 分配 欲しいデータの情報が componentの中に閉じる
49. 分配する時 pageは子の欲しいデータについて 関心を持たない 分配 バリ改修しやすい 👍
50. さらに、
51. ・ 欲しいデータを component毎に分けて記述できる ・生成ツールを使って、 GraphQLスキーマの型を クライアントでも利用できる 実際の開発体制での嬉しみ (クライアント )
52. GraphQL codegen で GraphQLクエリの型を TypeScriptで使う
53. UserName.tsx UserEmail.tsx GraphQL codegenを使うと
54. UserName.tsx UserEmail.tsx Fragmentやクエリを元に GraphQLから型を自動生成してくれる Fragmentを元に、 型を自動生成 Fragmentを元に、 型を自動生成
55. このFragmentと 型の自動生成を組み合わせると
56. もし必要なデータに 変更があったとしても User詳細画面の componentたち UserName.tsx UserEmail.tsx 欲しい 追加で 欲しい
57. componentの Fragmentを追記して UserEmail.tsx 追記
58. codegenの型生成コマンド を実行するだけで
59. APIのデータ取得内容を変えられちゃう！ 分配 追加取得 できちゃう
60. それだけで APIのデータ取得内容を変えられちゃう！ 分配 追加取得 できちゃう 型のエラーも起きません ✅ API連携での余計な型エラーとは おさらば
61. それだけで APIのデータ取得内容を変えられちゃう！ 分配 追加取得 できちゃう 超簡単に型安全に APIと連携できちゃう ✅
62. クライアント側はわかったけど サーバー側は難しいのでは？
63. APIサーバー RESTの場合 クライアント “/users/1” エンドポイント毎に決め られた処理を実行 “/posts” 処理1 処理2
64. GraphQLの場合
65. APIサーバー クライアントが何かは あんまり関係ない スキーマのフィールド毎に 決められた処理を実行 ・・・
66. APIサーバー クライアントが何かは あんまり関係ない スキーマのフィールド毎に 決められた処理を実行 ・・・ めんどくさそう ?
67. APIサーバー クライアントが何かは あんまり関係ない スキーマのフィールド毎に 決められた処理を実行 ・・・ 大丈夫ですよ 😏
68. Lighthouseが あるからねぇ！
69. Lighthouse Laravelフレンドリーな GraphQL FW https://lighthouse-php.com/
70. Lighthouse APIサーバー Lighthouseのサーバーに スキーマを設置して動作 ・・・
71. スキーマに直説解決処理を記載していく ・・・ Lighthouse APIサーバー
72. Lighthouseの強力なスキーマ解決能力 ・ モデル・カラムと名前が一致するスキーマは デフォルトでその値を返してくれる ・ディレクティブ と呼ばれる使い回しの効く備え 付けのスキーマ解決処理が豊富 ・複雑なスキーマの解決は、リゾルバー にまと められる
73. 先ほどのUser型 の実装を考える
74. これが
75. こう！
76. ディレクティブ を使えばシンプルに Lighthouse備え付けの ディレクティブ リレーション id引数一致のUserモデ ルを取得
77. ディレクティブが ついてないものは自動解決 Userモデルのid, name, emailのカラム値を取得
78. APIサーバー Lighthouseのおかげで 少ない処理 で多くのフィールドを解決 ・・・
79. APIサーバー Lighthouseのおかげで 少ない処理 で多くのフィールドを解決 ・・・ 👍 手軽に始められる 👍 ディレクティブのおかげで記述量少なく済む 👍 スキーマファーストなので、 スキーマ駆動開発しやすい
80. APIサーバー Lighthouseのおかげで 少ない処理 で多くのフィールドを解決 ・・・ PHPerの皆さん LighthouseでGraphQL 触り始めてはいかがでしょう？
81. APIサーバー Lighthouseのおかげで 少ない処理 で多くのフィールドを解決 ・・・ 触りましょうよ！！！！
82. いかがだったでしょうか
83. 「なんかよくわからないけど、 面白そうだ！」
84. そう思っていただけたら 幸いです🙏
85. まとめ ・ GraphQL + TypeScriptは、すごく簡単に型 安全なAPI連携ができる ・Laravel + Lighthouseはスキーマの解決が 楽。記述量が少なく済む。 ・GraphQLの開発は一度仕組みを整えると改 修がほんとにしやすい
86. カジュアル面談やってます！ https://hrmos.co/pages/dip-net/jobs/phperkaigi-dip
87. ご清聴ありがとうございました！