满足于 Gatsby：无法通过访问 json 呈现 RichText 字段（改为原始）

Question

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

我的 GraphQL 仅查询 returns 我的 RichText 字段上的一个字段 raw 名为 synopsis:

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

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

文档假定 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

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

满足于 Gatsby：无法通过访问 json 呈现 RichText 字段（改为原始）

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

contentful

graphql

gatsby