GraphiQL IDE の使用 graphiql-ide
標準の GraphiQL IDE の実装は、Adobe Experience Manager(AEM) の GraphQL API で使用できます。
GraphiQL ツールを使用すると次のことが可能になるので、GraphQL クエリをテストおよびデバッグできます。
- クエリに使用する Sites 設定に適した エンドポイント を選択する
- 新しいクエリを直接入力する
- 永続クエリ を作成してアクセスする
- クエリを実行して結果をすぐに確認する
- クエリ変数 を管理する
- 永続クエリ を保存して管理する
- 永続クエリ を公開または非公開にする(
dev-publish
との間など) - 以前のクエリの 履歴 を確認する
- ドキュメントエクスプローラー を使用してドキュメントにアクセスし、使用可能な方法を学び理解するのに役立てる
クエリエディターには、次のいずれかの方法でアクセスできます。
- ツール/一般/GraphQL クエリエディター
- 直接アクセス(例:
http://localhost:4502/aem/graphiql.html
)
システムで GraphiQL を使用すると、GET リクエストを使用してクライアントアプリケーションからクエリをリクエストしたり、クエリを公開したりできます。実稼動環境で使用する場合は、その後クエリを実稼動環境に移動できます。最初は実稼動オーサーに移行して、新しくオーサリングしたコンテンツをクエリで検証し、最終的には実稼動パブリッシュに移行してライブで利用できるようにします。
エンドポイントの選択 selecting-endpoint
まず、クエリに使用する エンドポイント を選択する必要があります。クエリに使用する Sites 設定に適したエンドポイントです。
これは、右上のドロップダウンリストから選択できます。
新しいクエリの作成と永続化 creating-new-query
エディターに新しいクエリを入力できます(エディターは左中央パネルの GraphiQL ロゴのすぐ下にあります)。
+
」を選択してエディターを空にし、新しいクエリを作成できるようにします。入力を開始します。エディターには次の機能があります。
- マウスオーバーを使用して、要素に関する追加情報を表示します
- 構文のハイライト表示、オートコンプリート、自動候補表示などの機能が用意されています
{
文字で始まります。#
で始まる行は無視されます。「名前を付けて保存」を使用して、新しいクエリを永続化します。
永続クエリの更新 updating-persisted-query
更新するクエリを(左端の)永続クエリ パネルのリストから選択します。
クエリがエディターパネルに表示されます。必要な変更を加えたあと、「保存」を使用して、更新内容を永続クエリにコミットします。
クエリの実行 running-queries
新しいクエリをすぐに実行することもできますし、永続クエリを読み込んで実行することもできます。永続クエリを読み込むには、該当するクエリをリストから選択します。そのクエリがエディターパネルに表示されます。
どちらの場合も、エディターパネルに表示されるクエリは、次のいずれかの場合に実行されるクエリです。
- 「クエリを実行」アイコンをクリックする
- キーボードショートカット
Control-Enter
を使用する
クエリ変数 query-variables
また、GraphiQL IDE では、クエリ変数を管理することもできます。
次に例を示します。
永続クエリの公開 publishing-persisted-queries
リスト(左パネル)から 永続クエリを選択したら、「公開」アクションと「非公開」アクションを使用できます。これにより、パブリッシュ環境(dev-publish
など)に対してアクティブ化され、テスト時にアプリケーションから簡単にアクセスできるようになります。
Time To Live
{"cache-control":"parameter":value} の定義では、デフォルト値は 2 時間(7200 秒)になっています。URL をコピーしてクエリに直接アクセスする copy-url
「URL をコピー」オプションを使用すると、永続クエリに直接アクセスできる URL をコピーしてクエリをシミュレートし、結果を確認することができます。これは、ブラウザーでアクセスするなどしてテストに使用できます。
次に例を示します。
http://localhost:4502/graphql/execute.json/global/article-list-01
この URL をブラウザーで使用すると、結果を確認できます。
「URL をコピー」オプションには、永続クエリ名(左端のパネル)の右側にある 3 ドットアイコンを使用してアクセスできます。
永続クエリの削除 deleting-persisted-queries
永続クエリ名(左端のパネル)の右側にある 3 ドットアイコンを使用すると、「削除」オプションにもアクセスできます。
実稼動環境への永続クエリのインストール installing-persisted-query-production
GraphiQL を使用して永続クエリを作成およびテストした後は、その永続クエリを実稼動環境に転送してアプリケーションで使用できるようにします。
キーボードショートカット keyboard-shortcuts
IDE のアクションアイコンに直接アクセスできる一連のキーボードショートカットが用意されています。
- クエリの修飾:
Shift-Control-P
- クエリの結合:
Shift-Control-M
- クエリの実行:
Control-Enter
- オートコンプリート:
Control-Space
Control
キーには Ctrl
のラベルが付いています。