DEV Community

Discussion on: How to Create Pages Dynamically in Gatsby Using MDX

Collapse
umbralimi profile image
Fraser Gorrie • Edited

Doesn't your code create 2 versions of each MDX source page: the one that the plugin creates automatically using the filename-turned-slug and another with the frontmatter.path you use in your exports.createPages() function?

Collapse
malroun1 profile image
Malik Gabroun Author

which plugin you mean in this case that will create filename-turned-slug, gatsby-plugin-mdx? or gatsby-source-filesystem?
gatsby-plugin-mdx will let gatsby know that you are working with mdx files and gatsby-source-filesystem will load anything that it finds in the path defined in the option object (e.g./content/posts) as part of the data layer, and because we let gatsby know that we are going to work with MDX files it will look for any .mdx files and transform those into graphql nodes.

as for exports.createPages() its not creating new slug, it is rather fetching all pages as an array as you can see in the GraphQL playground screenshot

 const result = await graphql(`
    query {
      allMdx {
        nodes {
          frontmatter {
            path
          }
        }
      }
    }
  `);

then we creating the pages using createPage method as follow

  const pages = result.data.allMdx.nodes;

  pages.forEach(page => {
    actions.createPage({
      path: page.frontmatter.path,
      component: require.resolve('./src/templates/postTemplate.js'),
      context: {
        pathSlug: page.frontmatter.path,
      },
    });
  });
};

in the context object we mapping pathSlug to frontmatter.path as path keyword is a reserved word.
once we done this it will enable us in the template we using for the mdx file as defined in the createPage object to get the content of mdx file using the pathSlug argument we defined in gatsby-node as follow

export const query = graphql`
  query($pathSlug: String!) {
    mdx(frontmatter: { path: { eq: $pathSlug } }) {
      frontmatter {
        title
        path
      }
      body
    }
  }
`;

To conclude, neither does generate filename to slug, we using the frontmatter path defined in the mdx file. in case if you want to generate slug based on file path (e.g. /posts/post1) you can see the example written in the gatsby docs here

hopefully answer the questions

Collapse
umbralimi profile image
Fraser Gorrie

That was a very good explanation! Thank you!

I guess it's just me. I wrote a file to the /src/posts/ calledtest-me.md and my gatsby-config.js settings lead to the generation of the url /test-me so I assumed (naively, it seems) that gatsby-plugin-mdx did that by itself.

I had frontmatter in test-me.md that included the url I wanted to use, in this case path: "open-for-business". Then I wrote the createPages() function much as you have and when I checked, and clean-ed, both /test-me and /open-for-business had been created.

Anyway, that's just a bit of background on what I did and was trying to do. Your explanation will doubtless lead me to the point where I just have /open-for-business.

Again. Great explanation and thanks for responding so quickly!

Thread Thread
malroun1 profile image
Malik Gabroun Author

no worries.

perhaps, if you post your usage of mdx and sourcefile plugin in gatsby-config and createPage method in gatsby-node

also you can see my implementation in a starter repo here

Thread Thread
umbralimi profile image
Fraser Gorrie

I found the problem. I installed your starter from the article, confirmed that you only have 1 page created per mdx file and traced my issue to the inclusion of gatsby-plugin-page-creator that pointed at the same folder where I had the mdx files. Simple. I didn't understand the concept properly of the gatsby and mdx build process. You helped with that. Thanks

Thread Thread
malroun1 profile image
Malik Gabroun Author

great, glad I could help