Gatsby的内容:访问json不可能呈现RichText字段(raw代替)

Question

我正在跟踪一份文件关于如何用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

Answer 1

满足的DevRel在这里。

v4中的已经发生了巨大的变化。现在建议使用raw。您可以在变化量g中找到更多信息。

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