How to query raw HTML with REST API on rich text fields?

Developing with Prismic
1

Hi everyone,

I'm trying to figure out how to query a rich text field with the REST API, and to get the raw HTML back. I don't want to use a html serializer, but immediately render the HTML. The field I want is just called html.

Here's my graphQuery:

  const graphQuery = `{
    top_banner {
      html
    }
  }`;

Here's the graphQuery I "want", but the query fails, so I'm assuming you can't do this with the REST API:

  const graphQuery = `{
    top_banner {
      html {
        raw
      }
    }
  }`;

Thanks for your help!

2

Hello @florian, that's correct, you can't do this kind of query with the REST API, because it will retrieve only the raw Rich Text content. This kind of schema is available with Gatsby.

4

Is there a minimum viable HTML serializer somewhere? I'd like to avoid installing an entire npm package (@prismicio/react) just to render some HTML? How else do you recommend I display a rich text field with the least amount of code?

5

The official kits allow you appropriately render the content of the Rich Text field. Another way of doing this is by using @prismicio/helpers alone. You'll be able to render the content as text or as plain HTML, like so:

import * as prismicH from '@prismicio/helpers'

const contentHTML = prismicH.asHTML(prismicDoc.data.example_rich_text)

console.log(contentHTML)
//  Output: <p>Example Rich Text Value</p>

const contentText = prismicH.asText(prismicDoc.data.example_rich_text)

console.log(contentText)
//  Output: "Example Rich Text Value"

Learn more: