GraphQL with Apollo Client

About Me Kawakami Natsumi @natsumican63 Work for Studio Arcana 2

Agenda 1. GraphQLの何がうれしいのか 2. GraphQLクライアントサイド実装 3

GraphQLだと何がうれしいのか 4

5 { "data": { "pokemon": { "name": "Pikachu", "number": "025", "weight": { "maximum": "6.75kg" }, "height": { "maximum": "0.45m" }, "classification": "Mouse Pokémon", ~~~~~~~~~~ 中略 ~~~~~~~~~~ "evolutions": [ { "name": "Raichu" } ] } } } GET /pokemon/ ピカチュウの図鑑番号と、進化先の ポケモンの図鑑番号が知りたい！ 1.リソース取得が過不足なく行えてうれしい

6 { "data": { "pokemon": { "name": "Raichu", "number": "026", "weight": { "maximum": "33.75kg" }, "height": { "maximum": "0.9m" }, "classification": "Mouse Pokémon" ~~~~~~~~~~ 中略 ~~~~~~~~~~ } } } GET /pokemon/ ピカチュウの図鑑番号と、進化先の ポケモンの図鑑番号が知りたい！ RESTでは、目的のデータを取得するのに複数回リクエストを投げる必要があったり、 不要なデータまで取得してしまうケースがある。

ピカチュウの図鑑番号と、進化先の ポケモンの図鑑番号が知りたい！ { "data": { "pokemon": { "number": "025", "evolutions": [ { "name": "Raichu", "number": "026" } ] } } } POST /graphql { pokemon(name: "pikachu") { number evolutions { name number } } } GraphQLはネストしたデータを一度かつ不要なデータを含まずに取得できるため、ラ ウンドトリップやレスポンスサイズを減縮することができる。

2.スキーマによる型安全がうれしい ● GraphQLサーバーは、定義されたスキーマに応じてレスポンスを返す ● スキーマによる型付けにより、実装から型情報を取得することができる ○ ドキュメントも自動生成される 8

GraphQLクライアントサイド実装 9

Apollo Client ● GraphQLサーバーと通信するためのクライアントサイドライブラリ ○ React,Vue,Angular,iOSなどの実装がある ○ Apollo以外だとRelayとか ● 便利機能がたくさん ○ Loading,errorなどの通信状態の管理 ○ キャッシュ機構による状態管理 ○ Optimistic UIの実装が簡単 10

11 Apollo Providerで囲ったコンポーネント下でApollo Clientを使うことができる。

graphql-code-genでTypeScript用の型を自動生成する ● GraphQLサーバーのエンドポイントからSchemaを取得 ○ 実装から取得するので乖離がおこらない ● クライアントサイドで利用するデータのクエリを書く ● 要求したデータの型定義のみが生成される ○ Nonnull,Nullableの情報も型として表現される 12

Thank you! 13