Laravel + Lighthouseで始める低コストなGraphQL入門

by akkino/D-En

Slide 1

Slide 1 text

Laravel + Lighthouseで始める低コストな GraphQL入門

Slide 2

Slide 2 text

Introduction 2

Slide 3

Slide 3 text

コメントお待ちしてます！ Twitter ▹ #phpcon2020 ▹ #phpcon ▹ #track4 Discord ▹ track4--4-b-laravel-lighthouse 3

Slide 4

Slide 4 text

Introduction GraphQLの知識はどれぐらいありますか？ ▹ 名前は知ってる ▹ そこそこ知ってる ▹ 実装したことある 4

Slide 5

Slide 5 text

Introduction 今回の仕様だとGraphQL良さそうじゃない？とか… 詳しくは知らんけどGraphQL良いらしいからそれで作ってよとか… 5

Slide 6

Slide 6 text

Introduction でも自分、RESTしか触ったことないし… そもそもGraphQLってなに…？ 6

Slide 7

Slide 7 text

Introduction （できれば使い慣れた言語で）開発できる方法を知っておきたい 7

Slide 8

Slide 8 text

Introduction そんなあなたのために 8 × Lighthouse

Slide 9

Slide 9 text

Lighthouse ▹ Laravelのライブラリ ▹ GraphQLを導入可能 9

Slide 10

Slide 10 text

Introduction 特徴めっちゃ簡単 10

Slide 11

Slide 11 text

このセッションの対象聴者 11

Slide 12

Slide 12 text

対象聴者 ▹ チュートリアルやってみた！ ▹ 簡単なCRUDできた！リレーションもできた！ ▹ めっちゃ便利！！ 12 でも実際に開発するにはどうすればいいの…？と悩んでいる方

Slide 13

Slide 13 text

“ このセッションで得られるもの 13

Slide 14

Slide 14 text

Outcome in Session PHPerが自信を持って GraphQLを選ぶために必要な判断材料 14

Slide 15

Slide 15 text

Step 0. Today’s Contents

Slide 16

Slide 16 text

Today’s contents ▹ GraphQLの概要（3分） ▹ Lighthouseの特徴（5分） ▹ Sample code（3分） ▹ 実戦での実装方法（7分） 16

Slide 17

Slide 17 text

今日触れないこと NOT today’s contents GraphQLの詳細な説明 Lighthouseのチュートリアル Subscriptionに関して 17

Slide 18

Slide 18 text

注意本資料は2020/12/12時点での内容です ▹ Lighthouse v4.18.0 ▹ 近々v5.0.0がくる（v5.0-beta-1） 18

Slide 19

Slide 19 text

Step 1. What is GraphQL?

Slide 20

Slide 20 text

GraphQLとは？ ▹ クライアント/サーバー通信のための言語仕様￭インターネットのための問い合わせ言語￭ Facebookが2015年に開発 ▹ 取得過剰や取得不足などのRESTの問題を解決 20

Slide 21

Slide 21 text

RESTの主な問題点取得過剰必要のないデータまで取得してしまう取得不足リレーション先のデータを取得しようとすると複数リクエストが必要 21

Slide 22

Slide 22 text

“ GraphQLを選ぶ際の注意点 22

Slide 23

Slide 23 text

GraphQLは RESTの代わりになるわけではない GraphQLを選ぶ際の注意点 23

Slide 24

Slide 24 text

GraphQLとREST GraphQLとRESTの使い分けが大事 RESTが適合しない状況に対応するために作られたのがGraphQL ▹ 一対多, 多対多の関係が多い ▹ データの依存関係のネストが深い ▹ 公開API or エンドポイントが多い 24

Slide 25

Slide 25 text

GraphQLとREST GraphQLとRESTの使い分けが大事 RESTが適合しない状況に対応するために作られたのがGraphQL ▹ 一対多, 多対多の関係が多い ▹ データの依存関係のネストが深い ▹ 公開API or エンドポイントが多い 25 マッチしないならRESTを使った方が良い ※ ※諸説あり。

Slide 26

Slide 26 text

取得過剰や取得不足を解決 RESTとは上手く使い分ける 26 Step 1. Summery GraphQLの概要

Slide 27

Slide 27 text

Step 2. Features of Lighthouse

Slide 28

Slide 28 text

Lighthouseの特徴 SDL First Laravel Friendly Optimized for Eloquent 28

Slide 29

Slide 29 text

Features of Lighthouse 29 SDL First

Slide 30

Slide 30 text

SDL First ▹ SDL = Schema Deﬁnition Language ￭ → スキーマ定義言語￭拡張子: .graphql ▹ Directiveで簡単に実装￭スキーマに追記することで様々な機能が追加可能￭コードすら書かなくていい場合もある 30

Slide 31

Slide 31 text

31 SDL オブジェクトを定義 QueryやMutationでオブジェクトに対するふるまいを定義 Query：Read Mutation：Create, Update, Delete Subscription：WebSocket

Slide 32

Slide 32 text

32 Directive リレーションを定義ペジネーションを追加バリデーション定義 create機能を実装認証機能を実装

Slide 33

Slide 33 text

Features of Lighthouse 33 SDL First Laravel Friendly

Slide 34

Slide 34 text

Laravel Friendly Laravelの機能がだいたい全部使える ▹ GraphQLはエンドポイントが単一（ POST /graphql） ▹ RouteとControllerはSDLが受け持つ 34

Slide 35

Slide 35 text

35 Route REST Global Middleware Middleware schema Resolver Model /graphql /others Lighthouse @method

Slide 36

Slide 36 text

36 Route REST Global Middleware Middleware schema Resolver Model /graphql /others Lighthouse Directive ・CRUD ・Validation ・Authentication ...etc @method

Slide 37

Slide 37 text

37 Route REST Global Middleware Middleware schema Resolver Model /graphql /others Lighthouse Directive ・CRUD ・Validation ・Authentication ...etc @method 実質RouteとControllerの役割全体構造はMVCと大差ない

Slide 38

Slide 38 text

Features of Lighthouse 38 SDL First Optimized for Eloquent Laravel Friendly

Slide 39

Slide 39 text

Optimized for Eloquent 既存のEloquentモデルをそのまま使える ▹ リレーション定義 ▹ 独自のメソッドを追加 39

Slide 40

Slide 40 text

40 Optimized for Eloquent リレーション定義 ▹ 自動で紐づけてくれる

Slide 41

Slide 41 text

41 Optimized for Eloquent 独自メソッドの追加 ▹ Modelに定義するだけで呼び出せる ▹ 自由に引数を渡すことも可能

Slide 42

Slide 42 text

SDL First GraphQLのスキーマファースト Optimized for Eloquent 既存のEloquentモデルを活用し、最適化されたデータベースクエリをすぐに作成可能 Laravel Friendly Laravelの上にGraphQLサーバーを構築するため、使い慣れた概念や機能を利用可能 42 Step 2. Summery Lighthouseの特徴

Slide 43

Slide 43 text

Step 3. Sample code

Slide 44

Slide 44 text

Schema ▹ Object：データ定義 ▹ Query：読み取り ▹ Mutation：更新 ▹ Subscription：リアルタイム通信 44

Slide 45

Slide 45 text

Object 45 Object定義 Modelと一対一 ▹ クライアントが参照するデータ構造 ▹ Modelと一対一

Slide 46

Slide 46 text

Query 読み込み系 ▹ users: 複数取得 ▹ user: 単体取得 46 users list取得（ペジネーション付き） user get取得（ID指定可能）

Slide 47

Slide 47 text

Mutation 書き込み系 ▹ Create ▹ Update ▹ Delete 47

Slide 48

Slide 48 text

48 Create create Directiveを追加 Mutation: 書き込み系処理引数を設定

Slide 49

Slide 49 text

49 Create mutationのくくりに入れてリクエスト作成されたデータがレスポンス

Slide 50

Slide 50 text

Schema CRUDできた！ 50

Slide 51

Slide 51 text

Schema Lighthouse 完全に理解した 51

Slide 52

Slide 52 text

52 schema.graphqlしか書いてない…？

Slide 53

Slide 53 text

ビジネスロジックどうすればいいの？

Slide 54

Slide 54 text

Step 4. Implementation Method

Slide 55

Slide 55 text

実戦での実装方法 ▹ ロジックはResolverかMethod ▹ レスポンスは必ずModel ▹ できる限りDirectiveを使う 55

Slide 56

Slide 56 text

Resolver and Method ▹ Resolver ￭独自のクエリを定義 ▹ Method ￭独自のカラムを追加 56

Slide 57

Slide 57 text

の前に全体像の把握 57

Slide 58

Slide 58 text

58 Route REST Global Middleware Middleware schema Resolver Model /graphql /others Lighthouse Directive ・CRUD ・Validation ・Authentication ...etc @method

Slide 59

Slide 59 text

59 Route REST Global Middleware Middleware schema Resolver Model /graphql /others Lighthouse Directive ・CRUD ・Validation ・Authentication ...etc @method ビジネスロジックの置き場所

Slide 60

Slide 60 text

Resolver Use case ▹ そのクエリ自体に対するロジック ▹ 複数のカラム・データが影響しあう処理 60

Slide 61

Slide 61 text

61 Resolver クエリの引数からIDを取得 Queryを作成 @fieldでResolverのメソッドを指定よしなに処理して、 Modelを返す

Slide 62

Slide 62 text

Method 62 Use case ▹ テーブルに存在しないカラムを追加￭そのカラム内だけで処理が完結するもの ▹ 取得したオブジェクトや独自の引数を指定可能

Slide 63

Slide 63 text

63 Method カラムを追加参照するUserモデル内のメソッドを指定引数はルートオブジェクトを指定可能引数も指定可能

Slide 64

Slide 64 text

レスポンスは必ずModel 64 ▹ モデル名を参照してモデルとオブジェクトを紐づけている ▹ 配列や無名クラスでも返せるが困ることがたくさん￭ GraphQLのInterface型やUnion型￭リレーションの自動参照

Slide 65

Slide 65 text

できる限りDirectiveを使う ▹ なんでも揃ってる便利ツール￭実装コストを減らす ▹ 既存のDirectiveで解決できない問題をResolver やmethodで実装する￭シンプルで保守性が高くなる 65

Slide 66

Slide 66 text

できる限りDirectiveを使う Directiveも馴染みのあるものばかり ▹ @all, @ﬁnd ▹ @create, @update, @upsert, @delete ▹ @where, @whereBetween ▹ @hasMany, @belongsToMany ▹ @ordarBy ▹ @with ...and more 66

Slide 67

Slide 67 text

Directiveの欠点数が多い！ ▹ 60個以上 ▹ ただしメインで使うのは10個弱 67 最低限だけ覚えればOK

Slide 68

Slide 68 text

Resolver and Method ビジネスロジックを実装 Use Directive できる限りDirectiveを使って実装コストを削減 Model Base Modelでデータをやりとり 68 Step 4. Summery Implementation method

Slide 69

Slide 69 text

“ Summarize GraphQLの概要 Lighthouseの特徴実戦での実装方法 69

Slide 70

Slide 70 text

開発できる！ 70 必要な情報が集まった ↓

Slide 71

Slide 71 text

最後に今回触れなかったこと ▹ GraphQLの設計 ▹ Validate, Error Handling, Test 71

Slide 72

Slide 72 text

GraphQLの重要度設計 72 実装 7：3 Lighthouse 実装を楽にして設計に時間をかけられるようにする

Slide 73

Slide 73 text

GraphQLの設計設計は設計で勉強する必要がある（データベース設計を思い浮かべてもらえれば）おすすめ書籍初めてのGraphQL --Webサービスを作って学ぶ新世代API 73 参照：https://www.oreilly.co.jp/books/9784873118932/

Slide 74

Slide 74 text

最後に Lighthouseで GraphQLをはじめよう！ 74

Slide 75

Slide 75 text

THANKS! 良きGraphQL開発を！ Yumemi.inc Daisuke Endo | あきの/D-En 　 @DddEndow

Slide 76

Slide 76 text

おまけ 76

Slide 77

Slide 77 text

77 GraphQL Client ▹ 初めてGraphQL触る人におすすめ￭ Altair GraphQL Client ▹ 使い慣れたツールで￭ Insomnia REST Client ￭ POSTMAN ▹ あまりおすすめはしない￭ GraphQL Playground

Slide 78

Slide 78 text

Interface & Union 78 Interface 元の型を継承 Union 複数の型を統括返り値に指定可能

Slide 79

Slide 79 text

Step n. Design pattern

Slide 80

Slide 80 text

How to start GraphQL? 実装するために必要なものは揃った ▹ GraphQLの概要 ▹ Lighthouseの特徴・知識 ▹ 実戦で使うための設計パターン 80

Slide 81

Slide 81 text

GraphQLの重要度設計 81 実装 7：3

Slide 82

Slide 82 text

GraphQLの重要度設計 82 実装 7：3

Slide 83

Slide 83 text

GraphQLの設計 83 1. オブジェクトデータ構造の定義 2. クエリークライアントが実行する操作

Slide 84

Slide 84 text

Object & Query 84 User Post Comment Object Relation Query (Mutation) posts user comments post user comments request client

Slide 85

Slide 85 text

Object & Query 85 User Post Comment Object Relation Query (Mutation) posts user comments post user comments request client RDSと考え方は一緒クライアント向けのDB設計

Slide 86

Slide 86 text

Object設計のポイント 86 ▹ クライアントへリソースをどう見せるか（許可するか）を意識する ▹ 正規化は大事 ▹ 必ずしもサーバー側のテーブルと同じ構造である必要はない（でもできる限り揃えた方が楽）

Slide 87

Slide 87 text

Object設計のアンチパターン 87 レスポンス毎にオブジェクトを作る ▹ 正規化できてない ▹ 同じテーブルに対して複数のオブジェクトが参照するため、複雑になる

Slide 88

Slide 88 text

Query設計のポイント 88 ▹ Objectに対してどんなデータアクセスを許可するかで考える￭使い方はクライアント次第 ▹ SQLと同じように考えて問題ない￭ CRUD

Slide 89

Slide 89 text

Query設計のアンチパターン 89 クライアントのページ毎にクエリを作ってしまう ▹ 同じデータは同じ場所、同じクエリからのみ取得する ▹ 一つのデータに対して複数のクエリからアクセスできてはいけない

Slide 90

Slide 90 text

90 Design pattern User Post Comment client どんなjoinを許可するかどんなクエリを許可するかクライアントに対してどんなJoin、どんなクエリを許可するか ▹ 同じデータは同じところから取得する（正規化） ▹ どんなクエリを叩くかはクライアント次第 Query 90

Slide 91

Slide 91 text

91 Design pattern User Post Comment client どんなjoinを許可するかどんなクエリを許可するかクライアントに対してどんなJoin、どんなクエリを許可するか ▹ 同じデータは同じところから取得する（正規化） ▹ どんなクエリを叩くかはクライアント次第 Query 91 クライアント向けのRDB設計インターフェースがAPIなだけ

Slide 92

Slide 92 text

Q＆A

Slide 93

Slide 93 text

Q1. Q. subscription(websocket)はどうなの？ A. PusherやWebsocketサーバー立てればできるけどけど、インフラのことを考えるとかなり面倒。リアルタイム通信を主軸にするならnode.jsやgo、 AWS Appsyncの方がいいと思います。 93

Slide 94

Slide 94 text

Q2. Q. 本番環境のスキーマ定義が更新されない。 A. schema.graphqlは自動でキャッシュされる。 devならLIGHTHOUSE_CACHE_ENABLEをfalse に、本番では更新したらキャッシュを削除して再生成すること。 94

Slide 95

Slide 95 text

Q3. Q. @middlewareについて注意点ある？ A. V5.0で廃止されることになった。認証は@authや@guardに、その他はカスタムディレクティブを作成して定義 95

Slide 96

Slide 96 text

Q4. Q. うまくエラーハンドリングできないんだけど。 A. 専用のエラーハンドラーやExceptionの定義方法があるのでそれを使用してください。また基本的にエラーでもHTTP Statusは200で返るので注意が必要です。（apolloクライアントなど使っていれば自動でやってくれそうな気もするけど） 96