DEV Community

kaede
kaede

Posted on

GraphQL で StarWars API の planets にネストされた films をとってくる

#graphql #swapi

何がしたいのか

Star Wars API を使って

GraphQL で複数のテーブルが関連したデータを取ってくる練習がしたかった。

appPlanets というエンドポイント？を叩いた。

https://www.back4app.com/database/davimacedo/swapi-star-wars-api/graphql-playground/all-planets

Chrome でアクセスするだけで実行できる
Back4App というところを使った。

https://github.com/graphql/swapi-graphql/blob/7c02fdf5244d8ca66005b9707f634b94364f31c1/schema.graphql#L483

定義はこの公式のスキーマの 483 行目から。

Root -> allPlanets 

type Root { allFilms(after: String, first: Int, before: String, last: Int): FilmsConnection film(id: ID, filmID: ID): Film allPlanets(after: String, first: Int, before: String, last: Int): PlanetsConnection planet(id: ID, planetID: ID): Planet node( """The ID of an object""" id: ID! ): Node }
Enter fullscreen mode Exit fullscreen mode

Root に AllPlanets が結び付けられている。
そしてそれが PlanetsConnection で Planet を参照しているようだ。

PlannetsConnection -> Planet 

type PlanetsConnection { totalCount: Int planets: [Planet] }
Enter fullscreen mode Exit fullscreen mode

PlannetsConnection の定義のコードを見ると
planets として Planet の配列が参照されている。

なので今回は planets をエンドポイントとして叩く。

Planet

単体の Planet の定義もみてみる。

type Planet implements Node { """The name of this planet.""" name: String gravity: String created: String id: ID! }
Enter fullscreen mode Exit fullscreen mode
  • name
  • gravity
  • created
  • id

これらの順番で中身が並べられている。

Back4App で planets の GET を実行する

https://www.back4app.com/database/davimacedo/swapi-star-wars-api/graphql-playground/all-planets

Back4App なら Star Wars API の
リポジトリを clone して npm start しなくても
URL を開くだけで実行できる。

query allPlanets { planets (skip: 0, limit: 3) { results { id, name, gravity, createdAt, } } }
Enter fullscreen mode Exit fullscreen mode

allPlanets という名前(ここは自由)で定義して
planets を叩く。

skip は 0 で最初のひとつめから、
limit は 3 で 3 つだけ

JS の関数の戻り値と似た感じで、
返す値は results で定義するようだ。

呼び出す順番は自由。

{ "data": { "planets": { "results": [ { "id": "JNgiSeuJwR", "name": "Yavin IV", "gravity": "1 standard", "createdAt": "2019-12-13T19:42:31.014Z" }, { "id": "lZHyO0MIr6", "name": "Dagobah", "gravity": null, "createdAt": "2019-12-13T19:42:31.017Z" }, { "id": "PL36fSGLoW", "name": "Tatooine", "gravity": "1 standard", "createdAt": "2019-12-13T19:42:30.901Z" } ] } } }
Enter fullscreen mode Exit fullscreen mode

結果は json で返ってくる。
data/tableName/results に入っている。

skip を 1 にすると
最初の Yavin IV が skip されて
Alderaan が 3 つめに食い込んでくる。

filmConnection で Planet に結びつく Film も GET する 

 filmConnection(after: String, first: Int, before: String, last: Int): PlanetFilmsConnection
Enter fullscreen mode Exit fullscreen mode

Planet には Film とむすびつける
filmConnection というカラムもある。

これは PlanetFilmsConnection を使っていて

type PlanetFilmsConnection { pageInfo: PageInfo! totalCount: Int films: [Film]
Enter fullscreen mode Exit fullscreen mode

このようになっている。

なので、films を追加すれば
惑星に関連するフィルムたちも取れるだろう。

type Film implements Node { title: String director: String releaseDate: String }
Enter fullscreen mode Exit fullscreen mode

Film には
title, director, releaseDate,

これらの項目があったのでそれらをいれて

query allPlanets { planets (skip: 0, limit: 3) { results { id, name, gravity, createdAt, films { results { title, director, releaseDate } } } } }
Enter fullscreen mode Exit fullscreen mode

planets にリクエスト項目を追加する。

 "createdAt": "2019-12-13T19:42:30.901Z", "films": { "results": [ { "title": "A New Hope", "director": "George Lucas", "releaseDate": "1977-05-25T00:00:00.000Z" }, { "title": "Attack of the Clones", "director": "George Lucas", "releaseDate": "2002-05-16T00:00:00.000Z" },
Enter fullscreen mode Exit fullscreen mode

すると、films の項目で
惑星データに関連する映画のタイトル、監督、公開日、これらが取れた。

まとめ

GraphQL をてっとり早く試すには

Back4App の Starwars API の
Planets と Films のデータが便利。

type Root { allPlanets(after: String, first: Int, before: String, last: Int): PlanetsConnection }
Enter fullscreen mode Exit fullscreen mode

Root で allPlanets として PlanetsConnection
が結びついている。

なので allPanets というエンドポイントが発生すると推測する。

type PlanetsConnection { totalCount: Int planets: [Planet] }
Enter fullscreen mode Exit fullscreen mode

PlanetsConnection が planets として
Planet たちの配列を取っている。

type Planet implements Node { name: String id: ID! }
Enter fullscreen mode Exit fullscreen mode

そして Planet の内部に id や name などのカラムが入っている。

query allPlanets { planets (skip: 0, limit: 3) { results { id, name,
Enter fullscreen mode Exit fullscreen mode

この形でリクエストする。results の中にカラムを書く。

 filmConnection(after: String, first: Int, before: String, last: Int): PlanetFilmsConnection
Enter fullscreen mode Exit fullscreen mode

Planet の中にさらに filmConnection という
Planet と Films を結びつけるカラムがあり
PlanetFilmConnection を呼び出している

type PlanetFilmsConnection { pageInfo: PageInfo! totalCount: Int films: [Film]
Enter fullscreen mode Exit fullscreen mode

PlanetFilmsConnection には films として
Film たちの配列が入っている。

これをリクエストするには、

query allPlanets { planets (skip: 0, limit: 3) { results { id, name films { results { title, director, releaseDate }
Enter fullscreen mode Exit fullscreen mode

このように、results の films の更に results として
Film のカラムを書いてリクエストする。

以上。

Top comments (0)