これは、なにをしたくて書いたもの？
前に、QuarkusでGraphQLを使ってみるというエントリーを書きました。
この時は、Quakusに組み込まれているGraphiQL UIを使ってQueryやMutationを実行しました。あと、curlでも1度やってみましたが、ちょっと
面倒でしたね…。
Quarkusのように組み込まれたものではなく、単体でGraphQLを扱うにはどうしたらいいのかな？と思い、調べてみました。
できれば、ローカル実行できるもので。
Altair GraphQL Clientというものを使うのが良さそうです。
GraphiQL
Altair GraphQL Clientにたどり着いた軌跡を軽くメモしておきます。
GraphQLに関するツールといえば、GraphiQLのようです。
GraphQL makes it easy to build powerful tools like GraphiQL by leveraging your API’s type system.
GraphQL | A query language for your API
GraphiQLのリポジトリは、こちら。
GraphiQL自体の説明は、このように書かれています。
GraphiQL is the reference implementation of this monorepo, GraphQL IDE, an official project under the GraphQL Foundation. The code uses the permissive MIT license.
GraphQL Foundationの公式プロジェクトであり、GraphQL IDEのリファレンス実装であるとされています。
開発者は、このリポジトリから提供されるものを使い、GraphQLに関するツールを作れるようです。
ここで、Latest Stable Ecosystemに記載されている図を見てみます。
GraphQL IDE Monorepo / Latest Stable Ecosystem
今回の目的に関連しているのは、Codemirror GraphQLから右のようですね。
GraphiQL Explorerはちょっと違いそうでしたが（※）、Altairが今回の目的には合いそうでした。
※その他のツールも見てみたのですが、更新が止まっているものが多いですね…
あと、GraphQL CLIというキーワードで最初探していたのですが、これも今回の目的とは違いそうでした。
Altair GraphQL Client
Altair GraphQL ClientのWebサイトはこちら。
Altair GraphQL Clientは、GraphQLクエリーと実装のデバッグを助けるツールです。
ドキュメントは、こちら。
Getting Started | Altair GraphQL Client
機能は、以下に並んでいます。
Introduction | Altair GraphQL Client
導入形態としては、以下があるようです。
- Linux、Windows、macOSでのデスクトップアプリケーション
- Google Chrome extension
- Firefoxのアドオン
- Web版
Web版Altairの環境で動作するものですが、はちょっと試してみたいといった時に使うもので、制限事項もあるようです。
Altair GraphQL Clientとしては、デスクトップアプリケーション版またはブラウザのアドオン版の利用を勧めています。
Test your GraphQL queries easily / Available Platforms
Altair GraphQL Client for Google Chrome extensionでGraphQLを使ってみる
今回は、Google Chrome extension版のAltair GraphQL Clientをインストールします。
Altair GraphQL Client - Chrome ウェブストア
extensionを起動すると、タブが開いてこんなページが表示されます。
テスト対象のGraphQLサーバーとしては、こちらのエントリーで作成したアプリケーションをそのまま使うものとします。
この時のGraphQLのエンドポイントは、http://localhost:8080/graphqlでした。
こちらをURLを入力するフィールドに指定しておきます。特にEnterを明示的に入力したりは要らないようです。
すると、GraphQLのスキーマの内容を解釈して補完が効くようになりますね。
実行。
フォーマットしたり、1行にまとめたりもできたり。
クエリーの内容を、curlコマンドとしても取得できたりするようです。
「Docs」というボタンを押すと、現在認識しているスキーマの内容が表示されます。
各項目をクリックすることで、詳細をたどることができます。
クエリーの実行。
こんなところでしょうか。簡単に使えて便利ですね。
