--- title: "JSSアプリにおける統合GraphQL" slug: "integrated-graphql-in-jss-apps" abstract: "GraphQLクエリを使ってコンポーネントのレイアウトサービスの出力を修正します。" --- # JSSアプリにおける統合GraphQL 統合GraphQLでは、レイアウトサービスが特定のコンポーネントに対して返すレイアウトデータ形式を、GraphQLクエリの結果として変更できます。つまり、フロントエンドコンポーネントに必要なデータを定義するGraphQLクエリを定義し、そのクエリからプロパティ(Reactコンポーネントのprops.fieldsなど)としてデータを受け取ることができます。これにより、受け取るデータをコントロールでき、子項目やCRMデータなどの高度なデータソースが必要な場合にはGraphQLの力を活用できます。 > !重要Sitecore Accelerateレシピ「 [コンポーネント固有のデータの取得](https://developers.sitecore.com/learn/accelerate/xm-cloud/implementation/external-data-integration/getting-component-specific-data#integrated-graphql) 」には、コンポーネント固有のデータ取得に関する追加の文脈が含まれており、使用する方法を選ぶ際に考慮すべき点も含まれています。 コンテンツエディターでは、統合GraphQLクエリが**GraphQL** GraphQLフィールドのレンダリングに付加されており、以下の2つの*Link List*および*Title*コンポーネントの例に示されています。 ![A Link List component rendering in Content Editor, displaying a sample integrated GraphQL query.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/jss-integrated-gql-example-link-list.png) ![A Title component rendering with another sample integrated GraphQL query.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/integrated-graphql-in-content-sdk-apps-title.png) 以下の場合に [統合されたGraphQLの使用](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/use-graphql-to-fetch-component-level-data-in-jss-next-js-apps.html#UUID-7d09d0ec-844d-b60f-20cb-94ced8eae536_section-idm234579944384082) を推奨します: - あなたのコンポーネントはGraphQLスキーマ内のデータソーステンプレートフィールド以上のデータを必要とします。 - データソーステンプレートには、レンダリングしたくない追加のフィールドが含まれています。 - Apolloのようなクライアント側GraphQLライブラリは使いたくありません。統合型GraphQLはJSS以外の依存関係を必要としません。 以下の場合、統合GraphQL*の使用を避ける* ことをお勧めします: - コンポーネントはコンテンツテンプレートのフィールドデータのみを使用します。デフォルトのレイアウトデータ出力で十分で、GraphQLを必要としません。 - あなたのGraphQLクエリはパフォーマンスが良くありません。例えば、複数のREST APIコールを舞台裏で集約します。統合GraphQLは、すべてのレイアウトクエリが完了するまでアプリのレンダリングをブロックします。 初期レイアウトレンダリング後まで長時間実行されるクエリを延期するために [、代わりにConnected GraphQLを使う](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/use-graphql-to-fetch-component-level-data-in-jss-next-js-apps.html#UUID-7d09d0ec-844d-b60f-20cb-94ced8eae536_section-idm234595448546168) ことをお勧めします。 - コンポーネントは状態の変化に応じて追加のGraphQLクエリを発行しなければなりません。統合クエリはレイアウトデータが読み込まれた場合にのみ実行されます。 - コンポーネントはミューテーション(更新)やサブスクリプション(リアルタイムデータ)を実行しなければなりません。統合されたGraphQLでは、クエリのみ実行できます。 - ページ付けやカーソル(例えばpageInfo.endCursor)を使う必要があります。 統合されたGraphQLクエリは、プレビューエンドポイントに対して公開時に実行されます。カーソル値は動的かつエンドポイント固有のため、同じクエリでも公開時と実行時に異なるカーソルを返すことがあります。 このユースケースでは代わりに[Connected GraphQLの使用](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/use-graphql-to-fetch-component-level-data-in-jss-next-js-apps.html#UUID-7d09d0ec-844d-b60f-20cb-94ced8eae536_section-idm234595448546168) をお勧めします。 統合GraphQLクエリを使用する場合、defaultおよびjssレイアウトサービス構成において、$datasource、 $contextItem、$languageの値を自動で注入します。