Documentation Center

GraphQL request to get the Component Presentations on a Page

Use the containerItems field in your Public Content API call to fetch all the Component Presentations on a specific Page.

Construct and then run a GraphQL query like the following:
{
  page(namespaceId: NSID, publicationId: PUBID, pageId: PID) {
    itemId
    title
    containerItems {
      ... on ComponentPresentation {
        itemId
        component {
          itemId
          title
          multiMedia
        }
        componentTemplate {
          itemId
          title
        }
        rawContent {
          content
          charSet
        }
      }
    }
  }
}
where:
  • NSID is the identifier (a number) of your namespace
  • PUBID is the identifier (a number) of your Publication
  • PID is the identifier (a number) of your Page
The query returns (along with the identifier and title of the Page) an array of Component Presentations. For each Component Presentation, it returns its identifier, the identifier and title of its Component and of its Component Template, and its content. Here is an example response, where three Component Presentations are returned:
{
  "data": {
    "page": {
      "itemId": 338,
      "title": "Homepage",
      "containerItems": [
        {
          "itemId": 353,
          "component": {
            "itemId": 353,
            "title": "Company News Media Manager Video"
            "multiMedia": "true"
          }
          "componentTemplate": {
            "itemId": 285,
            "title": null
          },
          "rawContent": null
        },
        {
          "itemId": 358,
          "component": {
            "itemId": 358,
            "title": "Head Office Location",
            "multiMedia": "false"
          }
          "componentTemplate": {
            "itemId": 200,
            "title": null
          },
          "rawContent": null
        },
        {
          "itemId": 376,
          "component": {
            "itemId": 376,
            "title": "Homepage List",
            "multiMedia": "false"
          }
          "componentTemplate": {
            "itemId": 299,
            "title": null
          },
          "rawContent": null
        },
      ]
    }
  }
}
If you want to fetch the binary content of a Multimedia Component, specify it as a complex Component field, for example:
{
  page(namespaceId: NSID, publicationId: PUBID, pageId: PID) {
    itemId
    title
    containerItems {
      ... on ComponentPresentation {
        itemId
        component {
          itemId
          title
          multiMedia
          ... on BinaryComponent {
            variants {
              edges {
                node {
                  variantId
                  binaryId
                  downloadUrl
                }
              }
            }
          }
        }
      }
    }
  }
}