Basically, the GraphQL playground (localhost:8000/___graphql) is telling you that you have no allMdx node created. The list of all available nodes are in the left column (allFile, allDirectory, etc).
You need to set the filesystem to allow Gatsby to inferr that nodes by:
npm install gatsby-source-filesystem
Then, in your gatsby-config.js:
module.exports = {
siteMetadata: {
title: "My First Gatsby Site",
},
plugins: [
"gatsby-plugin-gatsby-cloud",
"gatsby-plugin-image",
"gatsby-plugin-sharp",
{
resolve: "gatsby-source-filesystem",
options: {
name: `blog`,
path: `${__dirname}/blog`, // <-- the folder where you have the .mdx files
}
},
],
};
If you have some MDX files in /blog folder, Gatsby will generate the proper nodes (allMdx), allowing you to query them.
Restart and clean your server by gatsby clean && gatsby develop.
The next steps are related to query the data by adding some configuration such as:
{
resolve: `gatsby-plugin-mdx`,
options: {
defaultLayouts: {
posts: require.resolve("./src/components/blog-layout.js"),
default: require.resolve("./src/components/layout.js"),
},
},
},
Note: you'll need to install the gatsby-plugin-mdx plugin first
You can check the following tutorial: https://www.digitalocean.com/community/tutorials/gatsbyjs-mdx-in-gatsby
Remember to clean cache (gatsby clean) in each trial and to stop and re-run de develop.