内容丰富的 Gatsby：无法通过访问 json 来呈现 RichText 字段（而不是原始）答案

【问题标题】：Contentful with Gatsby: rendering RichText field by accessing json not possible (raw instead)内容丰富的 Gatsby：无法通过访问 json 来呈现 RichText 字段（而不是原始）
【发布时间】：2021-03-05 17:06:59
【问题描述】：

我正在关注a documentation，了解如何使用 Gatsby 实现 Contentful 的 RichText 字段类型。

我的 GraphQL 查询仅在名为 synopsis 的 RichText 字段上返回字段 raw：

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

{
  "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"
          }
        }
      ]
    }
  }
}

文档假定documentToReactComponents(node.bodyRichText.json, options)，但我无法访问json，需要这样做：JSON.parse(country.synopsis.raw)

我错过了什么吗？

"@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

【问题讨论】：

标签： graphql gatsby contentful

【解决方案1】：

这里有内容的 DevRel。 ?

v4 中的 gatsby-source-contentful 发生了重大变化。现在推荐使用raw。您可以在changelog找到更多信息。

更新日志中推荐的 Gatsby 查询：

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
            }
          }
        }
      }
    }
  }
`

【讨论】：

啊，好吧，我没有使用任何