GraphQL query to fetch Site Settings item in Next JS application.

Use Case - This is a very common requirement where we need to keep some Site specific settings in Sitecore content tree underneath of Site root item. 

In Sitecore headless architecture these settings item won't be exposed to Layout service by default since this is not a part of any renderings but many renderings depend on these settings value.

Solution - We can expose the settings item to the front end application either by extending the JssGetLayoutServiceContext pipeline or directly through the GraphQL query from the front end application which is the easiest way of implementing it. 

Here we will cover the GraphQL approach and will discuss the other approaches in the upcoming blog.

Let's consider this site structure and suppose we have to fetch the highlighted Site Settings using GraphQL.

GraphQL Query - 

query SearchQuery(
  $pageSize: Int = 2
  $language: String = "en"
  $rootpath: String = "{F4C787E3-FE05-4211-BD62-1FA238E50A57}") {
  pageOne: search(
    where: {
      AND: [
        { name: "_path", value: $rootpath, operator: CONTAINS }
        {
          # Item based on Folder template, e.g., Page Components
          name: "_templates"
          value: "{5997305A-E98B-4EAB-9763-5F73CFCE84EC}"
        }
        { name: "_language" value: $language }
      ]
    }
    # defaults to 10
    first: $pageSize
  ) {
    total
    pageInfo {
      endCursor
      hasNext
    }
    results {
      id
      name
      ...SearchResultsItems
    }
  }
}
fragment SearchResultsItems on Item {
  fields {
    name
    jsonValue
  }
}

Query Parameters detail - 

$pageSize - The number of records to be fetched in a single call.

$language - The Site language parameter to fetch language specific result.

$rootpath - This is Site Root Item Id. In this example it is MySite Id.

_templates  - This is the Site Settings item template id.

GraphQL Query Output -