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

Presented at PHPer Kaigi 2019

Transcript

1. 15分で分かった気になる GraphQL PHPer Kaigi 2019
2. Profile Twitter: @ichikawa_0829 株式会社メルカリ Backendエンジニア
3. GraphQLとは
4. https://developer.github.com/v4/explorer/
5. RESTの問題を解決するために作られた APIの為のクエリ言語
6. RESTの問題を解決するために作られた APIの為のクエリ言語
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/
8. Overfetching Clientのあるページで user情報の - name - image_uri だけ必要
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”, ... } }
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”, ... } } 必要なのはここだけ
11. Underfetching Clientのあるページで 指定したuserの友達一覧を出したい usersのfriends全員の - name - image_uri が必要
12. Underfetching /user/1234 Response { “user” { “id”: 1234, … “friends”: [ 2345, 3456, 4567, 5678 ] } }
13. Underfetching /user/2345 Response { “user” { “id”: 2345, “name”: “ichikawa_2”, “image_uri”: “https://xxx/img/2345”, … } }
14. Underfetching /user/2345 /user/3456 /user/4567 ・ ・ ・
15. Underfetching /user/2345 /user/3456 /user/4567 ・ ・ ・ Too many round trip
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”}, ] } }
17. 似たようなエンドポイントの乱立 /user/{id} /user_for_X/{id} /user_for_Y/{id} /user_for_Z/{id} /user_for_admin/{id} …
18. GraphQLはどう課題解決するか - Appで必要なデータとResponseのデータ構造の乖離 - GraphQLではクエリとレスポンスの構造が似ているため、クエリを見ればレス ポンスの構造を推測しやすい
19. GraphQLはどう課題解決するか /graphql
20. GraphQLはどう課題解決するか Request query GetUser { user(id: “1234:) { name img friends { name img } } news { title link } } /graphql
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
22. Pros & Cons
23. GraphQLの強み - データ構造が理解しやすい - 複雑なデータが必要になってもRound Tripが抑えられる - エンドポイント管理が楽 - クライアントとサーバ間で型安全なコミュニケーションが可能 - 豊富な開発ツール類
24. GraphQLの弱み - いくつかの操作はRESTより面倒になる場合がある - ファイルアップロード - エラーハンドリング - モニタリング - Cache - パフォーマンス問題 - one-to-many、many-to-manyなデータを取得するような場合、サーバ側の 実装によってはN+1問題が発生する可能性がある
25. GraphQL Workflow
26. ３つのOperation - Query - 情報を取得するために使用される - SQLでいうSELECT - Mutation - 情報を更新するために使用される - SQLでいうINSERT,UPDATE,DELETE - Subscription - 情報の変化をリアルタイムに取得するために使用される
27. クエリ言語とスキーマ - スキーマ - GraphQL APIの仕様を定義するためのもの - どのような処理ができてどのようなレスポンスが返るかを 決める - スキーマが決まるとDocsの自動生成や、Mockの作成が 可能になる - クエリ言語 - クライアントがGraphQL APIにリクエストするための言語 - PHPからDBを操作する際のSQLのようなイメージ
28. 開発の流れ Schema Design Implements Monitoring Schema Client API Product Workflow Output
29. with Laravel & Lighthouse https://lighthouse-php.com/
30. Schema Design - レスポンスとして得たい型を定義する - 型名 - フィールド - 定義した型を得る為のオペレーションを定義する - 必要に応じてENUMやリクエストパラメータとして送信するた めの型(input型)なども定義できる
31. Schema Design - with laravel & lighthouse • routes/graphql/schema.graphqlにScheme定義を書く どのクラスがItem型を解決するか 紐付ける
32. Implements - Client - Client側で必要なデータだけを指定してクエリを作成する - クエリをAPI Serverにリクエストする処理を書く - ResponseをページViewに反映させる処理等を書く
33. Implements - Client with laravel & lighthouse - 今回は横着して時間がないのでPlaygroundで代用 - https://github.com/prisma/graphql-playground
34. Implements - API - API側は採用する言語やライブラリに寄って実装方法は様々 - GraphQL処理系の実装は難易度が高いので、基本的には何かしらライブラリ を導入することになる - PHPではwebonyx/graphql-phpや - Laravelでやりたいならnuwave/lighthouse辺りが良さそう - オペレーションや型を解決する処理をResolverと呼び、ビジネ スロジックやデータアクセス処理を行う - Resolverの集合がGraphQL APIとも言える
35. Implements - API with laravel & lighthouse - Schemaで紐付けたResolverクラスを書く
37. Monitoring - GraphQLのモニタリングはRESTの方式をそのまま使えない - エラートラッキング - これまで400系や500系を返していたエラーが発生しても200を返す - そういったエラーをそれぞれどう扱うかを決めて、エラー発生のイベントをトラッ キング - パフォーマンス - 単一エンドポイントのためクエリ単位で計測する - クエリ単位だけではなくResolver単位のパフォーマンス測定も必要
38. Conclusion
39. GraphQLとは - REST APIの問題を解決する為に開発されたクエリ言語 - 仕様は大きく分けてクエリとスキーマで構成される - ３種類のオペレーションがある - Query - Mutation - Subscription - 型付けされるため、クライアントとAPI間で型安全なやり取りが 可能になる - RESTを選択する方が適切なケースもある
40. Subscription Directive Architecture SchemaStitching PHPでどう始めるのか Cache Monitoring Authorization Custom Scalar 今日話せなかったこと 様々な開発Tool
41. Thank You! Enjoy GraphQL!