GraphQL 入門

はじめに

今回は、GraphQLの基本的な操作について、簡単にGraphQLを実行できる、GraphQL Playgroundを使って学んでいきたいと思います。使用するendpointはSnowtoothと呼ばれる「スノートゥース山」という架空のゲレンデのリフト情報とトレイル情報を管理しているものを使います。

実装

query

queryはデータベースの読み込みを担当していて、queryに自分が欲しいデータを定義して投げる事で、queryの方に応じたレスポンスが返ってきます。
では、実際にqueryを投げてみましょう。

query {
  allLifts {
    name
    status
  }
}

これに対して返ってくるレスポンスは...

{
  "data": {
    "allLifts": [
      {
        "id": "astra-express",
        "name": "Astra Express",
        "status": "HOLD"
      },
      {
        "id": "jazz-cat",
        "name": "Jazz Cat",
        "status": "OPEN"
      },
      {
        "id": "jolly-roger",
        "name": "Jolly Roger",
        "status": "OPEN"
      },
      {
        "id": "neptune-rope",
        "name": "Neptune Rope",
        "status": "OPEN"
      },
      {
        "id": "panorama",
        "name": "Panorama",
        "status": "HOLD"
      },
      {
        "id": "prickly-peak",
        "name": "Prickly Peak",
        "status": "OPEN"
      },
      {
        "id": "snowtooth-express",
        "name": "Snowtooth Express",
        "status": "OPEN"
      },
      {
        "id": "summit",
        "name": "Summit",
        "status": "CLOSED"
      },
      {
        "id": "wallys",
        "name": "Wally's",
        "status": "HOLD"
      },
      {
        "id": "western-states",
        "name": "Western States",
        "status": "CLOSED"
      },
      {
        "id": "whirlybird",
        "name": "Whirlybird",
        "status": "HOLD"
      }
    ]
  }
}

ちょっとデータが多くて見えにくいかもしれませんが、しっかりqueryで定義したデータ構造通りにレスポンスが返ってきていると思います。これがGraphQLの強みで、自分の欲しいデータだけを抽出できるんですね！！素敵すぎ〜〜！！！

mutation

queryがデータベースの読み込み担当だったのに対して、mutationはデータベースへの書き込み担当を行います。では実際にどのようにするのか見ていきましょう。

mutation openLift {
  setLiftStatus(id: "astra-express" status: OPEN) {
    name
    status
  }
}

こちらの操作はリフトの中のidがastra-expressであるstatusをHOLDからOPENに更新(mutation)しています。
気になるその結果は...

{
  "data": {
    "setLiftStatus": {
      "name": "Astra Express",
      "status": "OPEN"
    }
  }
}

うまくいきましたね！

subscription

最後に紹介するのはsubscriptionです。サーバーのデータが更新されるたびに、クライアントでその情報をリアルタイムに受け取りたいユースケースがあります。そんな時にsubscriptionを使うと、GraphQLサーバーからリアルタイムにデータの更新情報を受け取ることができます。
ではやっていきましょう！！

まずは下記のコマンドを実行します。

subscription {
  liftStatusChange {
    name
    capacity
    status
  }
}

次に何かしらのmutationを行います。
ここでは、先ほど使用したmutationを実行します。
すると...

{
  "data": {
    "liftStatusChange": {
      "name": "Astra Express",
      "capacity": 3,
      "status": "OPEN"
    }
  }
}

このようにリアルタイムでデータベースの更新情報を取得できました！！
（実務で使用しないため、あんまし旨味がピンときていませんが笑）

まとめ

今回はGraphQLの超基本となる3つのオペレーションについてまとめました。
僕自身は現在、業務で関わる事はあまりないですが、プロダクト開発の中で使用されており確実に理解しておきたい所なので、もう少し自分の方でも勉強を進めていきたいなぁと思います。
皆さんも、一緒にGraphQLの世界に飛び込みましょう！！