JSS アプリでの統合型 GraphQL
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
統合型 GraphQL では、レイアウト サービスによって特定のコンポーネントに対して返されるレイアウト データの形式を、GraphQL クエリの結果に変更できます。つまり、フロントエンド コンポーネントを強化するために必要なデータを定義する GraphQL クエリを定義し、そのクエリからのデータをプロパティ (React コンポーネントの props.fields
など) として受け取ることができます。これにより、必要なデータのみを取得するように制御できます。また、子アイテムや CRM データなどの高度なデータ ソースが必要な場合は、GraphQL の機能を利用できます。
Sitecore では、GraphQL クエリは、GraphQL フィールド コンポーネント GraphQL クエリのレンダリングにアタッチされます。
次の場合は、統合型 GraphQL を使用することを推奨します。
-
コンポーネントが、 GraphQL スキーマの一部であるデータソース テンプレートのフィールドよりも多くのデータを必要とする場合。
-
データソース テンプレートに、レンダリングしたくない余分なフィールドが含まれている場合。
-
Apollo などのクライアント側の GraphQL ライブラリを持ちたくない場合 (統合型では JSS 以外の追加の依存関係は不要です)。
次の場合は、統合型 GraphQL の使用を避けることを推奨します。
-
コンポーネントがコンテンツ テンプレート フィールド データのみを使用する場合。既定のレイアウト データ出力で十分であり、GraphQL は必要ありません。
-
GraphQL クエリのパフォーマンスが低い場合。たとえば、複数の REST API 呼び出しをバックグラウンドで集約します。統合型 GraphQL は、レイアウトに対するすべてのクエリが完了するまで、アプリのレンダリングをブロックします。接続型 GraphQL を使用して、実行時間の長いクエリを最初のレイアウトがレンダリングされた後まで延期することを推奨します。
-
コンポーネントが、状態の変化に応じて追加の GraphQLクエリを発行する必要がある場合。統合クエリは、レイアウト データが読み込まれるときにのみ実行されます。
-
コンポーネントが、ミューテーション (更新) またはサブスクリプション (リアルタイム データ) を実行する必要がある場合。統合型 GraphQL では、クエリのみを実行できます。
[en] When using integrated GraphQL queries, for the default
and jss
layout service configurations, values for $datasource
, $contextItem
, and $language
are automatically injected.
JSS アプリでの統合型 GraphQL の利用
Sitecore レイアウト サービスは、ページをレンダリングすると、ページのレイアウトと各コンポーネントのデータを JSON 表現で返します。通常、コンポーネント データは、Sitecore データソース アイテムのフィールドのセットです。統合型 GraphQL を使用すると、これを GraphQL クエリの結果に再形成できます。
統合型 GraphQL を使用するには:
-
クエリを実行するスキーマを持つ Sitecore GraphQL API エンドポイントを定義します。最初にこれを動作させ、GraphiQL (
$endpointUrl/ui
) を使用してスキーマを操作し、動作することを確認します。通常、エンドポイントは JSS アプリの設定パッチ ファイル (JSS アプリの/sitecore/config
の下に保存されますが、Sitecore に保存することも可能です) を使用して定義されます。 -
GraphQL エンドポイントに JSS アプリをアタッチします。JSS
<app>
定義で、エンドポイントの URL を指すgraphQLEndpoint
プロパティを追加します。例:<app name="MyJssApp" graphQLEndpoint="/sitecore/api/jssbasicapp" />
統合型 GraphQL は、Sitecore ファーストのアプリでもコードファーストのアプリでも使用できます。
コードファーストの JSS アプリに統合された GraphQL クエリによるレイアウト データのカスタマイズ
統合された GraphQL を使用することで、Sitecore レイアウト サービスから特定のコンポーネントに対して受け取るデータをカスタマイズできます。
コードファーストの JSS アプリでは、統合された GraphQL クエリによるクエリの仕組みは Sitecore ファーストのアプリケーションと同じですが、実行する GraphQL クエリは JSS マニフェストで提供され、Sitecore アイテムの graphQLQuery
フィールドにインポートされます。
コンポーネントに統合された GraphQL クエリを定義するには:
-
コンポーネントのマニフェスト定義ファイルを特定します。例:
/sitecore/definitions/components/MyComponent.sitecore.js
-
クエリ
/sitecore/definitions/components/MyComponent.sitecore.graphql
を格納するための並列の.graphql
ファイルを作成します。 -
コンポーネントのマニフェスト定義ファイルで、
/sitecore/definitions/components/MyComponent.sitecore.graphql
ファイルから GraphQL クエリ定義の内容を読み取り、graphQLQuery
プロパティを使用してクエリをコンポーネント定義に添付します。例:RequestResponseimport { readFileSync } from 'fs'; const query = readFileSync( 'sitecore/definitions/components/ComponentName.sitecore.graphql', 'utf8' ); export default manifest => { manifest.addComponent({ name: "ComponentName", graphQLQuery: query }); };
注記readFileSync
を使用して GraphQL クエリを含めることを推奨します。これにより、クエリ ファイルをリンティングできますが、リテラル文字列を使用することもできます。解析済み GraphQL クエリ AST (graphql-tag
のgql
ヘルパーを使用) は使用できません。