6

I'd like to render MDX content directly from list that is being returned from allMdx query. I'm using 'gatsbyjs' with 'gatsby-plugin-mdx'.

Let's have a query:

export const query = graphql`
  query MyQuery {
    allMdx {
      nodes {
        id
        body
        frontmatter {
          title
          slug
        }
      }
    }
  }
`;

As can be seen in official documentation https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#updating-page-templates <MDXRenderer> component was removed. So it's no longer possible to do such thing as:

{data.allMdx.nodes.map((n) => (
    <MDXRenderer>{n.body}</MDXRenderer>
))}

Instead now it is required to do it in that way:

function MyComponent({ children }) {
  return (
    <div>
      {children}
    </div>
  );
}

But I'd like to render MDX from allMdx so that I have a list of MDX posts for example, do you know guys whether it is possible and how to do it?

vldmrrdjcc
  • 2,082
  • 5
  • 22
  • 41
USHKA
  • 647
  • 4
  • 18
  • I am also puzzling over this. I've managed to compile my MDX in my `gatsby-node.js` using the `compileMDXWithCustomOptions` exported from `gatsby-plugin-mdx`, and add that as a node field. But when retreiving via a query the compiled MDX is just a string of javascript code. I don't know how to render that into the page. – Tim MB Nov 16 '22 at 17:31
  • 3
    See also https://github.com/gatsbyjs/gatsby/discussions/37045. – Tim MB Nov 16 '22 at 17:36

0 Answers0