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.