Dynamic content field
The Dynamic Content field allows content editors to combine various elements such as headings, texts, videos, social media posts, maps, assets, remote content, and components to create rich content.
This page lists sample requests you can use to query different types of content available in the Dynamic Content field.
{
Post( id : "89794aaa-6faa-47ae-a595-2911aaecd85d") {
_id,
dynamic_content_field {
__typename
... on ElementTypeName {
// fields of the requested type.
}
},
}
}
{
"data": {
"Posts": {
"items": [
{
"dynamic_content_field": [
{
"__typename": "ElementTypeName",
// Fields supported by the defined type
}
]
}
]
}
}
}
Dynamic content components
Heading (text)
Heading elements contain two fields. body contains the content of the heading, format tells you if the heading is H1, H2, H3 ect. formatted.
{
Posts : Pages {
items {
dynamic_content_field {
__typename
... on Text {
body
format
}
}
}
}
}
{
"data": {
"Posts": {
"items": [
{
"dynamic_content_field": [
{
"__typename": "Text",
"body": "<h1>The story behind Prepr CMS</h1>",
"format": "H1"
}
]
}
]
}
}
}
Paragraph (text)
Paragraph elements contain two fields. body contains the content of the paragraph, format tells you if the heading is HTML or plain formatted.
{
Posts : Pages {
items {
dynamic_content_field {
__typename
... on Text {
body
format
}
}
}
}
}
{
"data": {
"Posts": {
"items": [
{
"dynamic_content_field": [
{
"__typename": "Text",
"body": "<p>Founded in 2018 as a user-friendly CMS for media organizations, we’ve matured into a smart solution trusted by content teams around the globe.</p>",
"format": null
}
]
}
]
}
}
}
Links (text)
You can identify links with the <a></a> HTML tag in the body and html string values like in the example response below.
{
Posts : Pages {
items {
dynamic_content_field {
__typename
... on Text {
body
html
}
}
}
}
}
{
"data": {
"Posts": {
"items": [
{
"dynamic_content_field": [
{
"__typename": "Text",
"body": "<p>Check out this <a href=\"say-quiche\">article</a></p>",
"html": "<p>Check out this <a href=\"say-quiche\">article</a></p>"
}
]
}
]
}
}
}
Note
The href value for a link to a content item is its Slug by default as shown in the response example above. To get the content item Id instead, add the header Prepr-Resolve-Internal-Links to your request and set it to false. Clear the cache on the Access tokens page after adding this header to your request.
Assets
Heading elements contain two fields. body contains the content of the heading, format tells you if the heading is H1, H2, H3 ect. formatted.
Check out the Asset Field section for all asset fields.
{
Posts {
items {
dynamic_content_field {
__typename
... on Assets {
items {
url
}
}
}
}
}
}
{
"data": {
"Posts": {
"items": [
{
"dynamic_content_field": [
{
"__typename": "Assets",
"items": [
{
"url": "https://1d9273inhp5w.b-cdn.net/w_1920/s3-graphql-starfm/40d0e42a-c96a-40bc-a906-c8785a201fbd.jpg"
}
]
}
]
}
]
}
}
}
Components
Components are transformed into their own GraphQL types. Components are often used to represent a set of reusable fields. To query the content from a component you need to specify the subfields, like you do for any other type.
In our example the dynamic_content_field contains a component named HeaderComponent.
{
Pages {
items {
dynamic_content_field {
__typename
... on HeaderComponent {
name
gallery {
url
}
}
}
}
}
}
{
"data": {
"Pages": {
"items": [
{
"dynamic_content_field": [
{
"__typename": "HeaderComponent",
"name": "Our mission & culture",
"gallery": [
{
"url": "https://1d9273inhp5w.b-cdn.net/w_1920/s3-graphql-starfm/40d0e42a-c96a-40bc-a906-c8785a201fbd.jpg"
}
]
}
]
}
]
}
}
}
Social posts
Social posts can be one of the following types: InstagramPost, YouTubePost, FacebookPost, TwitterPost, SpotifyPlaylist, TikTokPost, VimeoPost, SoundCloudPost.
The returned urls are oEmbed supported urls.
{
Posts {
items {
dynamic_content_field {
__typename
... on TwitterPost {
url
}
}
}
}
}
{
"data": {
"Posts": {
"items": [
{
"dynamic_content_field": [
{
"__typename": "TwitterPost",
"url": "https://twitter.com/IsabelleHanssen/status/1493591707060953098"
}
]
}
]
}
}
}
Quote
{
Posts {
items {
dynamic_content_field {
__typename
... on Quote {
author
body
}
}
}
}
}
{
"data": {
"Posts": {
"items": [
{
"dynamic_content_field": [
{
"__typename": "Quote",
"author": "Albert Einstein",
"body": "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe"
}
]
}
]
}
}
}
Resource (external links)
{
Posts {
items {
dynamic_content_field {
__typename
... on Resource {
url
body
}
}
}
}
}
{
"data": {
"Posts": {
"items": [
{
"dynamic_content_field": [
{
"__typename": "Resource",
"url": "https://cnn.com",
"body": "CNN International - Breaking News, US News, World News and Video"
}
]
}
]
}
}
}
Menu item (NavigationItem)
{
Posts {
items {
dynamic_content_field {
__typename
... on NavigationItem {
url
slug
body
}
}
}
}
}
{
"data": {
"Posts": {
"items": [
{
"dynamic_content_field": [
{
"__typename": "NavigationItem",
"url": "/about-us",
"slug": "about-us",
"body": "About Us"
}
]
}
]
}
}
}
Location (Coordinates)
{
Posts {
items {
dynamic_content_field {
__typename
... on Coordinates {
latitude
longitude
}
}
}
}
}
{
"data": {
"Posts": {
"items": [
{
"dynamic_content_field": [
{
"__typename": "Coordinates",
"latitude": 52.087864,
"longitude": 5.1068509
}
]
}
]
}
}
}
Remote content
The Remote content field allows an editor to reference content from an eCommerce platform, external CMS or legacy system in Prepr content items. A Remote Source has its own fields which are configured in the schema.
For example our ecommerce source has a product_id, category_id and image_url field.
If you add a Remote source to the Dynamic Content Editor a specific Remote Source Collection is generated
{
Posts {
items {
dynamic_content_field {
__typename
... on EcommerceCollection {
items {
_id
product_id
category_id
image_url
}
}
}
}
}
}
{
"data": {
"Posts": {
"items": [
{
"dynamic_content_field": [
{
"__typename": "EcommerceCollection",
"items": [
{
"_id": "daa86b97-beec-488c-876d-aa48fb16720e",
"product_id": "V234792749-23487298347",
"category_id": "CEJKHDFKHGKFJH-33",
"image_url": "https://image.ecommerce.com/fyd7tJBz01bgUEsbs7d02US01K8Tp00SB3Wn01WPneVKeCmQIM.jpg"
}
]
}
]
}
]
}
}
}
Remote content before API version 2023-01-10 (deprecated)
In the API versions before 2023-01-10 Remote content fields are returned as generic ContentIntegrations and ContentIntegration type.
Let's see the same example in the deprecated versions.
{
Posts {
items {
dynamic_content_field {
__typename
... on ContentIntegrations {
items {
_id
data {
key
value
}
}
}
}
}
}
}
{
"data": {
"Posts": {
"items": [
{
"dynamic_content_field": [
{
"__typename": "ContentIntegrations",
"items": [
{
"_id": "2c07cf99-aad4-4d13-9ae8-eb4faee62ad0",
"data": [
{
"key": "product_id",
"value": "V234792749-23487298347"
}
]
}
]
}
]
}
]
}
}
}