Sitecore JSS with Graphql

Using GraphQL with JSS

Before we get on to understanding what GraphQL is, let us remember JSS apps have several choices in terms of using GraphQL. So what exactly is GraphQL? It is a query language for your API's runtime that fulfills those queries with your existing data. It resembles SQL's best Select statement.

GraphQL provides a complete detail of the data in your API. It exactly returns the data, what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. Because GraphQL is a protocol, it also enables additional optimizations like query batching (multiple queries in a single HTTP request) that are impossible with a REST API.

• It actually retrieves the data that you need (exact data).
• It will get many resources in a single request.
• Describe what is possible with the type system.

Here’s a GraphQL approach to retrieve the data:

Query to get book data and its author data (And the other books):

Sitecore GraphQL API:

This is implemented on top of Sitecore using the GraphQL Server.

It is designed to be a common GraphQL service platform, not only a content API. You can access any data from the Sitecore server and present it via GraphQL queries. With the help of GraphQL subscription, GraphQL supports real time data.

Integrating GraphQL with Sitecore:

In order to set up, GraphQL, you need to setup API Key through the given path:

/sitecore/system/Settings/Services/API Keys folder for Sitecore 9.0

The API key was stored in the core database, but 9.1 and later versions have it stored in the master database at the above mentioned path.

Configuring GraphQL endpoint:

Sitecore GraphQL does not define any GraphQL endpoint. You must have to define at least one endpoint to use GraphQL API. In the below given example I have added one GraphQL endpoint in the Sitecore.Services.GraphQL.Content.Master.config patch file (belongs as a Sitecore config patch in App_Config/Include).

It can be accessed using the URL which is mentioned below:

http://domain name/sitecore/api/graph/items/master

To execute GraphQL queries it is much easier to use GraphQL GUI. You can access it by adding /ui at end of the url, which is mentioned below

http://domain name/sitecore/api/graph/items/master/ui

After hitting this URL, the GraphQL editor will open

Now, you can execute any graphql query which will return data in json format. For example:

Here, a graphql query has been written to retrieve the template id and all of its children from the Sitecore content tree.

Using GraphQL with JSS App:

JSS apps have several choices in terms of using GraphQL. With integrated GraphQL, layout service returns route data for specific components and can be modified into the result of a GraphQL query. With connected GraphQL, a JSS app makes direct HTTP requests to a Sitecore GraphQL endpoint.

By default, Sitecore GraphQL ships with two modes:

1. Integrated Mode
2. Connected Mode

Integrated Mode:

Integrated GraphQL, layout service return route data for specific components and can be modified into the result of a GraphQL query. By using integrated GraphQL, you can define a GraphQL query that defines data to frontend and receives the data query back.

This provides control to get the exact data which you need.