Bug: Computing MDX slug field

[meganesu]

Context

Before migrating to Gatsby 5, I was computing the slug for MDX posts using the file name. But now after following the migration guides, the gatsby-node.js file is using the frontmatter title to generate the slugs.

This means that most of my blog posts have changed URLs, which is resulting in 404s in posts where I cross-link to other posts.

• [x] Fix: This ticket should cover changing the behavior back to what it was previously (using the file name to generate the slug). #101
• [x] Add tests to prevent this regression in the future. (Checklinks Netlify integration)

[meganesu]

In the Gatsby Docs, it says that you should be able to use pass getNode(node.parent) into the slugify method, like so:

createNodeField({
      node,
      name: "slug",
      value: `/${slugify(getNode(node.parent).name)}`,
    })

But for some reason, that's making the /blog page (src/pages/blog/index.js) get created by the gatsby-plugin-mdx plugin instead of gatsby-plugin-page-creator.

Expected output in GraphiQL for the /blog page:

Actual output after updating createNodeField to use getNode(node.parent).name:

[meganesu]

WIP:

import readingTime from "reading-time"
import slugify from "@sindresorhus/slugify"

export const onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === "Mdx") {
    const fileReadingTime = readingTime(node.body)
    createNodeField({
      node,
      name: "timeToRead",
      value: {
        ...fileReadingTime,
        minutesRoundedUp: Math.ceil(fileReadingTime.minutes)
      },
    })

    // slug = parent file node's name field
    // if slug = "index", reset slug to parent file node's relative dir
    // if parent file node's name is "index"

    // const parentFileNode = getNode(node.parent)
    // let slug = parentFileNode.name
    // if (slug === "index") {
    //   slug = parentFileNode.relativeDirectory
    // }
    // console.log("NEW MDX NODE:", { id: node.id, internal: node.internal })
    // console.log("AND ITS PARENT", { absolutePath: parentFileNode.absolutePath })

    // console.log("MDX FILE:", `${parentFileNode.relativeDirectory}/${parentFileNode.name}`)
    // console.log("USING SLUG:", slug)

    createNodeField({
      node,
      name: "slug",
      value: `/${getNode(node.parent).name}`,
    })
  }
}

[meganesu]

I think this is happening because of the way file system routes work. Since there's not a way to filter which MDX nodes pages are getting created for, the {mdx.files__slug}.js file system route is creating pages for all the MDX nodes.

That's why I'm ending up with pages like "/blog/accessibility", "/blog/manual", "/blog/projects".

Fix: Generate blog post pages using gatsby-node.js and createPages instead of file system routes API.

• Gatsby Doc: Adding MDX Pages

[meganesu]

Reopening, since I still need to add tests that will prevent this regression in the future

[meganesu]

Added the Checklinks integration on Netlify, which should catch this regression in the future.