Sitecore 10.2 — Exploring GQL — Experience Edge

I installed Sitecore 10.2 the other day to deep dive into Sitecore JSS, my favorite, the headless development. Today I will show how to enable different GQL endpoints as well as to explore them via Graphiql (UI). Let’s do that.

After completing the installation, Sitecore 10.2 by default enables the “edge preview endpoint”. If you type this URL into the browser: “https://[sitecorehost]/sitecore/api/graph/edge/ui”, you will see something like this:

Those who did work with GQL, clearly recognize this UI. Yes, it’s a GQL playground application. You can play with the GQL query here and also it will allow you to explore the schema and so on. The first problem here I can see is, it’s not connected properly to the Sitecore. You will see it says “Server cannot be reached” on the right side.

If we expand the network tab, we would have seen an error message like this:

Yes, we just need to pass an API key to access the URL. The easiest way to do that is to use the “ModHeader” browser plugin like this:

This will enable to access the “edge preview endpoint”. Let’s refresh the browser now. We can see below, it’s now working fine and we will be able to make queries with the below schemas

Cool. So, we can test the query, as well as, we can explore the schema, etc.

If we need the same for items of master/core or web, it’s also possible. Sitecore 10.2 provides out-of-the-box those configurations, we just need to enable them to use. If we go to “\App_Config\Sitecore\Services.GraphQL” directory, we will see those configurations. I enabled the master from the below image

Since master is enabled, we will be able to make queries to master via the GQL. Let me show the configuration of “master” here:

The highlighted one is the endpoint. So the GQL endpoint would “https://[host]/sitecore/api/graph/items/master”. To access the endpoint via the UI, we need to use the “ui” suffix as “https://[host]/sitecore/api/graph/items/master/ui”. That’s it. Now we will be able to access the GQL endpoint for master.

Last but not least, you would have noticed that master UI is not working by saying, “Authentication is required”. We can disable this authentication or any API key requirement from the “Sitecore.Services.GraphQL.config”. My setting is like this:

It says, requireAuthentication = false but requireApiKey = true. This means, you do not need to be an authenticated user to access that endpoint but need an API key. That’s all. After this we will be able to query to master as below:

This is very important as JSS is hitting the market quite hard and MACH (Microservices, API-first, Cloud-native, and Headless) pattern/concept/practice is getting so popular nowadays. I would say, if you want to explore the JSS, it’s important to understand and debug the GQL queries and explore the schemas which won’t be possible without these.

That’s all for today.

Cheers

Arif