使用 Gatsby 显示内容丰富的富文本集合

Question

我正在构建一个使用 Contentful 来获取数据的 Gastby 项目。在下面的示例中，我试图显示一组富文本。

import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import { INLINES, BLOCKS, MARKS } from "@contentful/rich-text-types"
import { renderRichText } from "gatsby-source-contentful/rich-text"

const LogosGQL = () => {
  const data = useStaticQuery(query)
  const firstRichContent = data.allContentfulAboutUs.nodes

  return (
    <div>
      {firstRichContent.map((page, index) => {
        renderRichText(page.content, options)
      })}
    </div>
  )
}
const options = {
  renderMark: {
    [MARKS.BOLD]: text => <b className="font-bold">{text}</b>,
  },
  renderNode: {
    [INLINES.HYPERLINK]: (node, children) => {
      const { uri } = node.data
      return (
        <a href={uri} className="underline">
          {children}
        </a>
      )
    },
    [BLOCKS.HEADING_1]: (node, children) => {
      return <h1>{children}</h1>
    },
  },
}

const query = graphql`
  {
    allContentfulAboutUs {
      nodes {
        content {
          raw
        }
        contentful_id
      }
    }
  }
`

export default LogosGQL

我看到的错误如下：

Error in function renderRichText in ./node_modules/gatsby-source-contentful/rich-text.js:14
Cannot read properties of null (reading 'raw')

./node_modules/gatsby-source-contentful/rich-text.js:14
Open in Editor
  12 | // @ts-check
  13 | function renderRichText({
> 14 |   raw,
     |  ^
  15 |   references
  16 | }, options = {}) {
  17 |   const richText = JSON.parse(raw); // If no references are given, there is no need to resolve them

我知道当我尝试映射我的节点数组时出现问题，因为当我尝试只渲染一个条目时，

const LogosGQL = () => {
  const data = useStaticQuery(query)
  const firstRichContent = data.allContentfulAboutUs.nodes[0].content

  return <div>{renderRichText(firstRichContent, options)}</div>
}

我能够在屏幕上看到正确呈现的输出。但是，我想要来自所有元素的富文本。在这种情况下，映射节点数组不是可行的方法吗？

Answer 1

假设以下代码段有效：

const LogosGQL = () => {
  const data = useStaticQuery(query)
  const firstRichContent = data.allContentfulAboutUs.nodes[0].content

  return <div>{renderRichText(firstRichContent, options)}</div>
}

似乎content节点的某些raw数据在某些节点中设置不正确，因为方法完全相同。

尝试使用：

 {firstRichContent.map((page, index) => {
    console.log(index);
    renderRichText(page.content, options)
  })}

查看违规位置

此外，由于 useStaticQuery 钩子水合物的方式，有可能在 use-cases 中，数据来自 null（或空），也尝试使用：

 {firstRichContent && firstRichContent.map((page, index) => {
    console.log(index);
    renderRichText(page.content, options)
  })}

如果上面的代码片段有效（意味着在当前情况下破坏了您的代码）意味着数据获取不是问题，问题出在 content 或 raw 位置之一.

在这种情况下，要绕过此可空性，您只需要：

 {firstRichContent.map((page, index) => {
    if(page.content){
       renderRichText(page.content, options)
    }
  })}

使用 Gatsby 显示内容丰富的富文本集合

Displaying a collection of contentful rich text with Gatsby

reactjs

contentful

gatsby