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.
REQUEST
query {
Post( id : "89794aaa-6faa-47ae-a595-2911aaecd85d") {
_id,
dynamic_content_field {
__typename
... on ElementTypeName {
// fields of the requested 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.
REQUEST
query {
Posts : Pages {
items {
dynamic_content_field {
__typename
... on Text {
body
format
}
}
}
}
} 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.
REQUEST
query {
Posts : Pages {
items {
dynamic_content_field {
__typename
... on Text {
body
format
}
}
}
}
} 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.
REQUEST
query {
Posts : Pages {
items {
dynamic_content_field {
__typename
... on Text {
body
html
}
}
}
}
} The href value for a link to a content item is its Slug by default as shown in the response example above.
If there is no Slug, the response will be plain text.
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.
REQUEST
query {
Posts {
items {
dynamic_content_field {
__typename
... on Assets {
items {
url
}
}
}
}
}
} 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.
REQUEST
query {
Pages {
items {
dynamic_content_field {
__typename
... on HeaderComponent {
name
gallery {
url
}
}
}
}
}
} Social posts
Social posts can be one of the following types: InstagramPost, YouTubePost, FacebookPost, TwitterPost, SpotifyPlaylist, TikTokPost, VimeoPost, SoundCloudPost, ThreadsPost and BlueskyPost.
The returned urls are oEmbed supported urls.
REQUEST
query {
Posts {
items {
dynamic_content_field {
__typename
... on TwitterPost {
url
}
}
}
}
} Quote
REQUEST
query {
Posts {
items {
dynamic_content_field {
__typename
... on Quote {
author
body
}
}
}
}
} Menu item (NavigationItem)
REQUEST
query {
Posts {
items {
dynamic_content_field {
__typename
... on NavigationItem {
url
slug
body
}
}
}
}
} Location (Coordinates)
REQUEST
query {
Posts {
items {
dynamic_content_field {
__typename
... on Coordinates {
latitude
longitude
}
}
}
}
} 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
REQUEST
query {
Posts {
items {
dynamic_content_field {
__typename
... on EcommerceCollection {
items {
_id
product_id
category_id
image_url
}
}
}
}
}
} 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.
REQUEST
query {
Posts {
items {
dynamic_content_field {
__typename
... on ContentIntegrations {
items {
_id
data {
key
value
}
}
}
}
}
}
}