JSS GraphQL API

Version: 22.x

Sitecore JavaScript Rendering SDK (JSS) provides GraphQL services and clients to facilitate querying and updating data with GraphQL.

You can opt for using GraphQL when you set up your application with any of the Sitecore-provided tools for creating a JSS project.

Important

GraphQL requires connected mode, headless connected mode, or integrated mode to work. If using the disconnected mode, your application's service factories must return REST services because the disconnected development server only emulates REST services.

Data available for GraphQL querying

You can fetch the following types of data using GraphQL:

If you are using JSS for Next.js, the sample application leverages the GraphQL Sitemap Service to fetch the list of site pages using the Sitecore GraphQL API when statically generating and exporting the Next.js app.

GraphQL endpoints

JSS applications can use the following GraphQL endpoints:

Configuration

If you created your JSS application with any of the Sitecore-provided tools for creating a JSS project and chose GraphQL as your data fetching method, the JSS services use the Sitecore Edge Preview GraphQL endpoint.

To change the GraphQL endpoint used by your application:

  • In the root directory of the JSS application, in the package.json file, in the config map, find and update the graphQLEndpointPath property.

Using GraphQL in JSS applications

JSS apps offer several choices in terms of using GraphQL.

You can make direct HTTP requests to a Sitecore GraphQL endpoint, using your preferred GraphQL client library, as you would in a JavaScript application built without JSS. In sample JSS applications, this is referred to as Connected GraphQL in JSS apps.

The other option is to use the Integrated GraphQL in JSS apps, Here, the queries are executed within the Layout Service endpoint and the query results are merged into the JSON data returned in the Layout Service response.

Note

The terms connected and integrated in this context do not have any relation to application modes.

Do you have some feedback for us?

If you have suggestions for improving this article,