Minimizing configuration for programmatically generated MDX pages

[kelvindecosta]

Overview

Hey everyone!

I want to use as little configuration as possible to programmatically create pages from .mdx files.

Behavior

I have 2 types of programmatically generated pages:

• pages
• posts

I've separated these two types of pages because they would require different templates.

pages

I have configured gatsby-source-filesystem to use src/pages as pages instances.
I then configured gatsby-plugin-mdx to create pages from these pages instances with a defaultLayout for the same.

The template is very simple as it only uses pageContext and MDXProvider.
There is no grapql query required, and I can easily pull the frontmatter from pageContext.

posts

Essentially, I want posts instances in src/posts each with a custom slug and a date both of which are derived from the file name.

Filename	slug	date
src/posts/2021-03-15-hello-world	/blog/2021-03-15-hello-world	Date.UTC(2021, 2, 15)

Currently, I have:

• configured gatsby-source-filesystem with posts.

• used Gatsby Node APIs

  // Extend node creation
  exports.onCreateNode = ({ node, actions, getNode }) => {
    // `Mdx`
    if (node.internal.type === "Mdx") {
      // Check for `posts`
      if (/\/posts\//.test(node.fileAbsolutePath)) {
        // Get relative path
        const relativePath = createFilePath({ node, getNode })
  
        // Parse relative path
        const {
          groups: { year, month, day, title },
        } = relativePath.match(
          /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})-(?<title>.+)\//
        )
  
        actions.createNodeField({ name: "slug", node, value: `/blog/${title}` })
  
        actions.createNodeField({
          name: "date",
          node,
          value: new Date(Date.UTC(year, month - 1, day)),
        })
      }
    }
  }
  
  // Programmatically create pages
  exports.createPages = async ({ graphql, actions, reporter }) => {
    // Query posts
    const {
      data: {
        allFile: { nodes: posts },
      },
    } = await graphql(`
      {
        allFile(filter: { sourceInstanceName: { eq: "posts" } }) {
          nodes {
            childMdx {
              id
              fields {
                slug
              }
            }
          }
        }
      }
    `)
  
    posts.forEach(
      ({
        childMdx: {
          id,
          fields: { slug: path },
        },
      }) => {
        actions.createPage({
          path,
          component: require.resolve("./src/templates/post/index.tsx"),
          context: { id },
        })
      }
    )
  }

• created a template with a pageQuery.

I don't like the fact that there is both a slug attribute and a fields : { slug } attribute on the Mdx node.
I also think that this has a lot of room for refactoring.

Refactoring

I was wondering if I could

• eliminate the use of onCreateNode API by using createResolvers to:
  • create the date attribute directly onto Mdx, and
  • override the default slug attribute on the Mdx.
• use gatsby-plugin-page-creator with the posts instances and just point gatsby-plugin-mdx to a defaultLayout for posts.

I feel like this would be easier to maintain.

Any suggestions are appreciated!