GraphiQL IDE の使用 graphiql-ide

標準の GraphiQL IDE の実装は、Adobe Experience Manager（AEM） の GraphQL API で使用できます。

GraphiQL ツールを使用すると次のことが可能になるので、GraphQL クエリをテストおよびデバッグできます。

クエリエディターには、次のいずれかの方法でアクセスできます。

システムで GraphiQL を使用すると、GET リクエストを使用してクライアントアプリケーションからクエリをリクエストしたり、クエリを公開したりできます。実稼動環境で使用する場合は、その後クエリを実稼動環境に移動できます。最初は実稼動オーサーに移行して、新しくオーサリングしたコンテンツをクエリで検証し、最終的には実稼動パブリッシュに移行してライブで利用できるようにします。

エンドポイントの選択 selecting-endpoint

まず、クエリに使用する​ エンドポイント ​を選択する必要があります。クエリに使用する Sites 設定に適したエンドポイントです。

これは、右上のドロップダウンリストから選択できます。

新しいクエリの作成と永続化 creating-new-query

エディターに新しいクエリを入力できます（エディターは左中央パネルの GraphiQL ロゴのすぐ下にあります）。

入力を開始します。エディターには次の機能があります。

「名前を付けて保存」を使用して、新しいクエリを永続化します。

永続クエリの更新 updating-persisted-query

更新するクエリを（左端の）永続クエリ ​パネルのリストから選択します。

クエリがエディターパネルに表示されます。必要な変更を加えたあと、「保存」を使用して、更新内容を永続クエリにコミットします。

クエリの実行 running-queries

新しいクエリをすぐに実行することもできますし、永続クエリを読み込んで実行することもできます。永続クエリを読み込むには、該当するクエリをリストから選択します。そのクエリがエディターパネルに表示されます。

どちらの場合も、エディターパネルに表示されるクエリは、次のいずれかの場合に実行されるクエリです。

クエリ変数 query-variables

また、GraphiQL IDE では、クエリ変数を管理することもできます。

次に例を示します。

永続クエリの公開 publishing-persisted-queries

リスト（左パネル）から 永続クエリを選択したら、「公開」アクションと「非公開」アクションを使用できます。これにより、パブリッシュ環境（dev-publish など）に対してアクティブ化され、テスト時にアプリケーションから簡単にアクセスできるようになります。

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 のアクションアイコンに直接アクセスできる一連のキーボードショートカットが用意されています。