🦉

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

2021/03/28に公開
3

この記事で紹介している機能は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 を入力

全て入力したら[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 を取得するサンプルを用意しました。

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 の入門・開発の際には使わないと損なので、是非使用してみてください!

Discussion

saboyutakasaboyutaka

ここで紹介されてるApollo StudioのExplorerとSchemaはApollo Sandboxという名称で、ログインなしで利用可能になったみたいです。https://sandbox.apollo.dev にアクセスすると利用できます。

https://www.apollographql.com/blog/announcement/platform/apollo-sandbox-an-open-graphql-ide-for-local-development/

また、最近リリースされたApollo Server v3 はApollo Sandboxをデフォルトとして利用するようにリダイレクトの画面が表示されるみたいです。

https://www.apollographql.com/docs/apollo-server/migration/#graphql-playground

himihimi

お知らせいただきありがとうございます!
記事冒頭にApollo Sandboxについて言及する文章を追加しました。

kaiyu(migratoryfish)kaiyu(migratoryfish)

こんにちは!
こちらの記事を参考にやってみたところ恐らくですがこうじゃないかな?
という箇所があったので記載します。

GitHub GraphQL API から指定したリポジトリの Issue を取得するサンプル
Endpoint: https://countries.trevorblades.com を入力後、Add headerをクリック

おそらく最初のクエリ実行のサンプルでのEndpointのURLをそのまま記載されてるのかなと思います。
最初記事の意図した結果が得られず、見直したところここを修正してうまくいきました!