Playing with GraphQL Query with Sitecore Headless Next JS

Hello Everyone, In this blog let's try to understand some basic GraphQL query that we can use while working in Sitecore Headless Project. I just started learning GraphQL, so thought of sharing my learning with you with some practical scenario that we can encounter.In this blog we will see to fetch normal fields and Multilist field using GraphQL.

So Lets get straight to the Point. Imagine a scenario where we are reading Tiles component. We need to show list of Tile along with Tile Header. In this scenario, most of the time we will create a datasource item. That item will have two fields one will be Tile Header and another will be TilesList which will be a multilist field. Also on Top of that, if we want to get some data from Page Item(ex.Home page) like Page Title and Page Description, how we can use GraphQL to get all these datas.

Below images are representing the Sitecore CMS structure for the same.

TileList Datasource Item

Tile Item

Home Page Item

Now lets see how we can get this data from GraphQL

       
  query GetPageContent(
  $contextItem: String!
  $language: String!
  $datasource: String!
) {
  ParentItem: item(path: $contextItem, language: $language) {
    id
    path
    fields {
      name
      value
    }
    field(name: "PageTitle") {
      ... on TextField {
        value
      }
    }
  }
  Datasource: item(path: $datasource, language: $language) {
    ... on TileList {
      id
      fields {
        name
        value
      }
      field(name: "Tile Header") {
        ... on TextField {
          TileHeader: value
        }
      }
      Tilelistitems: field(name: "Tilelistitem") {
        ... on MultilistField {
          targetItems {
            ... on Tiles {
              Title : field(name: "Title") {
                ... on TextField {
                  value
                }
              }
              Image : field (name:"Image"){
                ... on ImageField{
                  value
                }
              }
              TileLink : field(name:"TileLink"){
                ...on LinkField{
                  value
                }
              }
            }
          }
        }
      }
    }
  }
}
	   
 

Query Parameter:

       
       {
       	    "contextItem" : "{this is path of contetxt Item}",
            "language" : "en",
            "datasource" : "{this is path of Datasource item}"
       }
	   
 

Results

       
  {
  "data": {
    "ParentItem": {
      "id": "8F18E3F786A66497553E83C78A00D47D",
      "path": "/sitecore/content/{Site Name}/Home",
      "fields": [
        {
          "name": "PageTitle",
          "value": "Welcome To GraphQL"
        },
        {
          "name": "PageDescription",
          "value": "Lets Play With GraphQL"
        }
      ],
      "field": {
        "value": "Welcome To GraphQL"
      }
    },
    "Datasource": {
      "id": "0FD32644D18D469596BC963F39ADE2A4",
      "fields": [
        {
          "name": "Tile Header",
          "value": "Tile Header"
        },
        {
          "name": "Tilelistitem",
          "value": "{36DBB5B9-4B9F-489F-A5B7-88BCB4C23942}|{A624504F-F6A6-4882-9B8E-C763DD85684B}"
        }
      ],
      "field": {
        "TileHeader": "Tile Header"
      },
      "Tilelistitems": {
        "targetItems": [
          {
            "Title": {
              "value": "Tile1"
            },
            "Image": {
              "value": "<image mediaid=\"{04DAD0FD-DB66-4070-881F-17264CA257E1}\" />"
            },
            "TileLink": {
              "value": ""
            }
          },
          {
            "Title": {
              "value": "Tile2"
            },
            "Image": {
              "value": "<image mediaid=\"{04DAD0FD-DB66-4070-881F-17264CA257E1}\" />"
            },
            "TileLink": {
              "value": "<link text=\"Google\" linktype=\"external\" url=\"https://www.google.com\" anchor=\"\" target=\"_blank\" />"
            }
          }
        ]
      }
    }
  }
}
	   
 

Let's try to understand the query.We are passing 3 paramters, contextItem = Home Item path , dataource = Datasource Item Path , language = language of the Item.

Then we are creating alias called ParentItem which holds the data for reading field value from Home Item.We are reading PageTitle by applying Type Safe(... on TextField : ensuring the field is of type text) textfield to get the value.

Then we are creating alias called Datasource which holds the data for reading field value from Datasource Item. While reading Datasoure Item we are doing Type Safe on template name (... on Tilelist). For Multilistfield we need to use TargetItem for referencing the list item. Then again doing Type Safe check on Template Name (... on Tiles). Then we are reading the fields of the list item

Refer below screenshot for Query Variable

Hope you enjoyed the blog. Will back with some more GraphQL queries that I will learn during my work in Sitecore Headless NextJS

Thanks for reading. Happy Sitecoring!! Happy Learning.!!