How to get nested (linked) Components in fewer requests over GraphQL

Question

Is it possible to get linked content in the same GraphQL query?

For example, using the following query we can get back a page and components within its regions.

{
pagequery: page(namespaceId: 1, publicationId: 7, pageId: 726) {
    itemId
    title
    url
    regions {
      name
      components {
        title
        ... on Component {
          itemId
          title
          content {
            ... on UntypedContent {
              data
            }
          }
        }
      }
    }
  }
}

Question: Is it possible to also get the data for linked Components in the same request, using a request with UntypedContent or otherwise (Semantic Content Models)?

Related to this:

1. GraphiQL shows that data is UntypedContent:data: Map. What is a Map in this context?
2. Is it possible to get specific fields out of a "map?" The documentation in GraphiQL describes UntypedContent as "Untyped content where all data is available in a Map structure.

Answer 1

You can achieve your goal by using Semantic Content Modelling. Here is a sample query with the corresponding output. Note how I can fetch all the content, including the image details.

{
  page(namespaceId: 1, publicationId: 14, url: "/finance_articles.html") {
    publicationId
    itemId
    title
    regions {
      name
      components {
        itemId
        title
        ... on FinanceArticle {
          heading
          subHeading
          bodyText {
            html
          }
          numberField
          dateField
          image {
            ... on Image {
              title
              metadata {
                altText
              }
              variants {
                edges {
                  node {
                    url
                    downloadUrl
                  }
                }
              }
            }
          }
          metadata {
            metadataField1
            financeArticleType {
              ... on Keyword {
                title
                description
                key
              }
            }
          }
        }
      }
    }
  }
}

Here is the output:

{
  "data": {
    "page": {
      "publicationId": 14,
      "itemId": 719,
      "title": "Finance Articles Page",
      "regions": [
        {
          "name": "Main",
          "components": [
            {
              "itemId": 718,
              "title": "Finance Article Sample 1",
              "heading": "Heading - Finance Article Sample 1",
              "subHeading": "Subheading - Finance Article Sample 1",
              "bodyText": {
                "html": "<p>Body Text content in Finance Article Sample 1.</p>"
              },
              "numberField": 11,
              "dateField": "2023-01-31T02:54:47.000",
              "image": {
                "title": "Finance Article Image 1",
                "metadata": {
                  "altText": "Alt Text - Finance Article Image 1"
                },
                "variants": {
                  "edges": [
                    {
                      "node": {
                        "url": "/media/skyline.jpg",
                        "downloadUrl": "http://localhost:8081/cd/api/binary/1/14/717"
                      }
                    }
                  ]
                }
              },
              "metadata": {
                "metadataField1": "Metadata value!",
                "financeArticleType": {
                  "title": "Internal Report",
                  "description": "Internal Report",
                  "key": "InternalReport"
                }
              }
            },
            {
              "itemId": 720,
              "title": "Finance Article Sample 2",
              "heading": "Heading - Finance Article Sample 2",
              "subHeading": "Subheading - Finance Article Sample 2",
              "bodyText": {
                "html": "<p>Body Text content</p>\n<p>More content</p>"
              },
              "numberField": 1200,
              "dateField": "2022-12-29T02:54:47.000",
              "image": {
                "title": "Finance Article Image 2",
                "metadata": {
                  "altText": "Alt Text - Finance Article Image 2"
                },
                "variants": {
                  "edges": [
                    {
                      "node": {
                        "url": "/media/blueprint.jpg",
                        "downloadUrl": "http://localhost:8081/cd/api/binary/1/14/721"
                      }
                    }
                  ]
                }
              },
              "metadata": {
                "metadataField1": "Metadata content",
                "financeArticleType": {
                  "title": "End of Year Announcement",
                  "description": "End of Year Announcement",
                  "key": "EndOfYearResults"
                }
              }
            }
          ]
        }
      ]
    }
  }
}

I don't think you can (easily) achieve your goal by using untyped content/components. Semantic content modelling is the way to go.

I hope this helps.