GraphQL for (Headful) Sitecore

You know how the United States space program back in the 1960s gave us a bunch of cool new technologies that wound up the hands of normal people? Memory foam! Baby formula! Pens that write upside down!

Well, our friends at Sitecore have been hard at work at their own space program, in the form of headless capability for our favorite CMS. And just like the United States space program, we commoners get to benefit! Just like how very few of us will wind up in space, probably about the same number are actually implementing headless sites on Sitecore at the moment. That doesn’t mean we can’t use some of the cool technologies though!

The big piece of tech that drives the headless revolution for Sitecore is the GraphQL API - and best part is, you can use it without having to go headless! You can read all about GraphQL on https://graphql.org but here’s how they describe it:

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

In a nutshell, that means GraphQL is a query language for data - and what does Sitecore have a lot of? Data!

For years and years we’ve had the Sitecore Item Service (and before that the SOAP-based Sitecore Web Service) as an API endpoint to work with Sitecore items. GraphQL brings us a new one - and arguably a much more powerful one.

Why GraphQL is Cool

• GraphQL is typed. That means it knows the difference between a string and a number and a boolean (cough JavaScript cough) and you’ll get the data back that you expect or some major errors.
• GraphQL is a language. You can use variables, parameters, and even customize to your heart’s desire.
• GraphQL is efficient. Since you’re specifying what you want and it supports multiple simultaneous queries, you can execute one request to get back exactly what you want in the shape that you want, rather than making multiple calls back to back using the result of one call to use in the next.

Sample GraphQL Query

Here’s a GraphQL query labeled MyQuery that fetches the default “Sitecore Betty” home item and pulls the relevant data. Here I’m asking for the item ID, the display name, the database it’s in, and whether the icon field (the little blue house that shows in content editor) is using a standard value. Additionally, since this home item is using a custom template called “Sample Item”, I want the “Title” field off of that item.

query MyQuery {
  item(path: "/sitecore/content/Home") {
    id
    displayName
    database
    icon: field(name: "__Icon") {
      containsStandardValue
    }
    ... on SampleItem {
      title {
        value
      }
    }
  }
}

And here’s the response:

{
  "data": {
    "item": {
      "id": "110D559FDEA542EA9C1C8A5DF7E70EF9",
      "displayName": "Home",
      "database": "master",
      "icon": {
        "containsStandardValue": false
      },
      "title": {
        "value": "Sitecore Experience Platform"
      }
    }
  }
}

The structure looks pretty similar to the query, right? That’s not an accident. The shape of the response matches the shape of the query.

Sitecore GraphQL API

The Sitecore GraphQL API adds some additional goodies on top of the regular GraphQL goodness. Since this is what drives headless services, it runs as a layer on top of the item provider, and therefore is able to automatically generate types. That “Sample Item” template in the sample query above? I didn’t do anything to make that happen. Sitecore knew that was a template and automatically generated the type under the covers. Additionally, since this is intended to drive all the things for a headless site, it’s performant and secure with caching and whitelisting and authorization. Lots of fun stuff.

Lots more info about the Sitecore GraphQL API in the Sitecore documentation here: https://doc.sitecore.com/xp/en/developers/101/sitecore-experience-manager/sitecore-graphql-api.html

Give it a go and see if you can use it in your next headful Sitecore project!