As a more complex example, the following query returns a complete page (CMChannel), including data for all page grid placements, with image and video links (if present). Also included in the response: image map data.

query PageQuery($id: String!) {
  content {
    page(id: $id) {
      __typename
      ...Reference
      title
      teaserTitle
      teaserText
      creationDate
      grid {
        cssClassName
        rows {
          placements {
            name
            viewtype
            items {
              ...Teasable
              ...ImageMap
              ... on CMCollection {
                viewtype
                items {
                  ...Teasable
                }
              }
            }
          }
        }
      }
    }
  }
}

fragment ContentInfo on Content_ {
  name
  creationDate
}

fragment Reference on CMLinkable {
  ...ContentInfo
  title
  segment
  link {
    id
    type
  }
}

fragment ImageMap on CMImageMap {
  displayTitle
  displayShortText
  displayPicture
  transformedHotZones {
    crops {
      name
      coords {
        x
        y
      }
    }
    points {
      x
      y
    }
    alt
    shape
    target
    displayAsInlineOverlay
    inlineOverlayTheme
    linkedContent {
      ...Reference
      ...QuickInfo
    }
  }
}

fragment Teasable on CMTeasable {
  ...Reference
  teaserTitle
  teaserText
  teaserTarget {
    ...Reference
  }
  teaserTargets {
    target {
      ...Reference
    }
    callToActionEnabled
    callToActionText
  }
  teaserOverlaySettings {
    style
    enabled
    positionX
    positionY
    width
  }
  picture {
    ...Picture
  }
  video {
    ...Video
  }
}

fragment QuickInfo on CMTeasable {
  ...Reference
  teaserTitle
  teaserText
  picture {
    ...Picture
  }
}

fragment Picture on CMPicture {
  ...ContentInfo
  title
  alt
  link {
    id
    type
  }
  uriTemplate
  base64Images {
    cropName
    base64
  }
}

fragment Video on CMVideo {
  ...ContentInfo
  title
  alt
  link {
    id
    type
  }
  data {
    uri
  }
  dataUrl
}

Page queries accept the numeric content ID of a CMChannel document as well as a site ID. In the latter case, the home page of the site will be returned, for example, for the Calista demo site (query variables: { "id": "ced8921aa7b7f9b736b90e19afc2dd2a"}).

Alternatively, a page may be queried by its navigation path, using the 'pageByPath' query.

{
  content {
    pageByPath(path: "corporate/for-professionals") {
      id
      title
    }
  }
}

The path argument in the (abbreviated) example above consists of the segment path starting with the homepage segment 'corporate', the path separator '/' and the subpage segment 'for-professionals'. If the query is invoked using a site filter endpoint, like '/corporate/graphql', the homepage-segment of the path may be omitted, for example, simply 'for-professionals'.

Navigation

Especially when rendering pages, showing some kind of navigation components is usually an important task. Some of these components may be the current navigation level, the homepage and the main navigation or the next navigation level of the currently displayed page.

The graphql type CMNavigation offers everything necessary to render any type of navigation component.

{
  content {
    pageByPath(path: "corporate/for-consumers/aurora-b2c") {
      id
      name
      segment
      mainNavigation: root {
        children {
          id
          name
          segment
        }
      }
      currentNavigationLevel: parent {
        children {
          id
          name
          segment
        }
      }
      subNavigationLevel: children {
        id
        name
        segment
      }
    }
  }
}