GraphiQL IDE の使用

標準の実装 GraphiQL IDE は、Adobe Experience Manager(AEM) の GraphQL API でas a Cloud Serviceして使用できます。

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

• を選択します。 エンドポイント クエリに使用する Sites 設定に適したもの
• 新しいクエリを直接入力
• 作成し、にアクセスします。 永続クエリ
• クエリを実行して結果をすぐに確認する
• 管理 クエリ変数
• 保存し、管理する 永続クエリ
• 公開または非公開 永続クエリ （例：から/から） dev-publish)
• 参照 履歴 以前のクエリの
• を使用します。 ドキュメントエクスプローラ ドキュメントにアクセスするには、以下を実行します。使用可能な方法を学び理解するのに役立ちます。

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

• ツール -> 一般 -> GraphQL クエリエディター
• 直接例： http://localhost:4502/aem/graphiql.html

システムで GraphiQL を使用して、GETリクエストを使用してクライアントアプリケーションからクエリをリクエストできるようにし、クエリの公開に使用できます。 実稼動環境では、次の操作を実行できます。 クエリを実稼動環境に移動する. 最初は、実稼動作成者に対して、クエリを使用して新しく作成したコンテンツを検証し、最後に実稼動公開でライブ消費を検証します。

エンドポイントの選択

最初の手順として、 エンドポイント クエリに使用する エンドポイントは、クエリに使用する Sites 設定に適しています。

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

新しいクエリを作成し、保持する

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

入力を始めるだけで、エディターも次のようにします。

• は、マウスオーバーを使用して要素に関する追加情報を表示します
• には、構文のハイライト表示、オートコンプリート、自動提案などの機能があります。

用途 名前を付けて保存 をクリックして新しいクエリを保持します。

持続的なクエリの更新

更新するクエリを、 永続クエリ パネル（左端）

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

実行中のクエリ

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

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

• クリックまたはタップ クエリを実行 アイコン
• キーボードの組み合わせを使用する Control-Enter

クエリ変数

また、GraphiQL IDE では、 クエリ変数.

次に例を示します。

永続化されたクエリのキャッシュの管理

永続クエリ は、要求元のクライアントアプリケーションのパフォーマンスを向上させるために、Dispatcher および CDN レイヤーでキャッシュできるので、お勧めします。 デフォルトでは、AEMはデフォルトの有効期間 (TTL) に基づいてコンテンツ配信ネットワーク (CDN) キャッシュを無効にします。

GraphQL を使用して、HTTP キャッシュヘッダーを設定し、個々の永続化されたクエリ用にこれらのパラメーターを制御できます。

1. この ヘッダー オプションには、持続的なクエリ名（左端のパネル）の右側の 3 つの縦並びのドットからアクセスできます。

   

2. これを選択すると、 キャッシュ設定 ダイアログ：

   

3. 適切なパラメーターを選択し、必要に応じて値を調整します。

   • cache-control - max-age
     キャッシュは、指定された秒数間、このコンテンツを保存できます。 通常、これはブラウザーの TTL(Time To Live) です。
   • 代理制御 - s-maxage
     max-age と同じですが、プロキシキャッシュに特に適用されます。
   • 代理制御 - stale-while-revalidate
     キャッシュは、古くなった後も、指定された秒数までキャッシュされた応答を引き続き提供します。
   • 代理制御 - stale-if-error
     キャッシュは、エラーまたはオリジンエラーが発生した場合、指定された秒数まで、引き続きキャッシュされた応答を提供します。

4. 選択 保存 をクリックして変更を保持します。

永続的なクエリの公開

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

URL をコピーしてクエリに直接アクセス

この URL をコピー 「 」オプションを使用すると、永続化されたクエリに直接アクセスして結果を確認するために使用する URL をコピーして、クエリをシミュレートできます。 その後、これをテストに使用できます。例えば、ブラウザーでにアクセスすると、次のようになります。

次に例を示します。

http://localhost:4502/graphql/execute.json/global/article-list-01

この URL をブラウザーで使用すると、結果を確認できます。

この URL をコピー オプションには、持続的なクエリ名（左端のパネル）の右側の 3 つの縦並びのドットからアクセスできます。

永続クエリの削除

この 削除 オプションには、持続的なクエリ名（左端のパネル）の右側の 3 つの縦ドットからもアクセスできます。

実稼動環境への永続クエリのインストール

GraphiQL を使用して永続的なクエリを開発およびテストした後、最終目標は次のとおりです。 実稼動環境に転送する アプリケーションで使用する場合。

ショートカットキー

IDE のアクションアイコンに直接アクセスできるキーボードショートカットがいくつか用意されています。

• クエリを事前設定： Shift-Control-P
• 結合クエリ： Shift-Control-M
• クエリを実行： Control-Enter
• オートコンプリート： Control-Space