GraphQL support in the JSS Vue.js sample app

Version: 22.x

The sample application supports using Sitecore GraphQL to enable accessing content or other custom data schemas (for example, aggregating an existing set of backend REST services).

Sitecore GraphQL does not come with a disconnected mock service, so it can only operate with a JSS app running in connected, integrated, or headless application modes. If you require disconnected GraphQL functionality, graphql-tools has very powerful GraphQL mocking capabilities.

The remainder of this topic describes using GraphQL in connected mode.

Important

Do not confuse connected application mode with connected GraphQL.

The Vue sample app uses the @vue/apollo library, which in turn integrates with the Apollo GraphQL client. Follow the @vue/apollo documentation for usage and implementation details.

When server-side rendering (SSR), the sample app uses the prefetch functionality of @vue/apollo to prefetch GraphQL query data and render the app to HTML on the server. This allows SSR with the async results of GraphQL queries evaluated. If not using GraphQL, you can remove the @vue/apollo prefetching functionality.

Complete examples of using connected and integrated GraphQL are provided in the folder src/components and contain documentation comments. For example, src/components/GraphQL-ConnectedDemo shows you how to use connected GraphQL. Please refer to these samples for implementation details.

Do you have some feedback for us?

If you have suggestions for improving this article,