Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

s-ichikawa
March 29, 2019
2.6k

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

Presented at PHPer Kaigi 2019

s-ichikawa

March 29, 2019
Tweet

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. 3つの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の問題を解決する為に開発されたクエリ言語
    - 仕様は大きく分けてクエリとスキーマで構成される
    - 3種類のオペレーションがある
    - 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