---
title: "コードファーストのJSSアプリで統合GraphQLクエリでレイアウトデータをカスタマイズできます"
slug: "customize-layout-data-with-integrated-graphql-queries-in-code-first-jss-apps-690662"
abstract: "JSSマニフェストを用いた統合GraphQLクエリの定義例"
---
# コードファーストのJSSアプリで統合GraphQLクエリでレイアウトデータをカスタマイズできます

[統合されたGraphQL](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/integrated-graphql-in-jss-apps.html "Integrated GraphQL in JSS apps")を使えば、Sitecoreレイアウトサービスから受け取るコンポーネントのデータをカスタマイズできます。

コードファーストJSSアプリでは、統合GraphQLクエリによるクエリの仕組みはSitecoreファーストアプリケーションと同じですが、実行すべきGraphQLクエリはJSSマニフェストに提供され、SitecoreアイテムのgraphQLQueryフィールドにインポートされます。

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

1.  コンポーネントのマニフェスト定義ファイルを特定します。例えば、/sitecore/definitions/components/MyComponent.sitecore.js。
    
2.  クエリ/sitecore/definitions/components/MyComponent.sitecore.graphqlを格納するための並列.graphqlファイルを作成します。
    
3.  コンポーネントのマニフェスト定義ファイルで、/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
     });
    };
    
    > !注クエリファイルをlintedできるようにGraphQLクエリを含めるためにreadFileSyncを使うことを推奨しますが、リテラル文字列の使用も可能です。解析されたGraphQLクエリAST( graphql-tagのgqlヘルパーを使ったもの)は許可 *されていません* 。