DEPRECATED
Please read this resource: Using Rich Text with Gatsby to get the correct way to render Rich Text content in Gatsby.
Package @contentful/gatsby-transformer-contentful-richtext
no longer maintained and deprecated in favour of gatsby-source-contentful
and @contentful/rich-text-react-renderer
.
Reasons for deprecation
We've built Rich Text with the idea that developers have full control over the presentation of the Rich Text documents. Although Transformer Plugins are an excellent solution for the data transformation, it's not like that for the rendering:
-
lack of flexibility: existing plugin api forces to have only one place for defining resolvers (in
gatsby-config.js
) which makes it impossible to influence rendering depending on the context (e.g. use different components in header and footer). -
no jsx support: it is not possible to use React Components inside
gatsby-config.js
file.
Replacement
The long-term replacement for @contentful/gatsby-transformer-contentful-richtext
is a combination of gatsby-source-contentful
and @contentful/rich-text-react-renderer
packages.
JSON output is accessible on the Rich Text Node, see example query:
{
allContentfulBlogPost {
edges {
node {
bodyRichText {
json
}
}
}
}
}
The following snippet shows a way to define how Rich Text document is rendered:
import React from 'react';
import { BLOCKS, MARKS } from '@contentful/rich-text-types';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
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>,
},
};
documentToReactComponents(node.bodyRichText.json, options);