15分で分かった気になるGraphQL

Presented at PHPer Kaigi 2019

Transcript

1. 15分で分かった気になる
   GraphQL
   PHPer Kaigi 2019
   

   View Slide

2. Profile
   Twitter: @ichikawa_0829
   株式会社メルカリ Backendエンジニア
   
   

   View Slide

3. GraphQLとは
   

   View Slide

4. https://developer.github.com/v4/explorer/
   

   View Slide

5. RESTの問題を解決するために作られた
   APIの為のクエリ言語
   

   View Slide

6. RESTの問題を解決するために作られた
   APIの為のクエリ言語
   

   View Slide

7. Appで必要なデータとResponseのデータ構造の乖離
   “We were frustrated with the differences between
   the data we wanted to use in our apps and the server
   queries they required.”
   9/14/2015 by Lee Byron
   https://graphql.org/blog/graphql-a-query-language/
   

   View Slide

8. Overfetching
   Clientのあるページで
   user情報の
   - name
   - image_uri
   だけ必要
   

   View Slide

9. Overfetching
   /user/1234
   Response
   {
   “user” {
   “id”: 1234,
   “name”: “s-ichikawa”,
   “image_uri”: “https://xxx/img/1234”,
   “address”: “東京都A区XYZ”,
   “birthday”: “1986/08/29”,
   “gender”: “male”,
   ...
   }
   }
   

   View Slide

10. Overfetching
    /user/1234
    Response
    {
    “user” {
    “id”: 1234,
    “name”: “s-ichikawa”,
    “image_uri”: “https://xxx/img/1234”,
    “address”: “東京都A区XYZ”,
    “birthday”: “1986/08/29”,
    “gender”: “male”,
    ...
    }
    }
    必要なのはここだけ
    

    View Slide

11. Underfetching
    Clientのあるページで
    指定したuserの友達一覧を出したい
    usersのfriends全員の
    - name
    - image_uri
    が必要
    

    View Slide

12. Underfetching
    /user/1234
    Response
    {
    “user” {
    “id”: 1234,
    …
    “friends”: [
    2345,
    3456,
    4567,
    5678
    ]
    }
    }
    

    View Slide

13. Underfetching
    /user/2345
    Response
    {
    “user” {
    “id”: 2345,
    “name”: “ichikawa_2”,
    “image_uri”: “https://xxx/img/2345”,
    …
    }
    }
    

    View Slide

14. Underfetching
    /user/2345
    /user/3456
    /user/4567
    ・
    ・
    ・
    

    View Slide

15. Underfetching
    /user/2345
    /user/3456
    /user/4567
    ・
    ・
    ・
    Too many round trip
    

    View Slide

16. Underfetching
    /user_for_X/1234
    Response
    {
    “user” {
    “id”: 1234,
    …
    “friends”: [
    {“id”:2345, “name”:”bさん”,
    “image_uri”: “https://xxx/img/2345”},
    {“id”:3456, “name”:”cさん”,
    “image_uri”: “https://xxx/img/3456”},
    ]
    }
    }
    

    View Slide

17. 似たようなエンドポイントの乱立
    /user/{id}
    /user_for_X/{id}
    /user_for_Y/{id}
    /user_for_Z/{id}
    /user_for_admin/{id}
    …
    

    View Slide

18. GraphQLはどう課題解決するか
    - Appで必要なデータとResponseのデータ構造の乖離
    - GraphQLではクエリとレスポンスの構造が似ているため、クエリを見ればレス
    ポンスの構造を推測しやすい
    

    View Slide

19. GraphQLはどう課題解決するか
    /graphql
    

    View Slide

20. GraphQLはどう課題解決するか
    Request
    query GetUser {
    user(id: “1234:) {
    name
    img
    friends {
    name
    img
    }
    }
    news {
    title
    link
    }
    }
    /graphql
    

    View Slide

21. GraphQLはどう課題解決するか
    Response
    {“data”: {
    “user”: {
    “name”: “aさん”,
    “img”: “https://xxx/img/2345”,
    “friends”: [
    {
    “name”:”bさん”,
    “img”: “https://xxx/img/2345”
    }
    ]
    },
    “news”: {
    “title”: “awesome GraphQL”,
    “link”: “https://xxx/news/1”
    }
    }}
    /graphql
    

    View Slide

22. Pros & Cons
    

    View Slide

23. GraphQLの強み
    - データ構造が理解しやすい
    - 複雑なデータが必要になってもRound Tripが抑えられる
    - エンドポイント管理が楽
    - クライアントとサーバ間で型安全なコミュニケーションが可能
    - 豊富な開発ツール類
    

    View Slide

24. GraphQLの弱み
    - いくつかの操作はRESTより面倒になる場合がある
    - ファイルアップロード
    - エラーハンドリング
    - モニタリング
    - Cache
    - パフォーマンス問題
    - one-to-many、many-to-manyなデータを取得するような場合、サーバ側の
    実装によってはN+1問題が発生する可能性がある
    

    View Slide

25. GraphQL
    Workflow
    

    View Slide

26. ３つのOperation
    - Query
    - 情報を取得するために使用される
    - SQLでいうSELECT
    - Mutation
    - 情報を更新するために使用される
    - SQLでいうINSERT,UPDATE,DELETE
    - Subscription
    - 情報の変化をリアルタイムに取得するために使用される
    

    View Slide

27. クエリ言語とスキーマ
    - スキーマ
    - GraphQL APIの仕様を定義するためのもの
    - どのような処理ができてどのようなレスポンスが返るかを
    決める
    - スキーマが決まるとDocsの自動生成や、Mockの作成が
    可能になる
    - クエリ言語
    - クライアントがGraphQL APIにリクエストするための言語
    - PHPからDBを操作する際のSQLのようなイメージ
    

    View Slide

28. 開発の流れ
    Schema Design
    Implements
    Monitoring
    Schema
    Client API
    Product
    Workflow Output
    

    View Slide

29. with Laravel & Lighthouse
    https://lighthouse-php.com/
    

    View Slide

30. Schema Design
    - レスポンスとして得たい型を定義する
    - 型名
    - フィールド
    - 定義した型を得る為のオペレーションを定義する
    - 必要に応じてENUMやリクエストパラメータとして送信するた
    めの型(input型)なども定義できる
    

    View Slide

31. Schema Design - with laravel & lighthouse
    ● routes/graphql/schema.graphqlにScheme定義を書く
    どのクラスがItem型を解決するか
    紐付ける
    

    View Slide

32. Implements - Client
    - Client側で必要なデータだけを指定してクエリを作成する
    - クエリをAPI Serverにリクエストする処理を書く
    - ResponseをページViewに反映させる処理等を書く
    

    View Slide

33. Implements - Client with laravel & lighthouse
    - 今回は横着して時間がないのでPlaygroundで代用
    - https://github.com/prisma/graphql-playground
    

    View Slide

34. Implements - API
    - API側は採用する言語やライブラリに寄って実装方法は様々
    - GraphQL処理系の実装は難易度が高いので、基本的には何かしらライブラリ
    を導入することになる
    - PHPではwebonyx/graphql-phpや
    - Laravelでやりたいならnuwave/lighthouse辺りが良さそう
    - オペレーションや型を解決する処理をResolverと呼び、ビジネ
    スロジックやデータアクセス処理を行う
    - Resolverの集合がGraphQL APIとも言える
    

    View Slide

35. Implements - API with laravel & lighthouse
    - Schemaで紐付けたResolverクラスを書く
    

    View Slide

36. View Slide

37. Monitoring
    - GraphQLのモニタリングはRESTの方式をそのまま使えない
    - エラートラッキング
    - これまで400系や500系を返していたエラーが発生しても200を返す
    - そういったエラーをそれぞれどう扱うかを決めて、エラー発生のイベントをトラッ
    キング
    - パフォーマンス
    - 単一エンドポイントのためクエリ単位で計測する
    - クエリ単位だけではなくResolver単位のパフォーマンス測定も必要
    

    View Slide

38. Conclusion
    

    View Slide

39. GraphQLとは
    - REST APIの問題を解決する為に開発されたクエリ言語
    - 仕様は大きく分けてクエリとスキーマで構成される
    - ３種類のオペレーションがある
    - Query
    - Mutation
    - Subscription
    - 型付けされるため、クライアントとAPI間で型安全なやり取りが
    可能になる
    - RESTを選択する方が適切なケースもある
    

    View Slide

40. Subscription
    Directive
    Architecture
    SchemaStitching
    PHPでどう始めるのか
    Cache
    Monitoring
    Authorization
    Custom Scalar
    今日話せなかったこと
    様々な開発Tool
    

    View Slide

41. Thank You!
    Enjoy GraphQL!
    

    View Slide