Trouble displaying PortableText field in Gatsby project

7 replies
Last updated: Sep 2, 2020

👋 Hi! ‘m trying to get a new custom Page setup and need help displaying the PortableText field to render on the page.

• Using the above code to leverage the
portable text serializer to display the body copy in my page.• The page doesn’t throw any errors, but also doesn’t display any of the body copy.
• Do I not have my keys right for PortableText to display the serialized data within
🙏 Thanks so much in advance for any advice or pointing me the right reference material or tutorial.

Dev deploy:
Sep 2, 2020, 3:04 PM
I think you might want to use the Gatsby source plugin’s raw fields to query your portable text fields.
Sep 2, 2020, 3:55 PM
(and the next section)
Sep 2, 2020, 3:55 PM
user F
thanks! I’ll give it a look 👀
Sep 2, 2020, 4:29 PM
user F
Thanks again for the recco. I looked it over and already have
installed and am using it with a PortableText component in the project:
import React from 'react'
import clientConfig from '../../client-config'
import BasePortableText from '@sanity/block-content-to-react'
import serializers from './serializers'

const PortableText = ({blocks}) => (
  <BasePortableText blocks={blocks} serializers={serializers} {...clientConfig.sanity} />

export default PortableText
however its the JSX syntax I’m stumbling on to be able to render it to page. Few hours looking for other good examples or repos that would give an example of this type of format to render to page that I’m missing:

Most of the examples on Sanity’s site or in other example sites focus on setting the variables and defining the graphql schema, but now how to then structure and render the data in JSX.

Thanks again
Sep 2, 2020, 7:10 PM
What you have there looks fine. Check you're getting the data you expect via data.sanityPage.body. I was suggesting querying _rawBody instead in your GraphQL query.
Sep 2, 2020, 7:20 PM
Worked like a charm. You rock
user F
!! 🙌
Sep 2, 2020, 7:30 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?