Use Gatsby Plugins to Source and Transform MDX Files
Create a posts directory at the root of your project with an MDX file. Inside the MDX file add Frontmatter and placeholder text.
With the gatsby-source-filesystem plugin, you can query the files in the posts directory. Finally, install gatsby-plugin-mdx, @mdx-js/mdx and @mdx-js/react to process the MDX files so they can be queried in the project.
Instructor: [0:03] Start by creating a directory in the root of your project called posts. Add a learning-gatsby-mdx file to it. Using --- you can create a section for frontmatter. We'll add a title, "Learning about Gatsby." We'll also add some random text so that it looks a bit more like a blog post.
[0:47] We'll need to install gatsby-source-filesystem. While it's installing, go to your gatsby-config file. We're going to add an object to our plugins array. Inside the object use the resolve keyword and pass gatsby-source-filesystem.
[1:17] We'll also add options, which is an object that takes two keywords -- path, which is our __dirname /posts and a name, posts.
[1:45] Using our graphiql-explorer we can confirm that our site is able to see the information in the posts directory by going to allFile nodes and clicking relativePath. When we run the query, it can see our MDX file. However, it can't use it as MDX quite yet.
[2:09] We need to install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react. In our gatsby-config file, we'll add gatsby-plugin-mdx to our plugins array.
[2:37] If we look at our graphiql-explorer, allMdx now appears. We can query nodes, frontmatter and title, and see that it's able to see Learning about Gatsby.%