ApolloStudioはGraphQLの入門から実務まで使える最高のツール

この記事で紹介している機能はApollo Sandboxという名称でログインなしで利用可能となりました。
https://studio.apollographql.com/sandbox/explorer
複数のエンドポイントをダッシュボードで管理したい場合などはこの記事の手順でログインして利用した方が便利ですが、とりあえずクエリ発行してレスポンス見たい！という場合は上記の Apollo Sandbox を利用した方が便利そうです。
Apollo Studioで Graph 作成時に設定していたエンドポイントはサイドメニューから設定してください。

Apollo Studio?

ブラウザ上から指定したエンドポイントへ向けて GraphQL クエリを発行し Response を確認できる無料のツールです(有料プランも有り)。

Apollo チームが開発しているものですが、クエリを実行して Response を見るだけなので、 ApolloServer, ApolloClient などのライブラリを使ってプログラムを書いているかどうかは関係ないです。
とても簡単に使うことができるので、初学者の方が「とりあえず GraphQL 触ってみたい」という練習用途で使うのにもオススメです。
私は実務でも GraphQL の動作確認をする際にかなりお世話になっています。

クエリ入力時のサジェスト機能や Fragment の自動作成機能などもあり、一度使うと手放せなくなる便利さです。

使い方

SignIn・Graph 作成

以下にアクセスして SignIn しましょう。
https://studio.apollographql.com

SignIn すると Graph 作成画面が表示されます(画面右上の[+ New Graph]クリックでも可)。

入力項目を設定します。

• Graph title: 任意の名前
• Graph type: Development を選択
• Endpoint: https://countries.trevorblades.com を入力

このエンドポイントはPublic GraphQL APIsに掲載されている一般公開されているエンドポイントです。
世界の国名や国旗の絵文字を取得することができます。
今回動作確認に使用させてもらいます。

全て入力したら[Greate Graph]をクリックして Graph を作成してください。

クエリ実行

それではクエリを実行してみましょう。
初期入力されているクエリは削除して以下のクエリを貼り付け、[▷ ExampleQuery]をクリックしてください。
クエリの実行結果が確認できます。

query

query ExampleQuery {
  countries {
    code
    name
  }
}

クエリにemojiを追加して実行してみましょう。
eを入力した時点で入力候補が表示されます。

クエリ入力時に[⌘ + K]を入力するとスキーマの検索もできます。

その他にも便利なショートカットが用意されているので、クエリ入力エリア右下のキーボードアイコンから確認してみてください。

Variables,Headers を設定

クエリ入力エリア下部には Variables,Headers の設定エリアがあるので、必要に応じてここから設定します。

Variables？

クエリに渡す引数のようなものです。
例えば下記のクエリでは GitHub の Issue を取得していますが、だれの、どのリポジトリの Issue を、何件取得するか、各情報を Variables で設定しています。

Headers？

Variables 同様クエリに付け加える情報ですが、アクセストークンを渡す使い方が多いと思います（下記の例では GitHub のアクセストークンを設定しています）。
Variables は書いたクエリによって設定内容も変わりますが、Headers は 「こういうふうに設定してね」というルールが事前に決められています。(GitHub API の場合はこちらに記載されています。)

例として GitHub GraphQL API から指定したリポジトリの Issue を取得するサンプルを用意しました。

以下サンプルを実行するには GitHub のアクセストークンが必要です。

事前にこちらの手順に従い用意しておいてください。
(トークン発行画面からGenerate new tokenをクリックするだけで終わります。)

Apollo Studio の TOP から[+ New Graph]をクリックして、以下の通り設定します。

• Graph title: 任意の名前
• Graph type: Development を選択
• Endpoint: https://countries.trevorblades.com を入力後、Add headerをクリック
• header
  • header key: Authorization
  • value: bearer GitHubアクセストークン

query 発行画面から以下の通り入力し、[▷ GetRepository] をクリックして実行

query

query GetRepository($repositoryOwner: String!, $repositoryName: String!, $issuesFirst: Int) {
  repository(owner: $repositoryOwner, name: $repositoryName) {
    name
    issues(first: $issuesFirst){
      edges {
        node {
          id
          title
        }
      }
    }
  }
}

Variables

{
  "repositoryOwner": "octocat",
  "repositoryName": "Hello-World",
  "issuesFirst": 10
}

Headers

Authorization : bearer GitHubアクセストークン

実行結果

便利機能

ここまででも十分便利なのですが、他にも色々な便利機能がありますので少し紹介します。

スキーマドキュメント

左上のアイコンをクリックするとスキーマのドキュメントを見ることができます。

curl 実行コマンドを取得

クエリ入力エリア右上のメニューから入力中のクエリを curl で実行するコマンドをコピーできます。

ブラウザ以外から動作確認したい時に便利です。

Fragment を自動作成

クエリ中の Fragment 化したい箇所を範囲選択して右クリック後[Extract Fragment]を選択すると、Fragment を自動作成してくれます。

最後に

無料とは思えないほど便利です。
GraphQL の入門・開発の際には使わないと損なので、是非使用してみてください！