Gatsby keeps complaining Cannot query field "fields" on type "MarkdownRemark" when I have allMarkdownRemark

Question

I am trying to configure my Gatsby project like this starter https://github.com/gatsbyjs/gatsby-starter-blog

In my gatsby-node.js I have

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions

  const blogPost = path.resolve(`./src/templates/blog-post.js`)
  return graphql(
    `
      {
        allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: DESC }
          limit: 1000
        ) {
          edges {
            node {
              fields {
                slug
              }
              frontmatter {
                title
              }
            }
          }
        }
      }
    `
  ).then(result => {
    if (result.errors) {
      throw result.errors
    }

    // Create blog posts pages.
    const posts = result.data.allMarkdownRemark.edges

    posts.forEach((post, index) => {
      const previous = index === posts.length - 1 ? null : posts[index + 1].node
      const next = index === 0 ? null : posts[index - 1].node

      createPage({
        path: `blog${post.node.fields.slug}`,
        component: blogPost,
        context: {
          slug: post.node.fields.slug,
          previous,
          next,
        },
      })
    })

    return null
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `allMarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

But I tried to run the dev server it output this error message

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "fields" on type "MarkdownRemark".

File: gatsby-node.js:8:10


 ERROR #11321  PLUGIN

"gatsby-node.js" threw an error while running the createPages lifecycle:

Cannot query field "fields" on type "MarkdownRemark".

GraphQL request:9:15
 8 |             node {
 9 |               fields {
   |               ^
10 |                 slug

But in fact what I had is allMarkdownRemark not MarkdownRemark. And I am totally copying what this starter is doing in its gatsby-node.js file https://github.com/gatsbyjs/gatsby-starter-blog/blob/master/gatsby-node.js

Have no ideas how to fix it

My gatsby-config.js looks like this

  "gatsby-plugin-page-transitions",
    `gatsby-plugin-smoothscroll`,
    `gatsby-plugin-netlify-cms`,
    `gatsby-plugin-styled-components`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-offline`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-feed-mdx`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        // edit below
        // trackingId: `ADD YOUR TRACKING ID HERE`,
      },
    }

Taffeta

Try and update to the latest version of gatsby, it should solve your problem. Check github.com/gatsbyjs/gatsby/issues/16191 – Michaella

@ShubhamKhatri Hi thanks for the reply. How can I upgrade Gatsby inside the project folder? – Taffeta

yarn upgrade --latest gatsby – Michaella

What's in your gatsby-config.js? – Despotic

@ShubhamKhatri Hi I just upgraded it but still got the same error – Taffeta

Answer 1

You are most likely seeing this issue because there are no markdown files found at any of the paths that gatsby-source-filesystem is pointing to in gatsby-config.js

According to nihgwu's comment on this issue:

the MarkdownRemark node type will only be created when there is a markdown node, or there will be no MarkdownRemark node type at all, so you can't query allMarkdownRemark

To solve your issue, make sure that there is as least one markdown file found in the ${__dirname}/content/blog folder.

If you do have markdown files in a different folder, make sure to add that location as another gatsby-source-filesystem entry in your gatsby-config.js.

Despotic

Answer 2

In your gatsby-config.js file, make sure that gatsby-source-filesystem is able to detect a .md file in the directory where you put it. Then go to your gatsby-node.js file and change it to:

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

// Change the node internal type from 'allMarkdownRemark' to 'MarkdownRemark'
  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

For more, check the docs on creating page programmatically.

Jointless

Answer 3

In gatsby-node.js file, Change node.internal.type === allMarkdownRemark to MarkdownRemark in your oncreateNode function.

Fugate