Getting Page Presentations from GraphQL. In order, with Content

Question

I have pages being published using DXA Page Templates and include CPs added to the page directly (again, using standard DXA CTs).

I want to get the Component Presentations from a Page (with the content nodes), in the order the editor places them on the Page (optionally within regions) - ideally in a single GraphQL query.

I believe this is done in DXA but haven't had time to backwards engineer the GraphQLProvider to see if the answer is in there yet.

At the moment we have two methods to query content on the page - in GraphQL directly. Noting that the order of the CPs on the page is - Component IDs: 868,485,600,544

• The first method returns the full page with all Component Presentation Content; but the presentations are not returned in the order they are on the page (they may by coincidence, but this is not forced)

{
  page(namespaceId: 1, publicationId: 7, pageId: 730) {
    itemId
    title 
    containerItems {
      ... on ComponentPresentation {
        component {
          itemId
        }
        ## Get the Component data/fields
      }
    }
  }
}

Example Response:

{
  "data": {
    "page": { "itemId": 730, "title": "XO Home",
      "containerItems": [
        { "component": { "itemId": 485 } },
        { "component": { "itemId": 544 } },
        { "component": { "itemId": 600 } },
        { "component": { "itemId": 868 } }
      ]
...
           "data": {
              "Id": "485-650",
              "Namespace": "tcm",
              "ComponentTemplate": {...,
              "Folder": {
                "Id": "130",
                "Title": "Products"
              },
              "Content": {
                "headline": "Content headline",
                "introduction": "Content introduction",
                "body": {...

• The second returns the page structure (using the UnTypedContent option) and gives the correct order (per the page in the GUI) but only returns the lists of CPs - not the content.

{
  page(namespaceId: 1, publicationId: 7, pageId: 730) {
    itemId
    pageTemplate { id }
    title
    url
    content { ... on UntypedContent {
        data
        type
      }
    }
  }
}

Example Response:

...
            {
              "$type": "EmbeddedRegion",
              "components": [
                { "$type": "Link",
                  "id": "tcm:7-868",
                  "title": "..."
                },
                { "$type": "Link",
                  "id": "tcm:7-485",
                  "title": "..."
                },
                { "$type": "Link",
                  "id": "tcm:7-600",
                  "title": "..."
                },
                { "$type": "Link",
                  "id": "tcm:7-544",
                  "title": "..."
                }
              ],
...

I believe in DXA, we get the full content and in the correct order. The question is how - is there a method in the GraphQL Provider to get this in one request (or some way to enforce the page ordering on the full content retrieval which would seem to make more sense)

I can see that I can embed these two methods into the same GraphQL query but that would require the application to work through two arrays, iterate through the one that contains the order and mapping this to the other array to retrieve the content from and display ... clunky? I think so?

There must be a better way?

UPDATE:

So I'm guessing that the CPs are being returned as they are DCPs... and maybe there's some magic between DXA and the Content Services that means DXA can request the CPs to be populated even when they are DCPs (to avoid multiple requests etc.).

If anyone can share info on this it would be really useful!

Answer 1

Just to complete this:

There IS "some magic" between DXA and the Content Services that means DXA can request the CPs to be populated even when they are DCPs (to avoid multiple requests etc.).

As Atila notes - this is part of the Model Extension/Service.

So, if you're wanting to make calls directly form a front-end app then you're going to need to put up with making multiple requests to get each 'part' (Component Presentation) that makes up the page - or a strategy to replicate that part of the Model Extension/Service.