Mastering Sitecore and GraphQL: A Guide to Querying Fields with Spaces

Mastering Sitecore and GraphQL: A Guide to Querying Fields with Spaces

Introduction

When I was developing my iOS App to connect to Sitecore Headless feature. I found a problem. The problem was that one of the items in Sitecore, the Question item, had a field that had spaces in it. I was not sure how to construct a GraphQL query in order to display the field item "Question Text" in GraphQL. So I decided to write a blogpost about this so people could benefit from my findings. Always making coders life a little bit easier on this planet. 

The Problem

Let me just show you the problem in order to see if you have a similar issue or not. I have Sitecore items I created a Question item. In the following image;

Here we see that the Question 1 from Basic Math Quiz has a field name Question Text. You can see that Question Text is a common name in Sitecore and most of the time people use spaces to create content. We can also see that this is a custom field, because it is intended for this specific template, the Question template, 

In  order to get the Question Text working on GraphQL we need to construct a query. The query should include the field or any other fields that are pertinent to the query we are trying to find. So let's continue and let's see how we should build the query in order to get what we want.

The Solution

I will give an example of the query I need to place in postman to demonstrate how to use it. Then with this example you can tailor it to your needs. I recommend you to see this post . It shows how to solve the error when you cannot query field id but you can use it to understand what I am going to do next.

After you read that post you will know the whole context of GraphQL and Sitecore Headless features. The query I craft to get the "Question  Text" field in postman is:

  query {
  item(path: "/sitecore/content/HeadlessApp/Content/Quizzes/Math/Basc Math Quiz/Question 1", language: "en") {
    id,
    field(name: "Question Text") {
      value
    },
    children {
      results {
        id,
        name
      }
    }
  }
}
 

This is what you should post on Postman when you select the GraphQL radio button. 

Line 1 is how you start any GraphQL query

Line 2 is the item path you are looking for , so in this case the root item of your query.

Line 3 is the id , the value that should be return after we send a POST request

Line 4 is how you use a custom field, you need to put as is field(name: "Field Name with any spaces you want"

Line 5 is the value, so it returns the value of the field, in this case it will return "What is the largest organ in the human body?" as you saw on the image above

Lines 7 to 10 are the children of the root item. You can check here to see why is it done that way. 

So when I send the post request what I see in Postman is:

  {
    "data": {
        "item": {
            "id": "2B8D6FC503344210976157F582817787",
            "field": {
                "value": "What is the largest organ in the human body?"
            },
            "children": {
                "results": [
                    {
                        "id": "DBA363AA313A4FD2B47DDCB99F54A8C6",
                        "name": "Heart"
                    },
                    {
                        "id": "6560C6B0A4B74522822D26D20A6960CC",
                        "name": "Liver"
                    },
                    {
                        "id": "96451441275C437C92F853232C4DFB48",
                        "name": "Lungs"
                    },
                    {
                        "id": "B9018FA3372A43C997C7A705AEAC2427",
                        "name": "Skin"
                    }
                ]
            }
        }
    }
}  

Which is a JSON representation of the items. I have the Question Text and its choices. And that's how you can query custom fields in Sitecore when using GraphQL,

Conclusion

In conclusion, there is a way to get the SItecore fields when they have spaces in a GraphQL query. Doing this enables you to get any kind of field and structure your application as it fits your needs. Its really awesome when you encounter the power of a headless application because you receive JSON and then display the JSON as needed. I hope this helped you solve your problems if you had any,