Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL with Apollo Client

GraphQL with Apollo Client

Kawakami Natsumi

October 25, 2019
Tweet

More Decks by Kawakami Natsumi

Other Decks in Programming

Transcript

  1. 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.リソース取得が過不足なく行えてうれしい
  2. 6 { "data": { "pokemon": { "name": "Raichu", "number": "026",

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

    [ { "name": "Raichu", "number": "026" } ] } } } POST /graphql { pokemon(name: "pikachu") { number evolutions { name number } } } GraphQLはネストしたデータを一度かつ不要なデータを含まずに取得できるため、ラ ウンドトリップやレスポンスサイズを減縮することができる。