I am trying to render the rich text from this query but the page is blank. Im really confused because the docs only show the example of how an image asset is rendered. Can anyone help??
I am trying to show the rich text in the format it was written in contentful i.e the first line should be bold
/* eslint-disable */
import React from 'react';
import { Helmet } from 'react-helmet';
import { graphql } from 'gatsby';
import Layout from '../components/layout';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
import { renderRichText } from "gatsby-source-contentful/rich-text"
import { BLOCKS, MARKS } from "@contentful/rich-text-types"
export const query = graphql`
query MyQuery($slug: String) {
contentfulLongPost(Slug: {eq: $slug}) {
title
updatedAt(formatString: "MMMM Do, YYYY")
body {
raw
}
}
}
`;
const options = {
renderMark: {
[MARKS.BOLD]: (text) => <span>{text}</span>
},
}
const CaseStudy = ({data}) => {
const { bodyRichText } = data.contentfulLongPost
return (
<Layout>
<div> {bodyRichText && renderRichText(bodyRichText, options)}</div>
</Layout>
);
};
export default CaseStudy;<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>You don't have any bodyRichText field so I don't understand why you are destructuring at:
const { bodyRichText } = data.contentfulLongPost
This is extracted from the docs, where their data structure has a bodyRichText. You are accessing directly to raw so you can omit it. Assuming that your query works (and it's a lot to assume, test it at localhost:8000/___graphql), I think you are looking for:
const CaseStudy = ({data}) => {
return (
<Layout>
<div> {data.contentfulLongPost.body && renderRichText(data.contentfulLongPost.body, options)}</div>
</Layout>
);
};
But I guess you'll need to tweak more the query. I'm not sure at all that you are fetching properly the raw field in all use-cases.