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
}
]
}
]
}
}
}
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"
}
]
}
]
}
]
}
]
}
}
}