---
title: "JSS Vue.jsサンプルアプリでのGraphQLサポート"
slug: "graphql-support-in-the-jss-vue-js-sample-app"
abstract: "JSS Vue.jsアプリケーションにおけるGraphQLサポートと制限の説明。"
---
# JSS Vue.jsサンプルアプリでの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")を混同しないでください。

Vueのサンプルアプリは [@vue/apollo](https://v4.apollo.vuejs.org/)ライブラリを使用し、さらに[Apollo GraphQLクライアント](https://www.apollographql.com/client)と連携しています。使用方法や実装の詳細は @vue/apolloドキュメントに従ってください。

サーバー側レンダリング(SSR)では、サンプルアプリは@vue/apolloのprefetch機能を使ってクエリデータをプリフェッチし、サーバー上でHTML GraphQLアプリをレンダリングします。これにより、GraphQLクエリの非同期結果を評価したSSRが可能になります。GraphQLを使わない場合は、@vue/apolloプリフェッチ機能を解除できます。

接続型および統合型GraphQLの完全な例はフォルダsrc/componentsに掲載されており、ドキュメントコメントも含まれています。例えば、[src/components/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")の使い方を示しています。実装の詳細についてはこれらのサンプルを参照してください。