GraphQL with Apollo Client

Transcript

1. GraphQL with Apollo Client
   

   View Slide

2. About Me
   Kawakami Natsumi @natsumican63
   Work for Studio Arcana
   2
   

   View Slide

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

   View Slide

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

   View Slide

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/
   ピカチュウの図鑑番号と、進化先の
   ポケモンの図鑑番号が知りたい！
   1.リソース取得が過不足なく行えてうれしい
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. Thank you!
    13
    

    View Slide