使用 Gatsby-source-contentful 使用 Gatsbyjs 和 Contentful 渲染富文本答案

【问题标题】：Rendering rich text with Gatsbyjs and Contentful using gatsby-source-contentful使用 Gatsby-source-contentful 使用 Gatsbyjs 和 Contentful 渲染富文本
【发布时间】：2021-11-20 20:07:47
【问题描述】：

我正在使用 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;

【问题讨论】：

这里只是猜测：但查询中是否缺少某些内容？如果您要输入单个条目，则必须指定一个 id（或类似的），如果您要查询集合，通常会有一个 edges 或 nodes 字段。与此处类似：gatsbyjs.com/plugins/gatsby-source-contentful/…
@stefanjudis 实际上没有。使用 graphql，如果您查询没有 id 的单个博客，它只会为您提供它提出的第一条记录。无论如何，如果您仔细查看屏幕截图示例，我确实指定了一个 ID。此外，我已经用我之前存在的查询进行了广泛的测试，这些查询运行良好（是的，它们包括边缘和节点）都无济于事。如果这是一些版本控制问题或冲突，我正在考虑从头开始一个项目以缩小范围。不过还是谢谢。
这听起来可能很假，但是您是否尝试过 gatsby clean 清理缓存？
我的错，它在工具提示的后面。 :) 很想知道这里有什么问题。
你和我。这确实阻碍了进步。 @FerranBuireu 是的，我清除了 gatsby 和浏览器中的缓存。没有运气。不过还是谢谢。

标签： graphql gatsby contentful

【解决方案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
                }
              }
            }
          }
       }

【讨论】：