Hi
we have a model in datocms called BlogPost which has postBodyMdx. We used gatsby-source-datocms and gatsby-plugin-mdx plugin. The plugin adds an additional field to the node called postBodyMdxNode which has childMdx property , using that we use to render the mdx content like below
const MdxContent = ({ childMdx }) => {
return (
{childMdx.body}
);
};
const BlogPost = ({
postBodyMdxNode,
}) => {
return ;
}
But now after upgrading the gatsby-plugin-mdx to the latest version(5.12.0) we are not getting postBodyMdxNode for the blog post model, because now gatsby-plugin-mdx supports only local file mdx.
Refer to the below issue on github for more detail
Sample graphql used in the code
query MyQuery {
allDatoCmsBlogPost {
nodes {
postBodyMdxNode {
childMdx {
body
}
}
id
}
}
}
I need help in rendering mdx field from datocms model in gatsby. I don’t find any help document which uses MDXProvider and MDXRenderer.
I know i can use the field childMarkdownRemark.html(from below graphql) and use dangerouslySetInnerHTML to render it. But in the mdx we have used some shortcodes which won’t get replaced with this way.
query MyQuery {
allDatoCmsBlogPost {
nodes {
postBodyMdxNode {
childMarkdownRemark {
html
}
}
id
}
}
}
Datocms CMS is being so popular, that I am wondering how everybody rendering mdx from datcoms with shortcodes in gatsby.
@mat_jack1 , @s.verna Can you please help? . In our project we can’t keep using the older version of gatsby-plugin-mdx. We wanted to upgrade to gatsby v5 version.