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.
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>