Unable to render .mdx file contents to the landing page without creating any route

Question

I'm very new to gatsby and graphql. I'm exploring gatsby, graphql. What I want to do is render the contents of about.mdx in the root directory. By default the gatsby creates a url like: mysite.com/about from about.mdx. But I want my landing page the root website to render same content as mysite.com/about.

What I was doing is using graphql to extract the contents of about.mdx. in my index.tsx file.

But if I render rawBody to index.tsx it doesn't show up like the render of mysite.com/about which is rendered from about.mdx.

How can I fix this issue to render the about.mdx in my root url path.

Here's the index.tsx code:

import React from 'react'
import { Link, graphql } from 'gatsby'
import { Wrapper, SectionTitle, Header, SectionSubTitle, SEO } from 'components'
import { Layout } from 'layouts'
import { Content } from 'layouts/components'
import Helmet from 'react-helmet'
import config from 'config/siteConfig'
import Data from 'models/Data'
import styled from 'styled-components'
import { FeaturedPosts } from 'components/FeaturedPost'

interface Props {
  data: Data
}

const HomePage = (props: Props) => {
  const { edges } = props.data.allMdx

  return (
    <Layout>
      <Helmet title={`Blog | ${config.siteTitle}`} />
      <SEO path="/" data={{ title: config.siteTitleAlt }} />
      <Header>
        <SectionTitle>
          {config.siteTitle}
          <Line />
          <SectionSubTitle>{config.siteDescription}</SectionSubTitle>
        </SectionTitle>
      </Header>
      <Wrapper>
        <Content>
         {edges.map((post) => (
              <li
                key={post.node.frontmatter.title}
                style={{ listStyleType: 'none', margin: 0 }}
              >

                  <DateTag dateTime={post.node.frontmatter.standardDate}>
                    <p>{post.node.frontmatter.date}
                    {post.node.rawBody}</p>
                  </DateTag>

                
              </li>
              
            ))}
        </Content>
      </Wrapper>
    </Layout>
  )
}
// Gatsby needs this default export to work.
// eslint-disable-next-line import/no-default-export
export default HomePage

// export const query = graphql`
//   query {
//     allMdx(
//       sort: { fields: [frontmatter___date, frontmatter___title], order: DESC }
//       limit: 10
//     ) {
//       totalCount
//       edges {
//         node {
//           fields {
//             path
//           }
//           frontmatter {
//             title
//             date(formatString: "MMMM D, YYYY")
//             standardDate: date(formatString: "YYYY-MM-DD")
//           }
//           excerpt(pruneLength: 200)
//           timeToRead
//         }
//       }
//     }
//   }
// `
export const query = graphql`
query {
  allMdx(filter: {id: {eq: "0d5c6066-a6d3-595d-8902-aedbfcdc2ce7"}, slug: {}}) {
    edges {
      node {
        id
        frontmatter {
          title
        }
        rawBody
      }
    }
  }
}
`

const Line = styled.hr`
  color: white;
  width: 5rem;
  margin: 0.5rem auto;
  height: 3px;
`

const Title = styled.span`
  margin-right: 0.5rem;
`

const DateTag = styled.time`
  color: rgba(0, 0, 0, 0.5);
`

what rawbody renders is pure text without any formatting.

The first screenshot:

The second screenshot:

Answer 1

I solved the issue. What I did was wrap the body with MDXRenderer and use body instead of rawBody.

import { MDXRenderer } from 'gatsby-plugin-mdx' 
`<MDXRenderer>{post.node.body}</MDXRenderer>