JSS アプリの接続型 GraphQL
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
接続型 GraphQL では、JSS アプリは Sitecore GraphQL エンドポイントに直接 HTTP 要求を行います。このモードは、あらゆる JavaScript アプリケーションで GraphQL API を使用するのと同じであり、JSS固有ではありません。
Apollo GraphQL Client などの JavaScript GraphQL クライアントを使用することを推奨します。
次の場合は、接続型 GraphQL を使用することを推奨します。
-
ページ レイアウトがレンダリングされた後、またはルートの変更以外のアプリの状態の変更に応答して、データを非同期的に読み込む場合。
-
コンポーネントは、ミューテーション (更新) またはサブスクリプション (リアルタイムデータ) を実行する必要がある場合。
-
Redux や apollo-link-state パッケージとの統合など、クエリや状態のライフサイクルを完全に制御したい場合。
次の場合は、接続型 GraphQL の使用を避けることを推奨します。
-
コンポーネントは、コンテンツ テンプレート フィールド データのみを使用します。既定のレイアウト データ出力で十分であり、追加の GraphQL クエリが必要ない場合。
-
GraphQL クライアント ライブラリの追加されたページの重みが望ましくない場合。
[en] When you set a GraphQL endpoint, the data output of the connected GraphQL component is tied to that source. The output is identical for both editing and normal modes.
JSS アプリでの接続型 GraphQL の使用
接続型 GraphQL は、JavaScript アプリケーションから他の GraphQL API を使用するのとまったく同じです。すべての JSS サンプル アプリケーションには、GraphQL の使用例が含まれています。
接続型 GraphQL を使用するには:
-
クエリを実行するスキーマを持つSitecore GraphQL エンドポイントを定義します。通常、エンドポイントは JSS アプリの構成パッチ ファイルを使用して定義され、JSS アプリの
/sitecore/configの下に保存されますが、Sitecore を使用して保存することもできます。 -
API エンドポイントにクエリを実行する GraphQL クライアントをインストールして設定します。
JSS アプリでの接続型 GraphQL のトラブルシューティング
JSS アプリで接続型 GraphQL を使用する場合、次の問題が発生する可能性があります。
型付けされたフラグメントを使用してクエリを実行すると、コンポーネントがデータを受信しない
テンプレートの型付けベースのフラグメントを使用してクエリを実行する場合があります。たとえば:
item {
# AppRoute is a Sitecore Template-based GraphQL type
...on AppRoute {
pageTitle {
value
}
}
}この場合、Apollo Client で、未処理の GraphQL 応答は value を返しますが、JSS アプリはコンポーネント レベルで値を受信しないという状況が発生する可能性があります。Apollo Client は、GraphQL データのスマート キャッシュを維持します。GraphQL 型を効果的にキャッシュするには、GraphQL API のスキーマに関する情報を知っている必要があります。Sitecore テンプレートのリファクタリングなどに応じてスキーマが変更されると、このスキーマ データが古くなり、不正確なスキーマ データにより不適切なキャッシュが行われる可能性があります。
スキーマ データを更新するには、jss graphql:update を実行して、GraphQL エンドポイントから最新のスキーマ データを取得します。更新されたデータをソース管理にコミットする必要があります。
テンプレート名の衝突
GraphQL では型とフィールドの名前は一意でなければなりませんが、Sitecore では複数のテンプレートに同じ名前を付けることができます。厳密に型付けされたテンプレート フィールドで使用する場合、Experience Edge スキーマ では、作成日が最新のアイテムまたはフィールド アイテムに _{guid} を追加することによって、名前の衝突を処理します。