Contentful with Gatsby: rendering RichText field by accessing json not possible (raw instead)

Question

I am following a documentation on how to implement Contentful's RichText field type with Gatsby.

My GraphQL query only returns a field raw on my RichText field called synopsis:

query MyQuery {
  allContentfulCountry {
    edges {
      node {
        id
        synopsis {
          raw
        }
      }
    }
  }
}

It returns:

{
  "data": {
    "allContentfulCountry": {
      "edges": [
        {
          "node": {
            "id": "fa07b3db-6acb-5b9a-7c4b-c42ef3c191b0",
            "synopsis": {
              "raw": "{\"data\":{},\"content\":[{\"data\":{},\"content\":[{\"data\":{},\"marks\":[],\"value\":\"The actual rich text...\",\"nodeType\":\"text\"}],\"nodeType\":\"paragraph\"}],\"nodeType\":\"document\"}"
            },
            "slug": "france"
          }
        }
      ]
    }
  }
}

The documentation assumes documentToReactComponents(node.bodyRichText.json, options) but I can't access json and need to do this: JSON.parse(country.synopsis.raw)

Am I missing something?

"@contentful/rich-text-react-renderer": "^14.1.2",
"@contentful/rich-text-types": "^14.1.2",

System:
  OS: macOS 11.0.1
  CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Shell: 5.8 - /bin/zsh
Binaries:
  Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
  npm: 6.14.9 - ~/.nvm/versions/node/v12.13.0/bin/npm
Languages:
  Python: 2.7.16 - /usr/bin/python
Browsers:
  Firefox: 82.0.3
npmPackages:
  gatsby: ^2.26.1 => 2.26.1 
  gatsby-image: ^2.6.0 => 2.6.0 
  gatsby-plugin-intl: ^0.3.3 => 0.3.3 
  gatsby-plugin-newrelic: ^1.0.5 => 1.0.5 
  gatsby-plugin-react-helmet: ^3.3.5 => 3.3.5 
  gatsby-plugin-sharp: ^2.9.0 => 2.9.0 
  gatsby-source-contentful: ^4.1.0 => 4.1.0 
  gatsby-transformer-remark: ^2.11.0 => 2.11.0 
  gatsby-transformer-sharp: ^2.5.6 => 2.5.6 
npmGlobalPackages:
  gatsby-cli: 2.14.0

Answer 1

Contentful DevRel here. 👋

There has been a breaking change in the gatsby-source-contentful in v4. It's now recommended to use raw. You can find more information in the changelog.

A recommended Gatsby query from the changelog:

export const pageQuery = graphql`
  query pageQuery($id: String!) {
    contentfulPage(id: { eq: $id }) {
      title
      slug
      description {
        raw
        references {
          ... on ContentfulPage {
            # contentful_id is required to resolve the references
            contentful_id
            title
            slug
          }
          ... on ContentfulAsset {
            # contentful_id is required to resolve the references
            contentful_id
            fluid(maxWidth: 600) {
              ...GatsbyContentfulFluid_withWebp
            }
          }
        }
      }
    }
  }
`