Gatsby
Up and Running with Gatsby: Markdown & MDX

Creating Pages

PRO

We can also create pages for each of our events.

We've told Gatsby to create a slug for each of our MDX files. We also want to create a page for each of them. To do this, we'll override the createPages function that Gatsby provides. We'll do this in gatsby-node.js.

First, require path at the top of the file:

const path = require("path")

We need to use GraphQL to query for the events pages and then tell Gatsby to build a page for each. We'll also need to specify a layout to use.

Here's the final code that goes in gatsby-node.js underneath the code we added in the last video:

// gatsby-node,js
exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions
  const result = await graphql(`
    query {
      allMdx {
        edges {
          node {
            id
            fields {
              slug
            }
          }
        }
      }
    }
  `)

  if (result.errors) {
    reporter.panicOnBuild("Error on createPages")
  }

  const posts = result.data.allMdx.edges
  posts.forEach(({ node }, index) => {
    createPage({
      path: node.fields.slug,
      component: path.resolve(`./src/pages/event-layout.js`),
      context: { id: node.id },
    })
  })
}

In the next video, we'll create the event layout we're using here.