Using block-content-to-react with Gatsby GraphQL data

I searched for specific video tutorials on using block-content-to-react with Gatsby, but unfortunately couldn't find dedicated video content on this exact topic. While "Learn With Jason" has done Sanity episodes, I wasn't able to locate a specific Gatsby + Portable Text video tutorial.

However, since you already have your data coming through Gatsby's GraphQL API, I can help guide you through the implementation!

Important Note on block-content-to-react

The block-content-to-react package you linked is now considered legacy. The modern, recommended approach is to use @portabletext/react instead, which offers better performance and more flexibility.

Using Portable Text with Gatsby

Since you're already getting data via Gatsby's GraphQL API, here's how to render it:

With the modern @portabletext/react (recommended):

npm install @portabletext/react

Then in your Gatsby component:

import { PortableText } from '@portabletext/react'

function BlogPost({ data }) {
  return (
    <article>
      <h1>{data.sanityPost.title}</h1>
      <PortableText value={data.sanityPost._rawBody} />
    </article>
  )
}

export const query = graphql`
  query($slug: String!) {
    sanityPost(slug: { current: { eq: $slug } }) {
      title
      _rawBody
    }
  }
`

Key point: Use _rawBody (or whatever your field name is with the _raw prefix) in your GraphQL query to get the raw Portable Text data structure that the renderer expects.

If you still want to use the legacy block-content-to-react:

npm install @sanity/block-content-to-react

import BlockContent from '@sanity/block-content-to-react'

function BlogPost({ data }) {
  return (
    <article>
      <h1>{data.sanityPost.title}</h1>
      <BlockContent 
        blocks={data.sanityPost._rawBody}
        projectId="your-project-id"
        dataset="your-dataset"
      />
    </article>
  )
}

Custom Components

Both packages support custom serializers/components for rendering custom blocks, marks, and types:

const components = {
  types: {
    image: ({value}) => <img src={value.imageUrl} />,
  },
  marks: {
    link: ({children, value}) => <a href={value.href}>{children}</a>,
  },
}

<PortableText value={data._rawBody} components={components} />

Learning Resources

While I couldn't find the specific video you're looking for, these resources might help:

• The Sanity + Gatsby integration guides have written tutorials
• Knut Melvær's content includes tutorials on React with Sanity that use similar rendering patterns
• The Sanity guides on rich text components cover Portable Text rendering concepts

The core concepts are the same across React frameworks—you're rendering Portable Text blocks that come through as JSON from your GraphQL query. The main thing to remember is to use the _raw prefix in your Gatsby queries!