Use Gatsby's File System Route API to Generate Pages for Each MDX File

InstructorLaurie Barth

Share this video with your friends

Send Tweet

In the pages directory, create the {Mdx.slug}.js file. Using curly braces, you can denote a file system route API that operates on all "Mdx" nodes and creates a page with the path slug available on that node.

The File System Route API automatically passes the id of each MDX file node to the GraphQL query inside this file. Use the id to filter the query and get access to the processed MDX file.

Finally, pull in data, the result of our query, and expose the title from the frontmatter.

Hector
~ 3 years ago

Hi there! Instructive and clear course, thank you! Just wanted to say, for those of us that are very new to graphql and/or gatsby (presumably a good few), it might be interesting to hear more about how the query runs and passes data to our component (or link to documentation to that effect).

Laurie Barthinstructor
~ 3 years ago

You're absolutely right! The docs are available here but I'll be sure to add them to the lesson as well.

Hector
~ 3 years ago

Thank you again -- awesome course, really grateful! Been an great way to test the waters with both graphql & gatsby & I'm starting to see why they've gotten so popular :)