Part 2: Common GraphQL Queries for Sitecore XM Cloud: Advanced Techniques for Powerful Site Building

Hi All,

In the previous blog posts, we covered the fundamentals. Now, let’s delve a bit deeper into the topic.

6. Multi-Level Content Hierarchy Query

When you need to fetch both parent and child items, this nested query is the solution. It’s useful for creating full navigation menus that show both main items and sub-pages.

query ContextItemChildren($contextItem: String!, $language: String!) {
  contextItem: item(path: $contextItem, language: $language) {
    children {
      results {
        id
        PageTitle: field(name: "PageTitle") {
          value: jsonValue
        }
        children {
          results {
            id
            PageTitle: field(name: "PageTitle") {
              value: jsonValue
            }
          }
        }
      }
    }  
  }
}

When to use:

• Building multi-level navigation menus with dropdowns
• Generating breadcrumb trails with multiple levels
• Building category/subcategory product listings

Example Variables:

{
  "contextItem": "/sitecore/content/MyProject/Home",
  "language": "en"
}

7. Template-Specific Content Query

In this query, we’re using fragments to access fields specific to templates. This ensures type safety and allows you to build reusable components for different content types.

query GetTypedContent($itemPath: String!, $language: String!) {
  item(path: $itemPath, language: $language) {
    id
    name
    template {
      id
      name
    }
    ... on Page {
      pageTitle: field(name: "PageTitle") {
        value
      }
      metaDescription: field(name: "MetaDescription") {
        value
      }
    }
  }
}

When to use:

• Building reusable queries for different templates
• Creating generic content components
• Displaying different fields per content type

Example Variables:

{
  "itemPath": "/sitecore/content/MyProject/Home/About",
  "language": "en"
}

8. Multi-Template Content Handler Query

This advanced query combines multiple template types in one request using GraphQL fragments. It’s useful when you’re building flexible components that need to handle different content types (like BlogPost, ProductPage, etc.).

query GetContentByType($itemPath: String!, $language: String!) {
  item(path: $itemPath, language: $language) {
    id
    name
    template {
      id
      name
    }
    ... on BlogPost {
      title: field(name: "Title") {
        value
      }
      publishDate: field(name: "PublishDate") {
        value
      }
      author: field(name: "Author") {
        value
      }
    }
    ... on ProductPage {
      productName: field(name: "ProductName") {
        value
      }
      price: field(name: "Price") {
        value
      }
      sku: field(name: "SKU") {
        value
      }
    }
    ... on ContactPage {
      address: field(name: "Address") {
        value
      }
      phone: field(name: "Phone") {
        value
      }
      email: field(name: "Email") {
        value
      }
    }
  }
}

When to use:

• Building universal content components
• Implementing content listings with mixed template types
• Building search results that adapt to content types

Example Variables:

{
  "itemPath": "/sitecore/content/MyProject/Blog/MyBlogPost",
  "language": "en"
}

9. Component Datasource Query

When components are using separate content items for data (like a text block or image), this query helps retrieve component-specific data by item ID.

query GetComponentDatasource($datasourceId: String!, $language: String!) {
  datasource: item(id: $datasourceId, language: $language) {
    id
    name
    template {
      id
      name
    }
    ... on TextBlock {
      heading: field(name: "Heading") {
        value
      }
      content: field(name: "Content") {
        value
      }
    }
    ... on ImageContent {
      image: field(name: "Image") {
        value
        jsonValue
      }

I hope you enjoy this Sitecore blog. Stay tuned for more Sitecore related articles.

Till that happy Sitecoring :)

Please leave your comments or share this article if it’s useful for you.

Part 1: Common GraphQL Queries for Sitecore XM Cloud: A Developer’s Guide — Basic Queries to Level Up Your Skills

 Introduction

As Sitecore shifts toward headless architecture with XM Cloud, combining it with GraphQL unlocks a world of possibilities for building fast, flexible experiences. GraphQL’s ability to request exactly the data you need is an ideal match for modern frameworks like React, Next.js, and other front-end technologies.

In this blog, we’ll explore some of the most essential GraphQL queries that Sitecore developers use daily. We’ll start simple, focusing on fetching single items, and move to more advanced patterns for handling lists, navigation, and multilingual content. These queries have been production-tested, ensuring that they’re ready to be used in your own projects.

1. Get Item by Path Query

This is one of the simplest queries in Sitecore GraphQL. It’s useful when you know the exact content tree path of an item and want to retrieve its data.

query GetItemByPath($path: String!, $language: String!) {
  item(path: $path, language: $language) {
    id
    name
    displayName
    path
    template {
      id
      name
    }
    fields {
      name
      value
    }
  }
}

When to use:

• Building navigation menus
• Fetching page content by route
• Loading specific content items

Example Variables:

{
  "path": "/sitecore/content/MyProject/Home",
  "language": "en"
}

2. Get Item by ID Query

If you have an item GUID, using an ID-based query is more efficient than a path-based query. Since GUIDs are unique across the entire Sitecore instance, this method ensures you’re targeting the exact item.

query GetItemById($id: String!, $language: String!) {
  item(id: $id, language: $language) {
    id
    name
    displayName
    path
    fields {
      name
      value
      jsonValue
    }
  }
}

When to use:

• Retrieving datasource items for components
• Following field references

Example Variables:

{
  "id": "{11111111-1111-1111-1111-111111111111}",
  "language": "en"
}

3. Basic Field Values Query

Accessing individual fields is essential in Sitecore. Here’s a basic example of how to fetch various field types.

query GetItemFields($itemPath: String!, $language: String!) {
  item(path: $itemPath, language: $language) {
    id
    name
    fields {
      name
      value
      definition {type}
    }
    title: field(name: "Title") {
      value
      definition {type}
    }
    description: field(name: "Description") {
      value
      definition {type}
    }
  }
}

When to use:

• Retrieving fields like “Title” and “Description”
• Displaying text fields

Example Variables:

{
  "itemPath": "/sitecore/content/MyProject/Home",
  "language": "en"
}

4. Structured Field Data Query

This query is useful for fields with more complex structures, such as images, links, or rich text content.

query GetStructuredFields($itemPath: String!, $language: String!) {
  item(path: $itemPath, language: $language) {
    heroImage: field(name: "HeroImage") {
      value
      jsonValue
    }
    ctaLink: field(name: "CTALink") {
      value 
      jsonValue
    }
    bodyContent: field(name: "BodyContent") {
      value
    }
  }
}

When to use:

• Building components that need image dimensions and alt text
• Creating buttons/links with proper href, text, and target attributes
• Displaying rich text content with HTML formatting

Example Variables:

{
  "itemPath": "/sitecore/content/MyProject/Home",
  "language": "en"
}

5. Child Items Navigation Query

This query fetches all child items of a specified parent and is commonly used for building navigation menus, content listings, or displaying child pages under a parent.

query ContextItemChildren($contextItem: String!, $language: String!) {
  contextItem: item(path: $contextItem, language: $language) {
    children{
      results{
        id
        PageTitle: field(name: "PageTitle") {
          value: jsonValue
        }
      }
    }  
  }
}

When to use:

• Creating breadcrumb navigation
• Generating sitemaps or content hierarchies
• Building folder-based content listings

Example Variables:

{
  "contextItem": "/sitecore/content/MyProject/Home",
  "language": "en"
}

I hope you enjoy this Sitecore blog. Stay tuned for more Sitecore related articles.

Till that happy Sitecoring :)

Please leave your comments or share this article if it’s useful for you.