使用 Gatsbyjs 渲染富文本，使用 gatsby-source-contentful 渲染 Contentful

Question

我正在使用 gatsby-source-contentful v4.6.4

根据 docs，我应该能够毫无问题地使用类似于以下内容的查询（来自文档的简化查询）：

query MyQuery {
  contentfulBlogPost {
        id
        bodyRichText {
             raw
        }
    }
 }

与 documentToReactComponents 一起。然而，下面的代码并没有抛出错误，只是没有解析富文本：

function ArticleBody({raw}) {

return (
<>
    {
        raw.map(rtNode => {
            return (
                <>
                    {documentToReactComponents(rtNode)}
                </>
            )
        })
    }
</>
);
}

export default ArticleBody;

Answer 1

问题是我需要解析 JSON，并将对象下移到内容数组中。

组件如下：

function ArticleBody({raw}) {

return (
    <>
        {
            JSON.parse(raw).content.map(rtNode => {
                return (
                    <>
                        {documentToReactComponents(rtNode)}
                    </>
                )
            })
        }
    </>
);
}

export default ArticleBody;

这是 GraphQL 查询：

query{
          allContentfulBlog {
            edges {
              node {
                id
                blogPost {
                  raw
                }
              }
            }
          }
       }

使用 Gatsbyjs 渲染富文本，使用 gatsby-source-contentful 渲染 Contentful

Rendering rich text with Gatsbyjs and Contentful using gatsby-source-contentful

contentful

graphql

gatsby