contentful-graphql-vs-rest VS rich-text

Take a look at this example repository on GitHub, which is a demo Next.js application that contains all of the example code in this post, and demonstrates how we can fetch this data and render the Rich Text field linked assets and entries using both the REST API with JavaScript SDK and the GraphQL API.

One challenge I encountered was how to render content that was defined as Rich Text in Contentful. Content in Rich Text fields are based on blocks, and when you do a GraphQL query, you're getting back JSON containing nodes with all the content in. There are a lot of different ways to render this content, and Contentful has a little more info here. I used import {renderRichText} from 'gatsby-source-contentful/rich-text' and then I could use {renderRichText (bodyText, renderRichTextOptions)} in my Article component to render the contents of bodyText. renderRichTextOptions is a component I import at the beginning of the

We always recommend using a Rich Text renderer package provided by Contentful to speed up your process when working with the Rich Text response. Contentful Rich Text renderers allow you to customise how the JSON response is rendered to your needs. You can render custom HTML, CSS classes, React components, custom attributes and more! A full list of all Rich Text renderers is available on GitHub.

I also created custom components for their rich text renderer (@contentful/rich-text-react-renderer). You can see my implementation here. And here's how I set up the GraphQL client with apollo.

There are a number of Rich Text field renderer packages available for your favorite programming languages and frameworks — check them out on GitHub here.