Rendering Rich Text from CMS in Gatsby v4 - reactjs

Question

I'm trying to render rich text in my Gatsby v4 about page for my site, but I'm having trouble finding any info on how to render the data. I've read about adding blocks, but I'm lost on what I should be including or how to go about this. I really just need to render links, headers, and body text in the rich text. Could someone walk me through this?
Here's my component code snippet. The data is all coming through the query correctly in the page so far. I just want the text to go where it says "TEXT GOES HERE"
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"
import {renderRichText} from "gatsby-source-contentful/rich-text"
import {BLOCKS, MARKS} from "#contentful/rich-text-types"
import * as aboutStyles from "../styles/about.module.scss"
const query = graphql`
{
contentfulAbout {
about
bioImage {
title
url
gatsbyImageData(
layout: FULL_WIDTH
placeholder: BLURRED
resizingBehavior: SCALE
width: 1000
)
}
aboutText {
raw
}
}
}
`
const AboutSection = () => {
const data = useStaticQuery(query);
const contentfulAbout = data.contentfulAbout
return (
<div className={aboutStyles.parent}>
<section className={aboutStyles.container}>
<div className={aboutStyles.image}>
<GatsbyImage className={aboutStyles.bioImage} image={contentfulAbout.bioImage.gatsbyImageData} alt={contentfulAbout.bioImage.title} />
</div>
<div className={aboutStyles.text}>
<h2>{contentfulAbout.about}</h2>
<p>TEXT GOES HERE</p>
</div>
</section>
</div>
)
}

Answer 1

The idea is to use the exposed BLOCKS and MARKS to fully customize the fetched data from Contentful like:
import { BLOCKS, MARKS } from "#contentful/rich-text-types"
import { renderRichText } from "gatsby-source-contentful/rich-text"
​
const Bold = ({ children }) => <span className="bold">{children}</span>
const Text = ({ children }) => <p className="align-center">{children}</p>
​
const options = {
renderMark: {
[MARKS.BOLD]: text => <Bold>{text}</Bold>,
},
renderNode: {
[BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
},
},
}
​
renderRichText(node.bodyRichText, options)
Source: https://www.contentful.com/developers/docs/tutorials/general/rich-text-and-gatsby/
In that way, you can render a span with "bold" className when a MARKS.BOLD is fetched, using your own customized output.
In the snippet above, there's missing the implementation into a "standard" component, but the idea relies on the same fact. Using renderRichText what accepts two arguments:
The first one: your rich text node (aboutText in your case)
The second argument: the options with your custom output
Applied to your code, it should look like:
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"
import { BLOCKS, MARKS } from "#contentful/rich-text-types"
import { renderRichText } from "gatsby-source-contentful/rich-text"
import * as aboutStyles from "../styles/about.module.scss"
const options = {
renderMark: {
[MARKS.BOLD]: text => <strong>{text}</strong>,
},
renderNode: {
[BLOCKS.PARAGRAPH]: (node, children) => <p>{children}</p>,
},
}
const query = graphql`
{
contentfulAbout {
about
bioImage {
title
url
gatsbyImageData(
layout: FULL_WIDTH
placeholder: BLURRED
resizingBehavior: SCALE
width: 1000
)
}
aboutText {
raw
}
}
}
`
const AboutSection = () => {
const data = useStaticQuery(query);
const contentfulAbout = data.contentfulAbout
return (
<div className={aboutStyles.parent}>
<section className={aboutStyles.container}>
<div className={aboutStyles.image}>
<GatsbyImage className={aboutStyles.bioImage} image={contentfulAbout.bioImage.gatsbyImageData} alt={contentfulAbout.bioImage.title} />
</div>
<div className={aboutStyles.text}>
<h2>{contentfulAbout.about}</h2>
<p>{renderRichText(contentfulAbout.aboutText, options)}</p>
</div>
</section>
</div>
)
}
Of course, it may need some tweaking. Note that I've simplified the output so customize it as you wish/need.
Other resources:
https://www.contentful.com/developers/docs/concepts/rich-text/