-2

I'm using gatsby-source-contentful v4.6.4

According to the docs, I should be able to use a query similar to the following without issue (simplified query from the docs):

query MyQuery {
  contentfulBlogPost {
        id
        bodyRichText {
             raw
        }
    }
 }

Along with documentToReactComponents. However, the following code doesn't throw an error, but simply doesn't parse the rich text:

function ArticleBody({raw}) {

return (
<>
    {
        raw.map(rtNode => {
            return (
                <>
                    {documentToReactComponents(rtNode)}
                </>
            )
        })
    }
</>
);
}

export default ArticleBody;
silencedogood
  • 3,209
  • 1
  • 11
  • 36
  • Just a guess here: but isn't there something missing in the query? If you're going for a single entry you'd have to specify an id (or similar) and if you're queries a collections there's usually a `edges` or `nodes` field. Similar to here: https://www.gatsbyjs.com/plugins/gatsby-source-contentful/#query-for-all-nodes – stefan judis Sep 28 '21 at 21:46
  • @stefanjudis Actually no. With graphql if you query a single blog without an id it just gives you the first record it comes up with. Anyways, if you look closely at the screenshot example, I do indeed specify an ID. Also, I've tested extensively with my preexisting queries which are working fine (and yes, they include edges and nodes) all to no avail. I'm thinking of starting a project from scratch to narrow down if this is some versioning issue or conflict. Thanks anyways though. – silencedogood Sep 29 '21 at 03:22
  • It may sound dummy but have you tried cleaning the cache by `gatsby clean`? – Ferran Buireu Sep 29 '21 at 05:03
  • My bad, it's behind the tooltip thingy. :) Curious to learn what the problem here. – stefan judis Sep 29 '21 at 08:28
  • You and me both. This is really holding up progress. @FerranBuireu Yes I cleared the cache in gatsby as well as in the browser. No luck. Thanks though. – silencedogood Sep 29 '21 at 12:51
  • @stefanjudis I was able to get the rich text to display. However, I still haven't figured out why bodyRichText doesn't work. I created a repo to help. Please see answer below if you're interested. – silencedogood Sep 29 '21 at 15:05
  • It doesn't look like you're following the docs. have you tried this? -> https://www.gatsbyjs.com/plugins/gatsby-source-contentful/#rendering – stefan judis Sep 30 '21 at 14:21

1 Answers1

2

The problem was that I needed to parse the JSON, and step down the object into the content array.

Here's the component:

function ArticleBody({raw}) {

return (
    <>
        {
            JSON.parse(raw).content.map(rtNode => {
                return (
                    <>
                        {documentToReactComponents(rtNode)}
                    </>
                )
            })
        }
    </>
);
}

export default ArticleBody;

And here's the GraphQL query:

query{
          allContentfulBlog {
            edges {
              node {
                id
                blogPost {
                  raw
                }
              }
            }
          }
       }
silencedogood
  • 3,209
  • 1
  • 11
  • 36