gatsby contentful rich text raw is undefined

In Gatsby trying to make a simple website. In my particular example I have a node with a rich text field from Contentful. It simply says one plain text sentence.

{renderRichText(event.description.raw)}

However the call above returns:

My event.description looks like this in the console:

description: raw: "{"data":{},"content":[{"data":{},"content":[{"data":{},"marks":[],"value":"Hard beats. Fast music. Sweaty bodies. ","nodeType":"text"}],"nodeType":"paragraph"}],"nodeType":"document"}"

I can see this is a string and I've tried to play with JSON.parse and JSON.stringify before sending it in. But I can't tell what's the issue. It's a string and it can't read it as a JSON object.** I validated it as proper JSON too.**

event.js

const Event = ({ pageContext }) => {

    const { event } = pageContext
    console.log('grabbing event', event)
    const image = event.flyer
  
    return (
      <>
        <h2 className={styles.EventTitle}>{event.title}</h2>
        <div className={`row`}>
            <div className={` ${styles.EventInfo}`}> 
             {renderRichText(event.description.raw)}
          </div>
        </div>
        <div className={`row`}>
            <img className={styles.EventImage} src={image}/>
            <div className={` ${styles.EventActions}`}>
              <Link to={event.ticket}><button className={styles.EventButton}>Tickets</button></Link> 
            </div>
        </div>
      </>
    )
  };

  export default Event;

gatsby-node.js

const path = require("path")

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

    const queryContentfulResults = await graphql(`
    query Events {
      allContentfulEvent {
        nodes {
          contentful_id
          title
          starttime
          id
          ad_mats {
            file {
              url
            }
          }
          square_flyer {
            file {
              url
            }
          }
          ticketlink
          slug
          venue {
            name
            street_address
            city
          }
          description {
            raw
          }
        }
      }
    }
    `)

    const eventTemplate = path.resolve(`src/templates/event.js`);

    contentfulEvents = queryContentfulResults.data.allContentfulEvent.nodes.map( data => transformEvent(data));

    contentfulEvents.forEach(node => {
      console.log(node);
      createPage({
        path: `/events/${node.slug}`,
        component: eventTemplate,
        context: {
          event: node
        }
      });
    });


};

  const transformEvent = (data) => {
    console.log(data);
    return {
      title: data.title,
      description: data.description,
      slug: data.slug,
      ad_mats: data.ad_mats,
      flyer: data.square_flyer.file.url,
      ticket: data.ticketlink,
      date: data.starttime,
      venue: data.venue.name,
      address: data.venue.street_address,
      city: data.venue.city
    }
};

Mess around with as a string and as JSON before setting it to the function renderRichText, added an empty options object, and validated the JSON. No changes from this.

Checking the documentation of the package, it seems like you're passing the wrong object to the renderRichText() method. You don't need to pass event.description.raw. You should only pass event.description.

You can find more information here and here.