cannot query field "allMdx" on type "Query"

Question

I'm new in GraphiQl, I'm flowing tutorials from here

And also I'm new to Gatsby, after all requirement plugin install (guide from gatsby offical doc) when I want to go on this link: http://localhost:8000/___graphql then show me an error on allMdx if I hover on it.

like this:

but official document everything is ok, I don't know where is my problem.

any update issue!

I have used gatsby v3

also my initial query not match with this

Any suggestion please.

Answer 1

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.