---
title: "JSS ReactサンプルアプリにおけるGraphQLサポート"
slug: "graphql-support-in-the-jss-react-sample-app"
abstract: "JSS ReactアプリケーションにおけるGraphQLのサポートと制限の説明。"
---
# JSS ReactサンプルアプリにおけるGraphQLサポート

サンプルアプリケーションは、コンテンツや他のカスタムデータスキーマへのアクセス(例えば、既存のバックエンドRESTサービスの集約)を可能にするために、Sitecore GraphQLの使用をサポートしています。

Sitecore GraphQLは切断されたモックサービスを搭載していないため、[接続](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/start-a-jss-app-in-connected-mode.html "Start a JSS app in connected mode")、[統合](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/start-a-jss-app-in-integrated-mode.html "Start a JSS app in integrated mode")、[またはヘッドレス](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/headless-server-side-rendering-mode.html "Headless server-side rendering mode") のアプリケーションモードで動作するJSSアプリでのみ動作可能です。切断されたGraphQL機能が必要な場合は、[GraphQL-Tools](https://github.com/apollographql/graphql-tools)が非常に強力なGraphQLモッキング機能を備えています。

このトピックの残りの部分では、接続モードでGraphQLを使用する方法について説明します。

> !重要接続型アプリケーションモードと [接続型GraphQL](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/connected-graphql-in-jss-apps.html "Connected GraphQL in JSS apps")を混同しないでください。

Reactサンプルアプリは[Apollo GraphQLクライアント](https://www.apollographql.com/client)を使用しています。ApolloGraphQLクライアントを使用するには、使用方法や実装の詳細については[react/apollo](https://www.apollographql.com/docs/react/)ドキュメントに従いますが、graphql高階成分(HOC)を使う代わりに、JSS固有のGraphQLDataHOCを使用してください。このサービスはApolloと同じAPIを持ちますが、Sitecoreと互換性を持つためにJSS固有の操作を行います。

接続型および統合型GraphQLの完全な例はフォルダsrc/componentsに掲載されており、ドキュメントコメントも含まれています。例えば、[src/components/graphql/GraphQL-ConnectedDemoは接続GraphQL](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/connected-graphql-in-jss-apps.html "Connected GraphQL in JSS apps")の使い方を示しています。実装の詳細についてはこれらのサンプルを参照してください。