Question 22293 in SEO Question posted in
Some basic information to get you started with this can be found here.

How to render from a mdx file of same directory to a react component? – SEO

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 * as everything from './about.mdx'

import { FeaturedPosts } from 'components/FeaturedPost'

interface Props {
  data: Data
}

const HomePage = (props: Props) => {
  // console.log()
  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>

        <MDXContent>

        </MDXContent>

      </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
        }
      }
    }
  }
`

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);
`

I am new to web dev and react, mdx, graphql, tsx, gatsby.
Here is my index.tsx
and I also have about.mdx file in the same directory which renders inside /about path.
What I want to do is render the same content from about.mdx to my index.tsx file.
But I’m not sure how and where to put it and import it to my index.tsx

Tags:

2

Answers


  1. 0

    You can create another GraphQL query to fetch the about.mdx content in your index.tsx:

    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
        }
      }
    }
    aboutContent: allMdx(
      filter: {fileAbsolutePath: {eq: "/about.mdx"  }}) {
        edges{
         node {
          fields {
            path
          }
          frontmatter {
           #your content  
          }
        }
      }
    }
  }
`

    Double-check the query in the GraphiQL playground (localhost:8000/___graphql) in order to know the exact fileAbsolutePath or to find another suitable filter like relativePath, the query structure and response.

    Once you validate the query, since it’s aliased with aboutContent: allMdx, your about content will be inside:

      const { edges } = props.data.aboutContent
    Login or Signup to reply.
  2. 0

    Import the MDX file into your page and render it as a React component:

    // Rest of imports...

import AboutMDX from './about.mdx'

const Page = () => (
  <main>
    <AboutMDX />
  </main>
)

export default Page
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search