GraphQL Playgroundの使い方

REST APIのドキュメント兼実行環境としてはswaggerがよく利用されています。 Graphql APIにおいてそのswaggerの代わりになるものがGraphiQLやgraphql playgroundです。 ここではGraphql APIを初めて利用される方向けにgraphql playgroudの基本的な使い方について紹介したいと思います。 説明の際には以下のSaleorの公開Demo APIを使用させていただきます。 https://demo.saleor.io/graphql/

SCHEMA

graphql playgroundを開くと、右側にSCHEMAのタグが見えると思います。 そのタグをクリックすると、Graphql APIのschemaファイルを確認することができます。

SCHEMAにはgraphql playground構築に必要なGaraphql APIのデータやクエリの定義が記載されています。 いわばREST APIでのOpen APIフォーマットで記述されたyml, jsonファイルみたいなものです。 graphql playground上ではこのSCHEMAファイルをjson形式、もしくはgraphql形式で直接ダウンロードする事が可能です。

DOCS

SCHEMAタグの上のDOCSタグを押すと、Graphql APIのドキュメントを確認することができます。 graphql playgroud上ではこのDocumentを参照してQueryやMutationリクエストを試すことになります。

Query

GraphQL上でREST APIのGETに対応するリクエストがQueryです。 graphql playground上では左側にqueryを書いて真ん中のplayボタンを押すことで右側にそのqueryのレスポンス結果が表示されます。

画像ではproductsの中でchannelが"default-channel"のものを最初の5個だけ取ってくるqueryを実行しています。 どんな引数が使えるのか、どのデータが取得できるのかは先程のDOCSにすべて記載されています。

Mutation

MUTATIONはデータリソースを変更するGraphQLリクエストです（REST APIでいうPUTやPOST、DELETE）。 使い方はQueryとほとんど同じです。

http headers

playgroundの左下にあるhttp headersではリクエストのheaderをカスタマイズすることが可能です。 例えば、headerのAuthorizationにaccess tokenを設定したい場合はhttp headers内に以下のように記載します。

query variables

http headersの隣にあるquery variablesではqueryに使用する変数を設定できます。

その他の便利機能

• tab
  graphql playgroundでは異なるqueryやmutationを別tabで管理できます（かなり便利）。

• history
  過去に実行したqueryやmutationをさかのぼって再現できます。

• prettify
  queryをフォーマットしてくれます。

おわり

良いGraphQLライフを！ 👍