CODEWITHSUNDEEP
javascriptreactjsgatsby
Joji
Joji

Reputation: 5613

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

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`,
      },
    }

Upvotes: 6

Views: 10303

Answers (3)

young ban
young ban

Reputation: 169

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

Upvotes: 1

Romeo
Romeo

Reputation: 788

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.

Upvotes: 2

ksav
ksav

Reputation: 20821

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.

Upvotes: 8

Related Questions