Gatsby+GraphQL技术问题：如何关联查询并渲染带Markdown的问答内容

问题核心 #

你的Contentful answer 字段中的Markdown内容已被Gatsby转换为childrenMarkdownRemark节点，但你没有正确访问转换后的html属性，且未用React的方法解析HTML字符串。

修正步骤 #

1. 优化GraphQL查询

保留与问题关联的childrenMarkdownRemark节点，无需单独查询全局allMarkdownRemark：

const data = useStaticQuery(graphql`
  query {
    allContentfulQuestionAnswer {
      edges {
        node {
          question
          id
          answer {
            childrenMarkdownRemark {
              html
            }
          }
        }
      }
    }
  }
`)

2. 正确渲染HTML内容

React不会自动解析HTML字符串，需使用dangerouslySetInnerHTML插入转换后的内容，同时通过可选链避免空值报错：

<>
  <h1>FREQUENTLY ASKED QUESTIONS</h1>
  {data.allContentfulQuestionAnswer.edges.map(({ node }) => (
    <div className="repairCost" key={node.id}>
      <p>{node.question}</p>
      {/* 插入解析后的HTML表格 */}
      <div dangerouslySetInnerHTML={{ __html: node.answer.childrenMarkdownRemark[0]?.html || '' }} />
    </div>
  ))}
</>

关键说明 #

• childrenMarkdownRemark是数组类型，需通过[0]取第一个节点的html值
• dangerouslySetInnerHTML是React唯一支持直接插入HTML的方式（确保内容为可信来源，避免XSS风险）
• 可选链?.和默认空字符串能防止无Markdown内容时出现渲染报错

内容的提问来源于stack exchange，提问作者Kelsey