GraphQL with Apollo Client

GraphQL with Apollo Client

6ad9e968fe11752d29bdd441f61c1e48?s=128

Kawakami Natsumi

October 25, 2019
Tweet

Transcript

  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