Outline
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.