Gatsby 5渲染MDX遇问题：升级后Markdown无法转为HTML

核心问题 #

你查询的body字段是未编译的原始Markdown字符串，并非可直接渲染的React组件，仅用MDXProvider无法完成解析渲染。

修复步骤 #

1. 修改GraphQL查询字段 #

将查询中的body替换为compiledBody——这是Gatsby编译MDX后生成的可执行代码字符串：

query MyQuery {
  allMdx {
    nodes {
      compiledBody
    }
  }
}

2. 使用useMDXComponent渲染编译后的内容 #

通过@mdx-js/react提供的useMDXComponent钩子，将compiledBody转换为可渲染的React组件：

import React from "react"
import { useMDXComponent } from "@mdx-js/react"

export function RenderMDX({ compiledBody }) {
  const MDXComponent = useMDXComponent(compiledBody)
  return <MDXComponent />
}

3. （可选）用MDXProvider自定义组件 #

如果需要自定义MDX渲染的组件（比如自定义链接样式、标题标签），再结合MDXProvider使用：

import React from "react"
import { useMDXComponent, MDXProvider } from "@mdx-js/react"

// 自定义组件映射
const customComponents = {
  a: (props) => <a {...props} className="custom-link" target="_blank" rel="noopener noreferrer" />,
  h2: (props) => <h2 {...props} className="text-xl font-bold" />
}

export function RenderMDX({ compiledBody }) {
  const MDXComponent = useMDXComponent(compiledBody)
  return (
    <MDXProvider components={customComponents}>
      <MDXComponent />
    </MDXProvider>
  )
}

4. 检查插件配置（可选） #

如果你的Markdown文件后缀是.md，需要在gatsby-plugin-mdx配置中添加扩展名支持：

{
  resolve: `gatsby-plugin-mdx`,
  options: {
    extensions: [`.mdx`, `.md`],
  },
},

为什么之前的方法无效？ #

MDXProvider的作用是提供自定义组件的上下文，不能直接解析原始Markdown字符串。必须先通过Gatsby编译得到compiledBody，再用useMDXComponent将其转换为React组件，才能正常渲染。

内容的提问来源于stack exchange，提问作者Félix Paradis