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

何がしたいのか

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 行目から.

루트 -> 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
}

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

PlannetsConnection -> 플래닛

type PlanetsConnection {
  totalCount: Int
  planets: [Planet]
}

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

なので今回は planets をEndpointintとして叩く.

행성

単體の Planet の定義もみてみる.

type Planet implements Node {
  """The name of this planet."""
  name: String
  gravity: String
  created: String
  id: 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,
        }
      }
    }

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

스킵은 0 で最初のひとつめから、
한계 は 3 에서 3 つだけ

JS の関数の戻り値와 似た感じで、
返す値は 결과 で定義するようだ.

呼び出す順番は自由.

{
  "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"
        }
      ]
    }
  }
}

結果は 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

플래닛 には Film とむすびつける
filmConnection 라고 하는 카람もある.

これは PlanetFilmsConnection を使ってい라고

type PlanetFilmsConnection {
  pageInfo: PageInfo!
  totalCount: Int
  films: [Film]

このようになっている.

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

type Film implements Node {
  title: String
  director: String
  releaseDate: String  
}

필름에
제목, 감독, 개봉일,

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

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

planets にrichest項目を追加する.

          "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"
              },

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

まとめ

GraphQL てっとり早く試すには

Back4App 의 Starwars API 의
Planets 와 Films 의 데이터가 있습니다.

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

Root 에서 allPlanets 으로 PlanetsConnection
が結びついている.

なので allPanets 그렇다고 하는 우엔드포인트が発生すると推測する

type PlanetsConnection {
  totalCount: Int
  planets: [Planet]
}

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

type Planet implements Node {
  name: String
  id: ID!
}

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

query allPlanets {
      planets (skip: 0, limit: 3) {
        results {
          id,
          name,

この形でリクESTする.results の中にカラムを書く.

  filmConnection(after: String, first: Int, before: String, last: Int): PlanetFilmsConnection

플래닛 の中にさら에 영화연결 그렇다고 하는
플래닛과 필름즈 を結びつけるカラムがあり
PlanetFilmConnection を呼び出している

type PlanetFilmsConnection {
  pageInfo: PageInfo!
  totalCount: Int
  films: [Film]

PlanetFilmsConnection 에는 필름 으로
영화 たちの配列が入っている.

これをrichestusるには,

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

このように、결과 の 영화 の更に 결과 として
영화 のカラムを書いてリクエストする.

以上.