Trouble displaying PortableText field in Gatsby project

✅ SOLVED:

👋 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

'@sanity/block-content-to-react'

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

data.sanityPage.body

?
🙏 Thanks so much in advance for any advice or pointing me the right reference material or tutorial.

Code: https://github.com/kylemhudson/khud-dev-v2/tree/development
Dev deploy: https://5f4fb3b5235fb5000791beb6--khud.netlify.app/uses/

I think you might want to use the Gatsby source plugin’s raw fields to query your portable text fields.

(and the next section)

thanks! I’ll give it a look 👀

Thanks again for the recco. I looked it over and already have

gatsby-source-sanity

installed and am using it with a PortableText component in the project:
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

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.

Worked like a charm. You rock !! 🙌
https://5f4ff1a3e045670007632dbc--khud.netlify.app/uses/