JSS GraphQL API
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.
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:
-
Layout data, using the GraphQL Layout Service provided by the JSS Layout API.
-
Dictionary data, using the GraphQL Dictionary Service provided by the JSS Dictionary API.
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:
-
The Sitecore Experience Edge for XM GraphQL endpoint. It comes with a read-only GraphQL schema designed to accommodate common front-end use cases for headless Sitecore development. Read about the Experience Edge schema.
-
Sitecore Edge Preview GraphQL endpoint provided by Headless Services, an implementation of a GraphQL server on top of Sitecore that mirrors the Experience Edge schema.
-
The Sitecore GraphQL Endpoint, the first-ever Sitecore GraphQL endpoint, introduced by JSS Server Components, or a custom endpoint created with the Sitecore GraphQL API.
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.jsonfile, in theconfigmap, find and update thegraphQLEndpointPathproperty.
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.
The terms connected and integrated in this context do not have any relation to application modes.