Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
15
Help us understand the problem. What is going on with this article?
@NagaokaKenichi

GraphQLの便利なツール

More than 1 year has passed since last update.

GraphQLのAPIを簡単に実行するためのツールがオープンソースで開発されています。こういったツールを使うことで、自分が作ったGraphQL APIを簡単に実行し、挙動の確認を行うことができます。有名なツールとして、GraphiQLとGraphQL Playgroundがあります。

GraphiQL

https://github.com/graphql/graphiql
GraphiQLは、Facebookが開発したブラウザ上で利用できる統合開発環境です。シンタックスハイライト、入力補完、構文エラー検知などの機能が搭載されています。RESTの課題とGraphQL 〜GraphQLを簡単に使ってみる〜でも紹介しましたが、SWAPIのような公開APIには、GraphiQLがホスティングされていることもあります。
https://graphql.org/swapi-graphql
作ったGraphQL APIを公開する場合は、上記のようにGraphiQLのインターフェースを提供することで、利用者に簡単に試してもらうことが可能になります。

また、ホスティングしなくても、スタンドアロンでGraphQL APIを試すことも可能で以下からダウンロードできます。
https://electronjs.org/apps/graphiql

UIは以下の通りシンプルです。
※SWAPIのGraphiQLを利用します(https://graphql.org/swapi-graphql)
image.png

試しに、以下のクエリを発行してみます。クエリを入力し再生ボタンをクリックします。
image.png
右ペインがレスポンスです。簡単に試すことが可能です。また、クエリドキュメントも右上のDocsから確認できます。
image.png

GraphQL Playground

https://github.com/prisma-labs/graphql-playground
Prismaチームによって開発されたツールです。GraphiQL同様、ブラウザ上、スタンドアロン両方で使うことができます。スタンドアロン版は以下からダウンロードできます。
https://electronjs.org/apps/graphql-playground

GraphiQL同様、UIは以下の通りシンプルです。公開されているSnowtooth APIで試してみます(http://snowtooth.moonhighway.com/)。
image.png

GraphiQLとの違いは以下があります。

  • HTTPヘッダーを自由に書き換えられる
  • タブ機能で複数のクエリを1ウィンドウで試せる
  • curlコマンドでも投げれるように、curl copy機能がある
  • エディターの外観やフォントの設定が可能 image.png

ちなみに、curl copyは以下のようにコピーされました。

curl 'http://snowtooth.moonhighway.com/' -H 'Accept-Encoding: gzip, deflate, br' -H 'Content-Type: application/json' -H 'Accept: application/json' -H 'Connection: keep-alive' -H 'DNT: 1' -H 'Origin: http://snowtooth.moonhighway.com' --data-binary '{"query":"# Write your query or mutation here\nquery {\n  allLifts {\n    name\n    status\n  }\n}"}' --compressed

以上です。

参考

15
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
15
Help us understand the problem. What is going on with this article?