Gatsby-plugin-mdx MDXRenderer replacement

Support
1

Per your documentation the replacement of MDXRenderer for page templates is to get the rendered component through children: gatsby-plugin-mdx | Gatsby

How about component using useStaticQuery? All I want is to query all the rendered components so I can arrange myself.

For example something like this:

const BlogComponent = () => {
  const data = blogQuery();
  return (
    <div>
      {data.allMdx.nodes.map((node) => (
        <article key={node.id}>
          <h2>{node.frontmatter?.title}</h2>
          <p>Posted: {node.frontmatter?.date}</p>
          <MDXRenderer>{node.body}</MDXRenderer>
        </article>
      ))}
    </div>
  )
}

export const blogQuery: () => Queries.BlogComponentQuery = () => useStaticQuery(graphql`
  query BlogComponent {
    allMdx(sort: { frontmatter: { date: DESC }}) {
      nodes {
        frontmatter {
          date(formatString: "YYYY-MM-D")
          title
        }
        body
        id
      }
    }
  }
`);

export default BlogComponent
2

What exactly is your question? Are you having some error or issues?

3

The question is, this used to be possible before you deprecated MDXRenderer, now that it’s gone, how do we achieve the same?

5

hey Cody! Can you share the errors/warnings you see when running the above? using <MDXRenderer>{node.body}</MDXRenderer>? can you also share your gatsby & gatsby-plugin-mdx versions?

6 
    "gatsby": "^5.11.0",
    "gatsby-plugin-mdx": "^5.11.0",

I couldn’t run it because MDXRenderer doesn’t exist, I’m just using it to showcase what I would’ve done if it were. I only found out about its existence after researching online, question is, how do I achieve the same since its removal? Or otherwise, is it dev’s intention to remove support for use case like this, versus an unintended regression?

7

Thanks for following up! You’re correct, unfortunately in that use cases such as yours aren’t currently supported in the new version of gatsby-plugin-mdx. While our Frameworks team is aware of this limitation, we don’t currently have any plans to introduce support. You’ll see similar questions in the discussion here: Render multiple mdx file into a single page · gatsbyjs/gatsby · Discussion #37301 · GitHub. Sincere apologies for any inconvenience there! If this is required for your project, I’d recommend using the previous version of gatsby-plugin-mdx with support for the component.

8

Thanks for the clarification.