--- title: "JSS GraphQL API" slug: "jss-graphql-api" abstract: "JSSアプリのSitecore GraphQLエンドポイントを利用するためのインフラストラクチャの概要" --- # JSS GraphQL API Sitecore JavaScriptレンダリングSDK(JSS)は、GraphQLとのクエリや更新を促進するためのGraphQLサービスやクライアントを提供します。 JSSプロジェクトを作成するためにSitecore提供のツールでアプリケーションを設定する際に、GraphQLを使うことができます。詳細については、[jss createのJSS CLIドキュメント](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-javascript-rendering-sdk-cli-tools-api-reference.html#UUID-ba8bae12-5938-63d2-1ae1-451aec88abe5_UUID-63ee54c7-6c40-bc5a-0db9-0be674e71aa0 "jss create")および『[JSSアプリケーション開発](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/developing-jss-applications.html "Developing JSS applications")ガイド』をご覧ください。 > !重要GraphQLは動作するために接続モード、ヘッドレス接続モード、または統合モードが必要です。切断モードを使用する場合、アプリケーションのサービスファクトリーはRESTサービスを返す必要があります。なぜなら、切断された開発サーバーはRESTサービスのみをエミュレートするためです。 ## GraphQLクエリ用に利用可能なデータ GraphQLを使えば、以下の種類のデータを取得できます: - レイアウトデータ。[JSSレイアウトAPI](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/jss-layout-api.html "JSS Layout API")が提供する[GraphQLレイアウトサービスを使用します](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/fetch-layout-data-with-the-jss-graphql-layout-service.html "Fetch layout data with the JSS GraphQL Layout Service")。 - 辞書データ。[JSS辞書API](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/jss-dictionary-api.html "JSS Dictionary API")が提供する[GraphQL辞書サービスを利用し](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/fetch-dictionary-data-with-the-jss-graphql-dictionary-service.html "Fetch dictionary data with the JSS GraphQL Dictionary Service")ています。 JSS for Next.jsを使用している場合、サンプルアプリケーションは[GraphQL Sitemap Service](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/preparing-the-list-of-pages-for-static-generation-or-export-in-jss-next-js-apps.html "Preparing the list of pages for static generation or export in JSS Next.js apps")を利用して、Sitecore GraphQL APIを使ってサイトページのリストを取得し、Next.jsアプリを静的に生成・エクスポートします。 ## GraphQLのエンドポイント JSSアプリケーションは以下のGraphQLエンドポイントを使用できます: - [Sitecore Experience Edge for XM](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-experience-edge-for-xm.html "Sitecore Experience Edge for XM") GraphQLエンドポイントです。ヘッドレスSitecore開発の一般的なフロントエンドのユースケースに対応するために設計された読み取り専用のGraphQLスキーマが付属しています。[Experience Edgeスキーマ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/the-experience-edge-schema.html "The Experience Edge schema")についてお読みください。 - [Sitecore Edge Preview GraphQLエンドポイントはHeadless Servicesが提供](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-experience-edge-for-xm-preview-graphql-endpoint.html "Sitecore Experience Edge for XM Preview GraphQL endpoint")しており、Sitecoreの上にGraphQLサーバーを搭載し、Experience Edgeスキーマをミラーリングしています。 - [Sitecore GraphQL Endpoint](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-graphql-api.html "Sitecore GraphQL API")は、JSS Server Componentsによって導入された初のSitecore GraphQLエンドポイント、または[Sitecore GraphQL API](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-graphql-api.html "Sitecore GraphQL API")で作成されたカスタムエンドポイントです。 ## 構成 Sitecore提供されているツールのいずれかでJSSプロジェクトを作成するためのツールでJSSアプリケーションを作成し、\--fetchWith GraphQLパラメータを使用した場合、JSSサービスは[Sitecore Edge Preview GraphQLエンドポイント](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-experience-edge-for-xm-preview-graphql-endpoint.html "Sitecore Experience Edge for XM Preview GraphQL endpoint")を使用します。 アプリケーションで使用されるGraphQLエンドポイントを変更するには: - JSSアプリケーションのルートディレクトリ、 package.json ファイルの config マップで、 graphQLEndpointPath プロパティを見つけて更新してください。 ## JSSアプリケーションにおけるGraphQLの利用 JSSアプリはGraphQLの利用に関していくつかの選択肢を提供しています。 JSSなしで構築されたJavaScriptアプリケーションと同様に、Sitecore GraphQLエンドポイントに対して、GraphQLクライアントライブラリを使って直接HTTPリクエストを行うことができます。サンプルJSSアプリケーションでは、これを[JSSアプリでConnected GraphQL](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/connected-graphql-in-jss-apps.html "Connected GraphQL in JSS apps")と呼びます。 もう一つの選択肢は [、JSSアプリで統合されたGraphQL](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/integrated-graphql-in-jss-apps.html "Integrated GraphQL in JSS apps")を使用することです。ここでは、クエリはレイアウトサービスエンドポイント内で実行され、クエリ結果はレイアウトサービス応答で返されるJSONデータに統合されます。 > !注ここでの*「接続*」「*統合*」という用語は[、アプリケーションモード](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/application-modes.html "Application modes")とは関係*ありません*。