Documentation Center

The typedComponent root query

The typedComponent root query lets you fetch a Component and explore its type (corresponding to its Schema in Content Manager).

Based on the information you were provided by the creator of the Schema on which the Component is based, you can explore the fields. When the Component contains Format Area fields, which contains HTML fragments, the query returns a series of HTML fragments interspersed with Component Links.

Here is an example of a typedComponent query that fetches a Component based on an Article Schema. The Schema contains a Format Area field (which is of type Rtf) called articleBody. The query requests the html property, containing the raw HTML framgent, but also fragments, which returns a series of HTML subfragments (as RtfHtmlFragment) and links to Components (as RtfComponentLinkFragment), giving the implementer direct access to the referenced Component, whose properties (itemId, title) and actual Schema fields (headline in this example) can then be retrieved.
typedComponent(namespaceId: 1, publicationId: 5, componentId: 422) {
  ...on Article {
    articleBody {
      content {
        html
        fragments {
          ...on RtfHtmlFragment {
            html
          }
          ...on RtfComponentLinkFragment {
            html
            component {
              itemId
              title
              ...on Article {
                headline
              }
            }
          }
        }
      }
    }
  }
}
Let's imagine an actual Format Area field called SingleRtfField that contains the following HTML:
<p>This is some rtf</p>\n
<p>Component link: Article1</p>\n
<p>Another example component link: <a href=\"/articles/news/news1.html\"  title="Example News 1">Example News 1</a></p>\n
<p>External Link: <a title=\"google\" href=\"http://www.example.com\">www.example.com</a></p>\n
<p>Image link: <img src=\"/media/plasma.png\"  title="MultiMediaItem" alt="MultiMediaItem" style="width: 640px; height: 400px;"/></p>\n
<p>Now lets add a table:</p>\n
<table border=\"1\" cellpadding=\"1\" cellspacing=\"1\" style=\"width: 100%\" title=\"My table\">\n
  <caption>My caption</caption>\n
  <tbody>\n
    <tr>\n
      <td class=\"\">Article10</td>\n
      <td />\n 
    </tr>\n
    <tr>\n
      <td class=\"\" />\n
      <td />\n
    </tr>\n
  </tbody>\n
</table>
A typedComponent query would then return something like the following:
"singleRtfField": {
  "html": "<p>This is some rtf</p>\n<p>Component link: Article1</p>\n<p>Another example component link: <a href=\"/articles/news/news1.html\"  title="Example News 1">Example News 1</a></p>\n<p>External Link: <a title=\"google\" href=\"http://www.example.com\">www.example.com</a></p>\n<p>Image link: <img src=\"/media/plasma.png\"  title="MultiMediaItem" alt="MultiMediaItem" style="width: 640px; height: 400px;"/></p>\n<p>Now lets add a table:</p>\n<table border=\"1\" cellpadding=\"1\" cellspacing=\"1\" style=\"width: 100%\" title=\"My table\">\n<caption>My caption</caption>\n<tbody>\n<tr>\n<td class=\"\">Article10</td>\n<td />\n</tr>\n<tr>\n<td class=\"\" />\n<td />\n</tr>\n</tbody>\n</table>",
  "fragments": [
    {
      "html": "<p>This is some rtf</p> <p>Component link: "
    },
    {
      "html": "",
      "component": {
        "itemId": 374,
        "title": "Article1",
      }
    },
    {
      "html": "</p> <p>Another example component link: "
    },
    {
      "html": "<a href=\"/articles/news/news1.html\">Example News 1</a>",
      "component": {
        "itemId": 293,
        "title": "Example News 1",
      }
    },
    {
      "html": "</p> <p>External Link: <a title=\"google\" href=\"http://www.example.com\">www.example.com</a></p> <p>Image link: "
    }
    {
      "html": "<img src=\"/media/plasma.png\" title="MultiMediaItem" alt="MultiMediaItem" style="width: 640px; height: 400px;"/>",
      "component": {
        "itemId": 380,
        "title": "MultiMediaItem",
      }
    },
    {
      "html": "</p> <p>Now lets add a table:</p> <table border=\"1\" cellpadding=\"1\" cellspacing=\"1\" style=\"width: 100%\" title=\"My table\">  <caption>  My caption </caption>  <tbody>   <tr>    <td class=\"\">   "
    },
    {
      "html": "",
      "component": {
        "itemId": 393,
        "title": "Article10",
      }
    },
    {
      "html": "</td>    <td></td>   </tr>   <tr>    <td class=\"\"></td>    <td></td>   </tr>  </tbody> </table>"
    }
  ]
}