コードファーストのJSSアプリで統合されたGraphQLクエリを使用してレイアウトデータをカスタマイズ

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

統合されたGraphQLを使用すると、Sitecoreレイアウトサービスから特定のコンポーネントについて受け取るデータをカスタマイズできます。

コードファーストのJSSアプリでは、統合されたGraphQLクエリを使用してクエリを実行するメカニズムはSitecoreファーストアプリケーションと同じですが、実行するGraphQLクエリはJSSマニフェストで提供され、SitecoreアイテムのgraphQLQueryフィールドにインポートされます。

コンポーネントの統合GraphQLクエリを定義するには:

コンポーネントのマニフェスト定義ファイルを特定します。たとえば、/sitecore/definitions/components/MyComponent.sitecore.js.
並列 .graphqlファイルを作成して、クエリ /sitecore/definitions/components/MyComponent.sitecore.graphql.

コンポーネントのマニフェスト定義ファイルで、/sitecore/definitions/components/MyComponent.sitecore.graphqlファイルからGraphQLクエリ定義の内容を読み取り、graphQLQueryプロパティを使用してクエリをコンポーネント定義にアタッチします。例えば：

import { 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ヘルパーを使用) はnot許可されます。

この記事を改善するための提案がある場合は、お知らせください!