Parsing rich text from Contentful is a poorly-documented nightmare

[YCMitch]

So, there's not really any meaningful documentation on how to do this, and as of yet I've spent pretty much all day chasing my own tail, writing the longest, ugliest GraphQL queries I've ever seen.

Is this actually a thing that works? So far I can render one (1) paragraph tag with this humungous query:

export const pageQuery = graphql query contentPageQuery($id: String!) { contentfulContentPage(id: { eq: $id }) { title introduction { title contentBlocks { title content { nodeType content { nodeType content { nodeType value marks { type } content { nodeType content { nodeType content { nodeType } } } } } } } } } }

... but a simple unordered list causes everything to come crashing down.

I guess what I'm asking is if there's actually any documentation out there, or if any real human beings have been able to use this?

I've never missed <?php the_content(); ?> so much in my life.

[KyleAMathews]

Did you see this? https://www.gatsbyjs.org/packages/gatsby-source-contentful/?=contentful#contentful-rich-text

[YCMitch]

Yeah, I've seen it referred to as bodyRichText, childContentfulRichText, then also as childContentfulRichText within bodyRichText, then it's treated as a list of nodes here and here.

In GraphiQL I can only get very deeply nested content > content > content > content > content, which works, as long as I splice out any lists or anything that isn't a

tag...

Is there something I'm missing if these JSON fields don't exist for me?

[pieh]

@MitchEff You might want to update contentful plugin to get json field (that allow you to exactly skip doing those nested queries)

[pieh]

json field that simplifies Rich Text field handling was added in [email protected]

[janosh]

@MitchEff Some of the questions and answers in this issue might help to get a better understanding of Contentful rich text.

[janosh]

@MitchEff I'm closing this for now. Feel free to reopen if questions remain.

[toolness]

Hey, for what it's worth, I ran into a similar problem with the json field not existing because I used a Gatsby starter kit that specified ^2.0.1 for gatsby-source-contentful. You'd think this would have installed the very latest version, but I think the starter kit repository had a package.lock that locked its version at 2.0.1, so it kept complaining that it couldn't find a json field.

Once I ran npm update everything worked fine, though!

[YCMitch]

After much hair-pulling, I'm fairly sure we were victim to the same issue. I threw out all our packages and installed everything fresh, and the json field then showed up.

[raelBernardino]

!!!!!!
I deleted my package.lock.json and uninstalled the v4.0.0 of gatsby-source-contentful and installed the 3.0.7, I managed to find the "json" query

I see this as a temporary fix though because obviously I'd like to be using the latest version of that package

[caren1]

!!!!!!
I deleted my package.lock.json and uninstalled the v4.0.0 of gatsby-source-contentful and installed the 3.0.7, I managed to find the "json" query

I see this as a temporary fix though because obviously I'd like to be using the latest version of that package

Thanks, actually worked!

Ran to the same issue, seems that they have changed something for this particular query, as 'json' is not available in the newest plugin version. Based on the guide it is suggested to refer to allContentfulBlogPost { edges { node { bodyRichText, however this field is missing in my queries docs.

[KTG1]

Hey, for what it's worth, I ran into a similar problem with the json field not existing because I used a Gatsby starter kit that specified ^2.0.1 for gatsby-source-contentful. You'd think this would have installed the very latest version, but I think the starter kit repository had a package.lock that locked its version at 2.0.1, so it kept complaining that it couldn't find a json field.

Once I ran npm update everything worked fine, though!

I have the exact same problem, and I have used "npm update", still have the same problem, @toolness. Probably, I will use the old version.