---
title: "JSSアプリで統合されたGraphQLを使う"
slug: "use-integrated-graphql-in-a-jss-app"
abstract: "レイアウトデータをカスタマイズするために統合されたGraphQLクエリを活用してください"
---
# JSSアプリで統合されたGraphQLを使う

Sitecoreレイアウトサービスがページをレンダリングすると、ページのレイアウトと各コンポーネントのデータのJSON表現を返します。通常、コンポーネントデータはSitecoreのデータソース項目のフィールドの集合です。Integrated GraphQLを使えば、これをGraphQLクエリ結果に再構成できます。

統合GraphQLを使用する方法:

1.  クエリしたいスキーマを持つ [Sitecore GraphQL APIエンドポイント](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-graphql-api.html "Sitecore GraphQL API") を定義します。まずこれを動作させ、GraphiQL($endpointUrl/ui)を使ってスキーマを調整して動作を確認します。一般的に、エンドポイントはJSSアプリのconfig patchファイル(JSSアプリの /sitecore/config に保存されていますが、Sitecoreにも保存可能です)を使って定義されます。
2.  JSSアプリをGraphQLエンドポイントにアタッチします。JSS <app> 定義に、エンドポイントのURLを指す graphQLEndpoint プロパティを追加します。例えば、 <app name="MyJssApp" graphQLEndpoint="/sitecore/api/jssbasicapp" />。

Sitecore優先のアプリや [コード先のアプリ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/customize-layout-data-with-integrated-graphql-queries-in-code-first-jss-apps.html "Customize layout data with Integrated GraphQL queries in code-first JSS apps")でも、Integrated GraphQLを利用できます。