Real time content API for Multiple-paragraph text content format

Hi,

I am working on building a cms template with live preview feature that allows our editor to build landing pages using dato only. I am using the Content delivery API for the production pages, and Real-time content API to implement the live preview feature. But it looks like the Content delivery API and Real time content API are returning me different data types, and I have to use different query to fetch them. This causes the issue where I cannot use the same render method.

Below is the query for the Content Delivery API, I can use <MDXRenderer>{contentNode.childMDX.body}</MDXRenderer to render it

  query($id: String!) {
    datoPage: datoCmsTemplateLandingPage(id: { eq: $id }) {
      ...DatoCmsTemplateLandingPageMetadata
      footer {
        ...Footer
      }
      sections {
        sectionType
        backgroundColor
        blocks {
              id
              model {
                name
              }
              spacingTop
              textAlign
              contentNode {
                childMdx {
                  body
            }
          }
        }
      }
    }
  }

This below is the query for the same text part using Real time content API, I am not able to render the content correctly using the same approach above

            blocks {
              ... on TextRecord {
                id
                content(markdown: true)
                _modelApiKey
              }
            }

The text field is using โ€œMultiple-paragraph textโ€, and framework is Gatsby.

Please advise.

Thank you

@wsheng a couple of things:

Using

Makes it so the query returns HTML, not markdown text.

Also, differently from the GraphQL API, the realtime API does not return the data, but the URL of a SSE channel, used to transmit the updates in real time, so trying to plug that URL directly in the render component will generate an error, that URL must be used to fetch the actual content in real time, as documented here: Real-time Updates API reference - DatoCMS

For a step-by-step guide on how to do live preview on gatsby you can follow: Gatsby preview - Live preview of your Gatsby website

Thank you

1 Like