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

by 黒柳シャチ子

Slide 1

Slide 1 text

ゼロから始める型安全なGraphQL開発 with Laravel + Lighthouse + TypeScript 黒柳シャチ子 / 髙山伶

Slide 2

Slide 2 text

・黒柳シャチ子 / 髙山伶 (@shachi_daikon55) ・所属: ディップ株式会社・バイトルなどのWEBアプリ開発 / 3年目・PHP / TypeScript / AWS … 自己紹介

Slide 3

Slide 3 text

今日伝えたいこと

Slide 4

Slide 4 text

GraphQLを使ったスキーマ駆動開発

Slide 5

Slide 5 text

めっちゃいいぞっ 👍

Slide 6

Slide 6 text

GraphQL使うなら Laravel + Lighthouse

Slide 7

Slide 7 text

めっちゃいいぞっ 👍

Slide 8

Slide 8 text

GraphQLでの型安全な開発体験の良さを

Slide 9

Slide 9 text

ぜひ皆さんにも伝えたい！！

Slide 10

Slide 10 text

そんなLTです

Slide 11

Slide 11 text

まずは GraphQLおさらい

Slide 12

Slide 12 text

RESTの手法と比較しながら説明

Slide 13

Slide 13 text

APIサーバー RESTの場合クライアント “/users/1” エンドポイント毎に決められた処理を実行

Slide 14

Slide 14 text

APIサーバー RESTの場合クライアント “/users/1” しかしuser情報のうち ”name”しか必要としない場合エンドポイント毎に決められた処理を実行

Slide 15

Slide 15 text

APIサーバー RESTの場合クライアント “/users/1” ここの取得データが余分エンドポイント毎に決められた処理を実行

Slide 16

Slide 16 text

APIサーバー RESTの場合クライアント “/users/1” ここの取得データが余分エンドポイント毎に決められた処理を実行リソースのオーバー・アンダーフェッチ

Slide 17

Slide 17 text

GraphQLの場合

Slide 18

Slide 18 text

APIサーバークライアント “/graphql” エンドポイントは一つだけ必要なデータのみをクライアントが指定して取得できる取れたデータは ”name”だけ

Slide 19

Slide 19 text

どうやってクライアントはクエリを作るの？

Slide 20

Slide 20 text

GraphQLでは必ずスキーマと呼ばれる型を伴ったデータリソースを定義 = I/F まずGraphQLで定義するスキーマ(I/F)を参照

Slide 21

Slide 21 text

まずGraphQLで定義するスキーマ(I/F)を参照

Slide 22

Slide 22 text

まずGraphQLで定義するスキーマ(I/F)を参照この型の、

Slide 23

Slide 23 text

まずGraphQLで定義するスキーマ(I/F)を参照このフィールドが欲しい

Slide 24

Slide 24 text

まずGraphQLで定義するスキーマ(I/F)を参照 User型はこの二つのクエリで提供されている

Slide 25

Slide 25 text

まずGraphQLで定義するスキーマ(I/F)を参照 User型はこの二つのクエリで提供されているこのデータを取得するクエリは

Slide 26

Slide 26 text

このような形で組み上げられる

Slide 27

Slide 27 text

このような形で組み上げられる

Slide 28

Slide 28 text

APIサーバークライアント必要なデータのみをクライアントが指定して取得できる取れたデータは ”name”だけ

Slide 29

Slide 29 text

APIサーバークライアント必要なデータのみをクライアントが指定して取得できる取れたデータは ”name”だけ必要なリソースを柔軟に指定できるオーバー・アンダーフェッチを防げる

Slide 30

Slide 30 text

APIサーバークライアント必要なデータのみをクライアントが指定して取得できる取れたデータは ”name”だけそれが GraphQL

Slide 31

Slide 31 text

以上GraphQLの前提知識おさらい

Slide 32

Slide 32 text

開発体験的に嬉しい点（クライアント）

Slide 33

Slide 33 text

・欲しいデータを component毎に分けて記述できる・生成ツールを使って、 GraphQLスキーマの型をクライアントでも利用できる開発体験的に嬉しい点 (クライアント )

Slide 34

Slide 34 text

・欲しいデータを component毎に分けて記述できる・生成ツールを使って、 GraphQLスキーマの型をクライアントでも利用できる開発体験的に嬉しい点 (クライアント ) 簡単に型安全に開発できちゃう ✅

Slide 35

Slide 35 text

Slide 36

Slide 36 text

クエリするデータを component単位で記述する User詳細画面の componentたち UserName.tsx UserEmail.tsx

Slide 37

Slide 37 text

クエリするデータを component単位で記述する User詳細画面の componentたち UserName.tsx UserEmail.tsx 欲しい

Slide 38

Slide 38 text

じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配

Slide 39

Slide 39 text

じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配ただこれ、

Slide 40

Slide 40 text

じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配親 component (page)が子 component で必要なデータを知ってなきゃいけない。。。

Slide 41

Slide 41 text

じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配もしcomponentの必要なデータが変わった場合、

Slide 42

Slide 42 text

じゃあUser詳細画面でまとめて取得してあげようか User 詳細画面の componentたち UserName.tsx UserEmail.tsx 分配そのcomponentを使っているすべての pageでクエリの書き換えが必要になる 🤨

Slide 43

Slide 43 text

そこで、

Slide 44

Slide 44 text

Fragment Colocation という仕組みを使用 UserName.tsx UserEmail.tsx component毎に欲しいデータを定義

Slide 45

Slide 45 text

Fragment Colocation という仕組みを使用 UserName.tsx UserEmail.tsx 要は componentたちは各々欲しいデータを自ファイル中で主張

Slide 46

Slide 46 text

分配 page側でそのFragment(主張)をまとめる

Slide 47

Slide 47 text

分配する時 pageは子の欲しいデータについて関心を持たない分配

Slide 48

Slide 48 text

分配する時 pageは子の欲しいデータについて関心を持たない分配欲しいデータの情報が componentの中に閉じる

Slide 49

Slide 49 text

分配する時 pageは子の欲しいデータについて関心を持たない分配バリ改修しやすい 👍

Slide 50

Slide 50 text

さらに、

Slide 51

Slide 51 text

・欲しいデータを component毎に分けて記述できる・生成ツールを使って、 GraphQLスキーマの型をクライアントでも利用できる実際の開発体制での嬉しみ (クライアント )

Slide 52

Slide 52 text

GraphQL codegen で GraphQLクエリの型を TypeScriptで使う

Slide 53

Slide 53 text

UserName.tsx UserEmail.tsx GraphQL codegenを使うと

Slide 54

Slide 54 text

UserName.tsx UserEmail.tsx Fragmentやクエリを元に GraphQLから型を自動生成してくれる Fragmentを元に、型を自動生成 Fragmentを元に、型を自動生成

Slide 55

Slide 55 text

このFragmentと型の自動生成を組み合わせると

Slide 56

Slide 56 text

もし必要なデータに変更があったとしても User詳細画面の componentたち UserName.tsx UserEmail.tsx 欲しい追加で欲しい

Slide 57

Slide 57 text

componentの Fragmentを追記して UserEmail.tsx 追記

Slide 58

Slide 58 text

codegenの型生成コマンドを実行するだけで

Slide 59

Slide 59 text

APIのデータ取得内容を変えられちゃう！分配追加取得できちゃう

Slide 60

Slide 60 text

それだけで APIのデータ取得内容を変えられちゃう！分配追加取得できちゃう型のエラーも起きません ✅ API連携での余計な型エラーとはおさらば

Slide 61

Slide 61 text

それだけで APIのデータ取得内容を変えられちゃう！分配追加取得できちゃう超簡単に型安全に APIと連携できちゃう ✅

Slide 62

Slide 62 text

クライアント側はわかったけどサーバー側は難しいのでは？

Slide 63

Slide 63 text

APIサーバー RESTの場合クライアント “/users/1” エンドポイント毎に決められた処理を実行 “/posts” 処理1 処理2

Slide 64

Slide 64 text

GraphQLの場合

Slide 65

Slide 65 text

APIサーバークライアントが何かはあんまり関係ないスキーマのフィールド毎に決められた処理を実行・・・

Slide 66

Slide 66 text

APIサーバークライアントが何かはあんまり関係ないスキーマのフィールド毎に決められた処理を実行・・・めんどくさそう ?

Slide 67

Slide 67 text

APIサーバークライアントが何かはあんまり関係ないスキーマのフィールド毎に決められた処理を実行・・・大丈夫ですよ 😏

Slide 68

Slide 68 text

Lighthouseがあるからねぇ！

Slide 69

Slide 69 text

Lighthouse Laravelフレンドリーな GraphQL FW https://lighthouse-php.com/

Slide 70

Slide 70 text

Lighthouse APIサーバー Lighthouseのサーバーにスキーマを設置して動作・・・

Slide 71

Slide 71 text

スキーマに直説解決処理を記載していく・・・ Lighthouse APIサーバー

Slide 72

Slide 72 text

Lighthouseの強力なスキーマ解決能力・モデル・カラムと名前が一致するスキーマはデフォルトでその値を返してくれる・ディレクティブと呼ばれる使い回しの効く備え付けのスキーマ解決処理が豊富・複雑なスキーマの解決は、リゾルバーにまとめられる

Slide 73

Slide 73 text

先ほどのUser型の実装を考える

Slide 74

Slide 74 text

これが

Slide 75

Slide 75 text

こう！

Slide 76

Slide 76 text

ディレクティブを使えばシンプルに Lighthouse備え付けのディレクティブリレーション id引数一致のUserモデルを取得

Slide 77

Slide 77 text

ディレクティブがついてないものは自動解決 Userモデルのid, name, emailのカラム値を取得

Slide 78

Slide 78 text

APIサーバー Lighthouseのおかげで少ない処理で多くのフィールドを解決・・・

Slide 79

Slide 79 text

APIサーバー Lighthouseのおかげで少ない処理で多くのフィールドを解決・・・ 👍 手軽に始められる 👍 ディレクティブのおかげで記述量少なく済む 👍 スキーマファーストなので、スキーマ駆動開発しやすい

Slide 80

Slide 80 text

APIサーバー Lighthouseのおかげで少ない処理で多くのフィールドを解決・・・ PHPerの皆さん LighthouseでGraphQL 触り始めてはいかがでしょう？

Slide 81

Slide 81 text

APIサーバー Lighthouseのおかげで少ない処理で多くのフィールドを解決・・・触りましょうよ！！！！

Slide 82

Slide 82 text

いかがだったでしょうか

Slide 83

Slide 83 text

「なんかよくわからないけど、面白そうだ！」

Slide 84

Slide 84 text

そう思っていただけたら幸いです🙏

Slide 85

Slide 85 text

まとめ・ GraphQL + TypeScriptは、すごく簡単に型安全なAPI連携ができる・Laravel + Lighthouseはスキーマの解決が楽。記述量が少なく済む。・GraphQLの開発は一度仕組みを整えると改修がほんとにしやすい

Slide 86

Slide 86 text

カジュアル面談やってます！ https://hrmos.co/pages/dip-net/jobs/phperkaigi-dip

Slide 87

Slide 87 text

ご清聴ありがとうございました！