Render Contentful rich text in Gatsby
In this lesson, you will learn how to render Contentful Rich text in your Gatsby website as well as customizing styling for every node types like Heading and embedded assets.
What is Contentful rich text?
Rich text is a new JSON format for handling complex content structures in a strongly typed manner. It is represented by the rich text field in Contentful.
Rendering The rich text
Contentful offers many tools to help you work with our Rich Text feature. This guide is meant to help put the pieces together and provide resources for learning more. It focuses majorly on Contentful’s SDK , rich-text-html-renderer , and rich-text-react-renderer to render your Rich Text fields with HTML.
Instructor: [00:00] We have our Gatsby website, listing lessons coming from Contentful. If we click in one of the lessons, we can see the detail, but here, we're only showing the title. We would like to show more text from this body, which is of type rich text.
[00:19] Let's take a look first how this data is sent to us. If we go to the GraphQL, and then request the body, inside of the body, we can see JSON. In the result here, we have all our nodes, and you can see the type and all the content.
[00:41] We need a way to parse this JSON to React components. To do that, we can use the rich text React renderer. First, let's stop our server, and then npm install contentful/rich-text-react-renderer and contentful/rich-text-type.
[01:06] In the lesson JS here, we need to add the body to the query. We [inaudible] the JSON data from the body. We need to import the documentToReactComponent function from the rich text React renderer. We take this function, and in the markup here, we give it the data from the body. It will be data.contentfulLesson.body.json.
[01:46] If we save now and run our server again, and once we refresh, we can see indeed here we have the content. There is a little problem here. If we inspect this element, for example, it's an h2. We want to apply to it the same class name as the title in here. To do that, the documentToReactComponent accepts a second argument to add additional styling and markup to every node type.
[02:25] Let's first import blocks from the Contentful rich text types, and we add here a second argument, an object configuration. For every heading two, we will receive this callback, and then we can return how we can show it up.
[02:42] What we'll take here is the same content, but we will wrap it into an h2 with a class name textForExcel. Let's save. You can see here our headings are fixed. Let's go ahead and add an image in here. It will be an embedded asset. We'll pick this one I already uploaded.
[03:06] Let's publish. Let's stop our server here, and then run it again. You can see here there is a problem. We're not seeing our image. That's because the renderer does not display images by default, mainly because it's an asset, and an asset can be something else different than an image.
[03:33] We can do the same, like we did with headings, and then render the correct element. Let's go to the options here, and then add the blocksEmbedded asset, and return an image with the correct URL. Let's save this.
[03:54] We have an error. That's probably because of cache problems. Let's remove the cache and public folder, and then run again. You can see here that we are seeing indeed our image, and all the headings are rendered correctly.
[04:15] That's how you render the rich text data from Contentful into Gatsby.