Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ゼロから始める型安全なGraphQL開発
Search
黒柳シャチ子
June 22, 2024
Programming
1
300
ゼロから始める型安全なGraphQL開発
PHPConference福岡2024LT登壇資料
黒柳シャチ子
June 22, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.4k
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
180
Swiftコードバトル必勝法
toshi0383
0
170
Perl 5 OOP機構30年史 - Perl 5's OOP Mechanism over the past 30 years
moznion
0
410
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
390
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
Rubyのobject_id
qnighy
6
1.3k
Architecture Decision Record (ADR)
nearme_tech
PRO
1
700
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
680
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
380
私のEbitengineの第一歩
qt_luigi
0
450
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
550
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Docker and Python
trallard
39
3k
Agile that works and the tools we love
rasmusluckow
327
20k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Bash Introduction
62gerente
608
210k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
The Pragmatic Product Professional
lauravandoore
31
6.2k
How to Think Like a Performance Engineer
csswizardry
16
960
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Transcript
ゼロから始める 型安全なGraphQL開発 with Laravel + Lighthouse + TypeScript 黒柳シャチ子 /
髙山 伶
・黒柳シャチ子 / 髙山 伶 (@shachi_daikon55) ・所属: ディップ株式会社 ・バイトルなどのWEBアプリ開発 / 3年目
・PHP / TypeScript / AWS … 自己紹介
今日伝えたいこと
GraphQLを使った スキーマ駆動開発
めっちゃいいぞっ 👍
GraphQL使うなら Laravel + Lighthouse
めっちゃいいぞっ 👍
GraphQLでの型安全な 開発体験の良さを
ぜひ皆さんにも伝えたい!!
そんなLTです
まずは GraphQLおさらい
RESTの手法と 比較しながら説明
APIサーバー RESTの場合 クライアント “/users/1” エンドポイント毎に決め られた処理を実行
APIサーバー RESTの場合 クライアント “/users/1” しかしuser情報のうち ”name”しか必要としない場合 エンドポイント毎に決め られた処理を実行
APIサーバー RESTの場合 クライアント “/users/1” ここの取得データが余分 エンドポイント毎に決め られた処理を実行
APIサーバー RESTの場合 クライアント “/users/1” ここの取得データが余分 エンドポイント毎に決め られた処理を実行 リソースのオーバー・アンダーフェッチ
GraphQLの場合
APIサーバー クライアント “/graphql” エンドポイントは一つだけ 必要なデータ のみを クライアントが指定して取得 できる 取れたデータは ”name”だけ
どうやってクライアントは クエリを作るの?
GraphQLでは必ず スキーマと呼ばれる 型を伴ったデータリソースを定義 = I/F まずGraphQLで定義する スキーマ(I/F)を参照
まずGraphQLで定義する スキーマ(I/F)を参照
まずGraphQLで定義する スキーマ(I/F)を参照 この型の、
まずGraphQLで定義する スキーマ(I/F)を参照 このフィールドが欲しい
まずGraphQLで定義する スキーマ(I/F)を参照 User型はこの二つのクエリで提供されている
まずGraphQLで定義する スキーマ(I/F)を参照 User型はこの二つのクエリで提供されている このデータを取得するクエリは
このような形で組み上げられる
このような形で組み上げられる
APIサーバー クライアント 必要なデータ のみを クライアントが指定して取得 できる 取れたデータは ”name”だけ
APIサーバー クライアント 必要なデータ のみを クライアントが指定して取得 できる 取れたデータは ”name”だけ 必要なリソースを柔軟に指定できる オーバー・アンダーフェッチを防げる
APIサーバー クライアント 必要なデータ のみを クライアントが指定して取得 できる 取れたデータは ”name”だけ それが GraphQL
以上GraphQLの 前提知識おさらい
開発体験的に嬉しい点 (クライアント)
・ 欲しいデータを component毎に分けて記述できる ・生成ツールを使って、 GraphQLスキーマの型を クライアントでも利用できる 開発体験的に嬉しい点 (クライアント )
・ 欲しいデータを component毎に分けて記述できる ・生成ツールを使って、 GraphQLスキーマの型を クライアントでも利用できる 開発体験的に嬉しい点 (クライアント ) 簡単に型安全に開発できちゃう
✅
・ 欲しいデータを component毎に分けて記述できる ・生成ツールを使って、 GraphQLスキーマの型を クライアントでも利用できる 開発体験的に嬉しい点 (クライアント )
クエリするデータを component単位で記述する User詳細画面の componentたち UserName.tsx UserEmail.tsx
クエリするデータを component単位で記述する User詳細画面の componentたち UserName.tsx UserEmail.tsx 欲しい
じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配
じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配 ただこれ、
じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配 親 component (page)が
子 component で必要なデータを 知ってなきゃいけない。。。
じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配 もしcomponentの 必要なデータが変わった場合、
じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配 そのcomponentを使っているすべての pageでクエリの書き換えが必要になる 🤨
そこで、
Fragment Colocation という仕組みを使用 UserName.tsx UserEmail.tsx component毎に 欲しいデータを定義
Fragment Colocation という仕組みを使用 UserName.tsx UserEmail.tsx 要は componentたちは 各々欲しいデータを自ファイル中で主張
分配 page側でそのFragment(主張)をまとめる
分配する時 pageは子の欲しいデータについて 関心を持たない 分配
分配する時 pageは子の欲しいデータについて 関心を持たない 分配 欲しいデータの情報が componentの中に閉じる
分配する時 pageは子の欲しいデータについて 関心を持たない 分配 バリ改修しやすい 👍
さらに、
・ 欲しいデータを component毎に分けて記述できる ・生成ツールを使って、 GraphQLスキーマの型を クライアントでも利用できる 実際の開発体制での嬉しみ (クライアント )
GraphQL codegen で GraphQLクエリの型を TypeScriptで使う
UserName.tsx UserEmail.tsx GraphQL codegenを使うと
UserName.tsx UserEmail.tsx Fragmentやクエリを元に GraphQLから型を自動生成してくれる Fragmentを元に、 型を自動生成 Fragmentを元に、 型を自動生成
このFragmentと 型の自動生成を組み合わせると
もし必要なデータに 変更があったとしても User詳細画面の componentたち UserName.tsx UserEmail.tsx 欲しい 追加で 欲しい
componentの Fragmentを追記して UserEmail.tsx 追記
codegenの型生成コマンド を実行するだけで
APIのデータ取得内容を変えられちゃう! 分配 追加取得 できちゃう
それだけで APIのデータ取得内容を変えられちゃう! 分配 追加取得 できちゃう 型のエラーも起きません ✅ API連携での余計な型エラーとは おさらば
それだけで APIのデータ取得内容を変えられちゃう! 分配 追加取得 できちゃう 超簡単に型安全に APIと連携できちゃう ✅
クライアント側はわかったけど サーバー側は難しいのでは?
APIサーバー RESTの場合 クライアント “/users/1” エンドポイント毎に決め られた処理を実行 “/posts” 処理1 処理2
GraphQLの場合
APIサーバー クライアントが何かは あんまり関係ない スキーマのフィールド毎に 決められた処理を実行 ・・・
APIサーバー クライアントが何かは あんまり関係ない スキーマのフィールド毎に 決められた処理を実行 ・・・ めんどくさそう ?
APIサーバー クライアントが何かは あんまり関係ない スキーマのフィールド毎に 決められた処理を実行 ・・・ 大丈夫ですよ 😏
Lighthouseが あるからねぇ!
Lighthouse Laravelフレンドリーな GraphQL FW https://lighthouse-php.com/
Lighthouse APIサーバー Lighthouseのサーバーに スキーマを設置して動作 ・・・
スキーマに直説解決処理を記載していく ・・・ Lighthouse APIサーバー
Lighthouseの強力なスキーマ解決能力 ・ モデル・カラムと名前が一致するスキーマは デフォルトでその値を返してくれる ・ディレクティブ と呼ばれる使い回しの効く備え 付けのスキーマ解決処理が豊富 ・複雑なスキーマの解決は、リゾルバー にまと められる
先ほどのUser型 の実装を考える
これが
こう!
ディレクティブ を使えばシンプルに Lighthouse備え付けの ディレクティブ リレーション id引数一致のUserモデ ルを取得
ディレクティブが ついてないものは自動解決 Userモデルのid, name, emailのカラム値を取得
APIサーバー Lighthouseのおかげで 少ない処理 で多くのフィールドを解決 ・・・
APIサーバー Lighthouseのおかげで 少ない処理 で多くのフィールドを解決 ・・・ 👍 手軽に始められる 👍 ディレクティブのおかげで記述量少なく済む 👍
スキーマファーストなので、 スキーマ駆動開発しやすい
APIサーバー Lighthouseのおかげで 少ない処理 で多くのフィールドを解決 ・・・ PHPerの皆さん LighthouseでGraphQL 触り始めてはいかがでしょう?
APIサーバー Lighthouseのおかげで 少ない処理 で多くのフィールドを解決 ・・・ 触りましょうよ!!!!
いかがだったでしょうか
「なんかよくわからないけど、 面白そうだ!」
そう思っていただけたら 幸いです🙏
まとめ ・ GraphQL + TypeScriptは、すごく簡単に型 安全なAPI連携ができる ・Laravel + Lighthouseはスキーマの解決が 楽。記述量が少なく済む。
・GraphQLの開発は一度仕組みを整えると改 修がほんとにしやすい
カジュアル面談やってます! https://hrmos.co/pages/dip-net/jobs/phperkaigi-dip
ご清聴ありがとうございました!