This is specifically for Gatsby as that's what I was using, but I suppose the implementation will be similar in other React/GraphQL environments.

When using [@contentful/rich-text-react-renderer](https://www.npmjs.com/package/@contentful/rich-text-react-renderer) to render a Contentful entry, they suggest passing a custom rendering component for embedded entries.

However, I was unable to get a fully populated `node` in the render handlers that would contain all the fields I require, with only access to the `contentful_id` and the entry type. Whatever I fetched in graphql was available in the `references` key of the content `body`, but it wasn't being sent on. Didn't bother to check how this works under the hood, but managed to achieve what I wanted by passing the `references` object to the custom renderer and searching for the relevant entry by `contentful_id`.

<Gist id="589b178b6454c3c640105cee3af4d4dd" />


Integration and rendering of Contentful embedded assets and entries.

Contentful Embedded Content in Gatsby

MDX on GatsbyJS nests JSX components in paragraph tags which can produce invalid HTML so you end up with invalid HTML resembling:

```html
<p>
	<div class="jsx-component">...</div>
</p>
```

When using Markdown tables, it can also leave extra whitespace that can produce HTML syntax warnings. Not showstopping, but annoying all the same.

Create this plugin in your `./plugins` directory and add it to the end of your `gatsbyRemarkPlugins` in `gatsby-config.js`.

<Gist id="c5321b66ef8afabd6f0fdf67055aabc8" />


MDX wraps components with paragraph tags and can add extra whitespace in tables which produce invalid HTML. This GatsbyJS plugin cleans up the markup.

2 posts tagged “gatsby-js”

Contentful Embedded Content in Gatsby

Clean-up Extraneous Paragraph Tags and Table Whitespace in MDX on GatsbyJS