---
title: "Query examples"
slug: "query-examples"
abstract: "Example queries to query items in Experience Edge for XM."
---
# Query examples

This topic describes some examples of how to query the Experience Edge GraphQL schema to meet common query needs.

> [!important]
> Most of the example queries in this topic are derived from the Styleguide sample site. Item IDs and paths will vary by import/solution.

> [!important]
> If your site supports a fallback language, [enable publishing language fallback](https://doc.sitecore.com/xp/en/developers/hd/19/sitecore-headless-development/enable-publishing-language-fallback.html "Enable publishing language fallback") on the Experience Edge Connector before you start.

<details>
<summary><h2>Get an item by ID or path</h2></summary>

You can query items anywhere in your content tree by path or ID to read their fields and other properties. You can use inline fragments to cast items to their projected data template type and fields to their field type.

### Query { .notintoc }

```graphql
query {
  # path can be an item tree path or GUID-based id
  item(path: "/sitecore/content/Experience-Edge/home", language: "en") {
    # items can be cast to a Template type with inline fragments
    ... on AppRoute {
      pageTitle {
        value
      }
    }
    # fields can be cast to a Field type with inline fragments
    field(name: "pageTitle") {
      ... on TextField {
        value
      }
    }
  }
}

```

### Result { .notintoc }

```json
{
  "data": {
    "item": {
      "pageTitle": {
        "value": "Welcome to Sitecore JSS"
      },
      "field": {
        "value": "Welcome to Sitecore JSS"
      }
    }
  }
}

```

</details>

<details>
<summary><h2>Get items filtered by multiple paths</h2></summary>

You can filter items based on multiple paths. This query example assumes the following site structure:

![Content tree highlighting the items used in this example.](https://doc.sitecore.com/api/markdown-image/xp/en/developers/hd/19/sitecore-headless-development/images/site-structure.png)

Assume that the `/home/graphql` and `home/styleguide/Page Components` items have the UUIDs `0C6F4AAF-DD7E-5FAF-B9B0-61070D496055` and `AB99BA2B-B606-51E3-BAD9-FD8358DE1333`, respectively. You want to get the `/home` items and descendants that are not `/home/graphql` and `home/styleguide/Page Components` or their children. The following query uses the `NCONTAINS` operator to exclude the path of these items and their children from the result.

### Query { .notintoc }

```graphql
query {
  pageOne: search(
     where: {
       AND: [
         {
           name: "_path"
           value: "54C8E9B5-0B2C-5363-8FA6-D32A3A302F51"
           operator: CONTAINS
         }
         {
           AND: [
             {
               name: "_path"
               value: "0C6F4AAF-DD7E-5FAF-B9B0-61070D496055"
               operator: NCONTAINS
             }
             {
               name: "_path"
               value: "AB99BA2B-B606-51E3-BAD9-FD8358DE1333"
               operator: NCONTAINS
             }
           ]
         }
       ]
     }
     # defaults to 10
     first: 10
   ) {
     total
     pageInfo {
       endCursor
       hasNext
     }
     results {
       url {
         path
       }
     }
   }
 }

```

### Result { .notintoc }

The search query result does not contain items with the paths `/home/graphql` and `home/styleguide/Page Components` or any of their descendants but returns the `/home` item and the remaining child items.

```json
{
  "data": {
    "pageOne": {
      "total": 5,
      "pageInfo": {
        "endCursor": "NQ==",
        "hasNext": false
      },
      "results": [
        {
          "url": {
            "path": "/styleguide/custom-route-type"
          }
        },
        {
          "url": {
            "path": "/styleguide"
          }
        },
        {
          "url": {
            "path": "/Page-Components/home-jss-main-ContentBlock-1"
          }
        },
        {
          "url": {
            "path": "/Page-Components"
          }
        },
        {
          "url": {
            "path": "/"
          }
        }
      ]
    }
  }
}

```

</details>

<details>
<summary><h2>Get item layout for a URL</h2></summary>

Most often used with Headless SDKs, you can find items by their site name and HTTP URL and then obtain their Layout Service output for rendering by framework-specific Sitecore placeholder implementations.

### Query { .notintoc }

```graphql
query {
  layout(site: "experienceedge", routePath: "/", language: "en") {
    item {
      rendered
    }
  }
}

```

### Result { .notintoc }

```json
{
  "data": {
    "layout": {
      "item": {
        "rendered": {
          "sitecore": {
            "context": {
              "pageEditing": false,
              "site": {
                "name": "experienceedge"
              },
              "pageState": "normal",
              "language": "en",
              "itemPath": "/"
            },
            "route": {
              "name": "home",
              "displayName": "home",
              "fields": {
                "pageTitle": {
                  "value": "Welcome to Sitecore JSS"
                }
              },
              "databaseName": "web",
              "deviceId": "fe5d7fdf-89c0-4d99-9aa3-b5fbd009c9f3",
              "itemId": "2bde2083-5542-5569-ac5e-f1f42e29f75a",
              "itemLanguage": "en",
              "itemVersion": 1,
              "layoutId": "714096fc-3998-52cf-b87a-951fc7ce39d3",
              "templateId": "e34d8c4f-7e6c-560c-be24-e4d1fcdb16d8",
              "templateName": "App Route",
              "placeholders": {
                "jss-main": [
                  {
                    "uid": "2c4a53cc-9da8-5f51-9d79-6ee2fc671b2d",
                    "componentName": "ContentBlock",
                    "dataSource": "{CC3A044C-776B-5423-9BEA-CC5C2EDA8C9B}",
                    "fields": {
                      "heading": {
                        "value": "Welcome to Sitecore JSS"
                      },
                      "content": {
                        "value": "<p>Thanks for using JSS!! Here are some resources to get you started:</p>\n\n<h3><a href=\"https://jss.sitecore.net\" rel=\"noopener noreferrer\">Documentation</a></h3>\n<p>The official JSS documentation can help you with any JSS task from getting started to advanced techniques.</p>\n\n<h3><a href=\"/styleguide\">Styleguide</a></h3>\n<p>The JSS styleguide is a living example of how to use JSS, hosted right in this app.\nIt demonstrates most of the common patterns that JSS implementations may need to use,\nas well as useful architectural patterns.</p>\n\n<h3><a href=\"/graphql\">GraphQL</a></h3>\n<p>JSS features integration with the Sitecore GraphQL API to enable fetching non-route data from Sitecore - or from other internal backends as an API aggregator or proxy.\nThis route is a living example of how to use an integrate with GraphQL data in a JSS app.</p>\n\n<div class=\"alert alert-dark\">\n  <h4>This app is a boilerplate</h4>\n  <p>The JSS samples are a boilerplate, not a library. That means that any code in this app is meant for you to own and customize to your own requirements.</p>\n  <p>Want to change the lint settings? Do it. Want to read manifest data from a MongoDB database? Go for it. This app is yours.</p>\n</div>\n\n<div class=\"alert alert-dark\">\n  <h4>How to start with an empty app</h4>\n  <p>To remove all of the default sample content (the Styleguide and GraphQL routes) and start out with an empty JSS app:</p>\n  <ol>\n    <li>Delete <code>/src/components/Styleguide*</code> and <code>/src/components/GraphQL*</code></li>\n    <li>Delete <code>/sitecore/definitions/components/Styleguide*</code>, <code>/sitecore/definitions/templates/Styleguide*</code>, and <code>/sitecore/definitions/components/GraphQL*</code></li>\n    <li>Delete <code>/data/component-content/Styleguide</code></li>\n    <li>Delete <code>/data/content/Styleguide</code></li>\n    <li>Delete <code>/data/routes/styleguide</code> and <code>/data/routes/graphql</code></li>\n    <li>Delete <code>/data/dictionary/*.yml</code></li>\n  </ol>\n</div>\n"
                      }
                    }
                  }
                ]
              }
            }
          }
        }
      }
    }
  }
}

```

</details>

<details>
<summary><h2>Paginate items in an item bucket</h2></summary>

When you work with Sitecore [item buckets](https://doc.sitecore.com/xp/en/users/102/sitecore-experience-platform/item-buckets.html), a common requirement is to paginate all the items that descend from a particular template within that bucket. The following search query is helpful for these use cases.

### Query { .notintoc }

```graphql
fragment bucketItemFields on Item {
  ... on AppRoute {
    pageTitle {
      value
    }
  }
  url {
    path
  }
}

query {
  search(
    where: {
      AND: [
        {
          name: "_templates"
          value: "0929f436c3f3500a9f8bd1c57a67a192"
          operator: CONTAINS
        }
        {
          name: "_path"
          value: "7ab00eca411249818420666fc9110faf"
          operator: CONTAINS
        }
      ]
    }
    first: 5
    orderBy: { name: "pageTitle", direction: ASC }
  ) {
    results {
      ...bucketItemFields
    }
    pageInfo {
      endCursor
      hasNext
    }
    total
  }
}

```

### Result { .notintoc }

```json
{
  "data": {
    "search": {
      "results": [
        {
          "pageTitle": {
            "value": "Route A"
          },
          "url": {
            "path": "/bucket/2021/05/13/13/12/Route-A"
          }
        },
        {
          "pageTitle": {
            "value": "Route B"
          },
          "url": {
            "path": "/bucket/2021/05/13/13/12/Route-B"
          }
        },
        {
          "pageTitle": {
            "value": "Route C"
          },
          "url": {
            "path": "/bucket/2021/05/13/13/12/Route-C"
          }
        },
        {
          "pageTitle": {
            "value": "Route D"
          },
          "url": {
            "path": "/bucket/2021/05/13/13/12/Route-D"
          }
        },
        {
          "pageTitle": {
            "value": "Route E"
          },
          "url": {
            "path": "/bucket/2021/05/13/13/13/Route-E"
          }
        }
      ],
      "pageInfo": {
        "endCursor": "NQ==",
        "hasNext": true
      },
      "total": 26
    }
  }
}

```

</details>

<details>
<summary><h2>Get the root item of a site</h2></summary>

The Experience Edge schema does not currently allow querying of sites and their root items, but you can still find the root item of a site by using the `layout` query.

### Query { .notintoc }

```graphql
query {
  layout(site: "experienceedge", routePath: "/", language: "en") {
    item {
      homeItemPath: path
      contentRoot: parent {
        id
        path
      }
    }
  }
}

```

### Result { .notintoc }

```json
{
  "data": {
    "layout": {
      "item": {
        "homeItemPath": "/sitecore/content/Experience-Edge/home",
        "contentRoot": {
          "id": "5AAA894246145088B7AD604B4D177B39",
          "path": "/sitecore/content/Experience-Edge"
        }
      }
    }
  }
}

```

</details>

<details>
<summary><h2>Get all site paths/pages</h2></summary>

You can use the `search` query in the Experience Edge schema to find all items with layout data under a particular path. This is useful, for example, for obtaining paths for a static site generator or building site maps. The search query results are paginated and, by default, return only 10 results. You must use the `endCursor` property with the `first` and `after` query argument to paginate the results.

### Query { .notintoc }

```graphql
query {
  pageOne: search(
    where: {
      AND:[
        {
          name: "_path",
          value: "5AAA894246145088B7AD604B4D177B39",
          operator: CONTAINS
        },
        { name: "_language",  value: "en" },
        { name: "_hasLayout", value: "true" }
      ]
    }
    # defaults to 10
    first: 2
  ) {
    total
    pageInfo {
      endCursor
      hasNext
    }
    results {
      url {
        path
      }
    }
  },

  # this would be a subsequent query from your client
  pageTwo: search(
    where: {
      AND:[
        {
          name: "_path",
          value: "5AAA894246145088B7AD604B4D177B39",
          operator: CONTAINS
        },
        { name: "_language",  value: "en" },
        { name: "_hasLayout", value: "true" }
      ]
    }
    first: 2,
    # obtained the value from the "endCursor" field in "pageOne" query results.
    # you can do this by using either a query without an "after" parameter, or a query with an empty "after" parameter (after: "")
    after: "Mg=="
  ) {
    total
    pageInfo {
      endCursor
      hasNext
    }
    results {
      url {
        path
      }
    }
  }
}

```

### Result { .notintoc }

```json
{
  "data": {
    "pageOne": {
      "total": 6,
      "pageInfo": {
        "endCursor": "Mg==",
        "hasNext": true
      },
      "results": [
        {
          "url": {
            "path": "/"
          }
        },
        {
          "url": {
            "path": "/graphql"
          }
        }
      ]
    },
    "pageTwo": {
      "total": 6,
      "pageInfo": {
        "endCursor": "NA==",
        "hasNext": true
      },
      "results": [
        {
          "url": {
            "path": "/graphql/sample-1"
          }
        },
        {
          "url": {
            "path": "/graphql/sample-2"
          }
        }
      ]
    }
  }
}

```

</details>

<details>
<summary><h2>Build site navigation</h2></summary>

This sample query combines [finding the site root](https://doc.sitecore.com/xp/en/developers/hd/19/sitecore-headless-development/query-examples.html#UUID-74949455-172c-ae2e-8cad-aab7bac34000_section-idm4615071291214432428467102955 "Get the root item of a site") with the ability to traverse item children. You can use the `hasLayout` argument to find only items with layout (navigable pages) and the `includeTemplateIds` argument to filter on a (base) data template.

### Query { .notintoc }

```graphql
fragment navigationFields on Item {
  ... on AppRoute {
    pageTitle {
      value
    }
  }
  url {
    path
  }
}

query {
  layout(site: "experienceedge", routePath: "/", language: "en") {
    item {
      ...navigationFields
      children(hasLayout: true, includeTemplateIDs: "e34d8c4f7e6c560cbe24e4d1fcdb16d8") {
        results {
          ...navigationFields
          children(hasLayout: true, includeTemplateIDs: "e34d8c4f7e6c560cbe24e4d1fcdb16d8") {
            results {
            	...navigationFields
            }
          }
        }
      }
    }
  }
}

```

### Result { .notintoc }

```json
{
  "data": {
    "layout": {
      "item": {
        "pageTitle": {
          "value": "Welcome to Sitecore JSS"
        },
        "url": {
          "path": "/"
        },
        "children": {
          "results": [
            {
              "pageTitle": {
                "value": "GraphQL | Sitecore JSS"
              },
              "url": {
                "path": "/graphql"
              },
              "children": {
                "results": [
                  {
                    "pageTitle": {
                      "value": "Sample 1 Page Title"
                    },
                    "url": {
                      "path": "/graphql/sample-1"
                    }
                  },
                  {
                    "pageTitle": {
                      "value": "Sample 2 Page Title"
                    },
                    "url": {
                      "path": "/graphql/sample-2"
                    }
                  }
                ]
              }
            },
            {
              "pageTitle": {
                "value": "Styleguide | Sitecore JSS"
              },
              "url": {
                "path": "/styleguide"
              },
              "children": {
                "results": [
                  {
                    "pageTitle": {
                      "value": "Custom Route Type | Sitecore JSS"
                    },
                    "url": {
                      "path": "/styleguide/custom-route-type"
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    }
  }
}

```

</details>

<details>
<summary><h2>Build a page breadcrumb</h2></summary>

You can use the `ancestors` field on the item graph type to create breadcrumb navigation. Use the `hasLayout` argument to find only items with layout (navigable pages), and use `includeTemplateIds` to filter on a (base) data template.

### Query

```graphql
fragment breadcrumbFields on Item {
  ... on AppRoute {
    pageTitle {
      value
    }
  }
  url {
    path
  }
}

query {
  # Assume item id is available on page
  item(path: "e2c5c62f42a95b17bc0e71bc9193db9a", language: "en") {
    ...breadcrumbFields
    ancestors(
      hasLayout: true
      includeTemplateIDs: "e34d8c4f7e6c560cbe24e4d1fcdb16d8"
    ) {
      ...breadcrumbFields
    }
  }
}

```

### Result

```json
{
  "data": {
    "item": {
      "pageTitle": {
        "value": "Custom Route Type | Sitecore JSS"
      },
      "url": {
        "path": "/styleguide/custom-route-type"
      },
      "ancestors": [
        {
          "pageTitle": {
            "value": "Styleguide | Sitecore JSS"
          },
          "url": {
            "path": "/styleguide"
          }
        },
        {
          "pageTitle": {
            "value": "Welcome to Sitecore JSS"
          },
          "url": {
            "path": "/"
          }
        }
      ]
    }
  }
}

```

</details>

<details>
<summary><h2>Use item fields with Sitecore Headless SDKs</h2></summary>

The various Sitecore Headless SDKs all contain helpers for rendering field values. These helpers assist with rendering complex fields (such as images or links) and editable values in the context of inline editing. Item fields in the Experience Edge schema include `jsonValue` that outputs the field in a format compatible with these field helpers.

For example, the following link field could be rendered in React or Next.js using the `Link` field helper:

```jsx
<Link field={data.linkFieldExample?.externalLink?.jsonValue} />

```

### Query

```graphql
query {
  richTextFieldExample: item(path: "d979794f76fd51829f3ece48d16dc36c", language: "en") {
    displayName
    ... on StyleguideFieldUsageRichText {
      sample {
        jsonValue
      }
    }
  }
  imageFieldExample: item(path: "c05be0b464885343b5670145b6815d03", language: "en") {
    displayName
    ... on StyleguideFieldUsageImage {
      sample1 {
        jsonValue
      }
    }
  }
  linkFieldExample: item(path: "d299e65e1f6c5ea3b71381c8e2f85baf", language: "en") {
    displayName
    ... on StyleguideFieldUsageLink {
      externalLink {
        jsonValue
      }
    }
  }
}

```

### Result

```json
{
  "data": {
    "richTextFieldExample": {
      "displayName": "Styleguide-FieldUsage-RichText-3",
      "sample": {
        "jsonValue": {
          "value": "<p>This is a sample rich text field. <mark>HTML is always supported.</mark> In Sitecore, editors will see a WYSIWYG editor for these fields.</p>"
        }
      }
    },
    "imageFieldExample": {
      "displayName": "Styleguide-FieldUsage-Image-4",
      "sample1": {
        "jsonValue": {
          "value": {
            "src": "https://cm.experience_edge.localhost/-/media/experienceedge/data/media/img/sc_logo.png?iar=0&hash=F4F969FF95009AE0A80FA094C497ED25",
            "alt": "Sitecore Logo"
          }
        }
      }
    },
    "linkFieldExample": {
      "displayName": "Styleguide-FieldUsage-Link-9",
      "externalLink": {
        "jsonValue": {
          "value": {
            "href": "https://www.sitecore.com",
            "text": "Link to Sitecore",
            "url": "https://www.sitecore.com",
            "linktype": "external"
          }
        }
      }
    }
  }
}

```

</details>