logo

GraphQL の IDE

GraphQL の IDE を使用すると、GraphQL サーバーへのリクエストの送信やデータの取得を簡単に行うことができます。 これらの IDE は GraphQL 言語のクエリ機能をサポートしています。

GraphQL の IDE は、構文とエラーをリアルタイムで強調表示します。 入力していくと、GraphQL からスキーマ ドキュメントのスニペットが提供されるため、クエリに何を追加しているかがわかります。

これらの IDE を使用すると、組織のすべてのデータソースを、常に最新の 1 つの連携したデータ グラフとして表示できます。

Preview APIDelivery API の上に、スキーマの自動リロードなどの機能が追加されて構築された GraphQL IDE があります。

Content Hub との Sitecore GraphQL 統合開発環境 (IDE) は、以下を提供します。

  • Preview API IDE
  • Delivery API IDE
  • 構文とエラーの強調表示
  • スキーマの自動リロード
  • クエリの実行履歴
  • オートコンプリート機能
  • パラメーターに関するすべての情報を確認できる [DOCS] タブ。
  • Prettify を使用したコードの書式設定

GraphQL の Sitecore Content Hub の実装でミューテーションを使用することはできません。

Preview API IDE

Preview API IDE は Preview API を使用し、 Content Hub のインスタンスに対してライブで実行されます。 ドラフトやまだ承認されていないその他のコンテンツを含む、すべてのコンテンツへのアクセスを許可します。

Delivery API IDE

Delivery API IDE は Delivery API を使用し、 Preview API IDE と同じスキーマを持ちます。 配信プラットフォームでホストされ、承認および公開されたコンテンツへのアクセスのみを提供します。

履歴

GraphQL IDE は、クエリの実行履歴を保持します。 繰り返し使用するクエリには、星印を付けて履歴の上部に表示することもできます。

クエリに星印を付けるには:

  1. IDE で、[履歴] を選択します。
  2. 目的のクエリを選択するには、星印をクリックします。
  3. [使用] をクリックします。

Prettify

Prettify は、正しいインデントを追加してクエリの書式設定を行います。

オートコンプリート

IDE にはオートコンプリート機能があるため、必要なフィールドを直感的に見つけることができます。 構文の強調表示、リンティング、オートコンプリート、およびフラグメントへのナビゲートを提供します。

スキーマ

[スキーマ] タブには、定義されたスキーマの詳細が表示されます。 次のスクリーンショットには、IDE の右側に SCHEMA が表示されています。

スキーマをダウンロードするには:

  1. 右上にある [ダウンロード] をクリックします。

  2. スキーマのダウンロード形式を選択します。

    • JSON
    • SDL

DOCS

GraphQL の IDE には、GraphQL で利用可能なドキュメントが表示されます。 インタラクティブで、複数列に表示でき、ネイティブ キーボードに対応しています。

[DOCS] タブでは、クエリに必要なパラメーターや応答に指定できるフィールドに関するすべての情報を確認できます。

フィールドやそのサブフィールドに移動すると、エクスプローラーがスキーマ内の現在のパスを追跡します。

クエリの詳細を表示するには、ドキュメント列で [DOCS] タブをクリックします。

次のスクリーンショットは、allM_Asset クエリを、型と引数を含めて表示しています。

[ドキュメント] で使用できる機能は主に 2 つあります。

機能説明
探しているスキーマ フィールドを見つけるフィールドを名前で検索します (例: アセット)。 インターフェイスにより、同じ名前を持つフィールドを区別できます。あいまい検索を使用できるため、フィールドの正確なスペルを知らなくても問題ありません。
スキーマのエントリポイントからそのフィールドへの理想的なパスを見つける型とフィールドのペアを特定すると、エクスプローラーは、スキーマのエントリポイントから始まるそのフィールドへのすべてのパスを一覧表示します。 これらのパスは深さ順に並べられます。

クエリ変数

クライアント コードでは、新しいクエリを再構築する代わりに、引数としてさまざまな値を渡すことができます。 クエリ変数は、IDE の [クエリ変数] タブの下に追加できます。

次のスクリーンショットでは、hasComplexRights クエリ変数を Boolean (true に設定) として作成しています。 次に、この変数を assetComplexDRM クエリで使用します。

Can we improve this article ? Provide feedback