Using Mdx 2 files to pass frontmatter and body to component

[tordans]

I want to use small mdx-files as file based micro CMS to pass content to teaser-component that I have on my pages.

I have it working when importing the mdx file into my index page and passing the mdx file as a component to the children of my teaser-component.

However, I would prefer passing the body to the component just using graphQL and handling the transformation of the body to html inside my teaser-component.

The question is: How can I transform the body string I receive from graphQL with allMdx to html?

---

This is my working index.tsx. However, I don't want to pass <Content /> like this.

import { graphql, HeadFC, PageProps } from 'gatsby'
import React from 'react'
import { Layout, MetaTags } from '~/components/layouts'
import { Teaser } from '~/components/Teaser'
import { CmsTeaser } from '~/components/Teaser/CmsTeaser'
import PngDemoImag from '~/images/icon.png'
import Content from '../../content/home/teaser1.mdx'

const IndexPage: React.FC<PageProps<Queries.IndexPageQuery>> = ({ data }) => {
  return (
    <Layout>
      <Content />

      <section className="flex gap-3">
        <CmsTeaser
          data={data.allMdx.nodes.find((e) => e?.frontmatter?.componentId === 'home/teaser1')}
        >
          <Content />
        </CmsTeaser>
        <Teaser title="Manual title" href="#foo" imageUrl={PngDemoImag}>
          Manual text
        </Teaser>
      </section>
    </Layout>
  )
}

export default IndexPage

export const Head: HeadFC = () => <MetaTags title="Homepage" />

export const pageQuery = graphql`
  query IndexPage {
    allMdx {
      nodes {
        body
        frontmatter {
          componentId
          title
          href
          image {
            childImageSharp {
              gatsbyImageData
            }
          }
        }
      }
    }
  }
`

[violy]

If your body is an html string, you can use

<div dangerouslySetInnerHTML={{_html:body}} />

[tordans]

@violy the issue is, that the body is not parsed to Markdown. It looks like, the only way to get this parsing going, is some magic that happens when creating separate pages per blogpost and when importing the mdx file as import.

Here is the code for the test case: https://github.com/FixMyBerlin/mdx-as-prop-demo/tree/main

Test cases: