GraphQL with Apollo Client

1. GraphQL with Apollo Client
2. About Me Kawakami Natsumi @natsumican63 Work for Studio Arcana 2
3. Agenda 1. GraphQLの何がうれしいのか 2. GraphQLクライアントサイド実装 3
4. GraphQLだと何がうれしいのか 4
5. 5 { "data": { "pokemon": { "name": "Pikachu", "number": "025", "weight": { "maximum": "6.75kg" }, "height": { "maximum": "0.45m" }, "classification": "Mouse Pokémon", ~~~~~~~~~~ 中略 ~~~~~~~~~~ "evolutions": [ { "name": "Raichu" } ] } } } GET /pokemon/<pikachu> ピカチュウの図鑑番号と、進化先の ポケモンの図鑑番号が知りたい！ 1.リソース取得が過不足なく行えてうれしい
6. 6 { "data": { "pokemon": { "name": "Raichu", "number": "026", "weight": { "maximum": "33.75kg" }, "height": { "maximum": "0.9m" }, "classification": "Mouse Pokémon" ~~~~~~~~~~ 中略 ~~~~~~~~~~ } } } GET /pokemon/<raichu> ピカチュウの図鑑番号と、進化先の ポケモンの図鑑番号が知りたい！ RESTでは、目的のデータを取得するのに複数回リクエストを投げる必要があったり、 不要なデータまで取得してしまうケースがある。
7. ピカチュウの図鑑番号と、進化先の ポケモンの図鑑番号が知りたい！ { "data": { "pokemon": { "number": "025", "evolutions": [ { "name": "Raichu", "number": "026" } ] } } } POST /graphql { pokemon(name: "pikachu") { number evolutions { name number } } } GraphQLはネストしたデータを一度かつ不要なデータを含まずに取得できるため、ラ ウンドトリップやレスポンスサイズを減縮することができる。
8. 2.スキーマによる型安全がうれしい • GraphQLサーバーは、定義されたスキーマに応じてレスポンスを返す • スキーマによる型付けにより、実装から型情報を取得することができる ◦ ドキュメントも自動生成される 8
9. GraphQLクライアントサイド実装 9
10. Apollo Client • GraphQLサーバーと通信するためのクライアントサイドライブラリ ◦ React,Vue,Angular,iOSなどの実装がある ◦ Apollo以外だとRelayとか • 便利機能がたくさん ◦ Loading,errorなどの通信状態の管理 ◦ キャッシュ機構による状態管理 ◦ Optimistic UIの実装が簡単 10
11. 11 Apollo Providerで囲ったコンポーネント下でApollo Clientを使うことができる。
12. graphql-code-genでTypeScript用の型を自動生成する • GraphQLサーバーのエンドポイントからSchemaを取得 ◦ 実装から取得するので乖離がおこらない • クライアントサイドで利用するデータのクエリを書く • 要求したデータの型定義のみが生成される ◦ Nonnull,Nullableの情報も型として表現される 12
13. Thank you! 13