Gatsby: Cannot query field "allMarkdownRemark" on type "Query".

[larpo1]

Description

Error Processing Netlify CMS Output with Gatsby

gatsby-node.js

const path = require(`path`)

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

  const blogPostTemplate = path.resolve(`src/templates/blogTemplate.js`)

  const result = await graphql(`
    {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___date] }
        limit: 1000
      ) {
        edges {
          node {
            frontmatter {
              path
            }
          }
        }
      }
    }
  `)

  // Handle errors
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }

  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.frontmatter.path,
      component: blogPostTemplate,
      context: {}, // additional data can be passed via context
    })
  })
}

in gatsby-config.js:

plugins: [
    `gatsby-plugin-sitemap`,
    `gatsby-plugin-netlify-cms`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/static/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `blog`,
        path: `${__dirname}/blog`,
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#FF54AC`,
        display: `minimal-ui`,
        icon: `${__dirname}/static/images/icons/favicon-196x196.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-sass`,
    {
      resolve: "gatsby-plugin-web-font-loader",
      options: {
        google: {
          families: ["PT Serif", "Poppins"],
        },
        custom: {
          families: ["Inter", "Poppins", "Avenir", "Brandon Grotesque"],
          urls: ["/fonts/fonts.css"],
        },
      },
    },
  ],

Everything else is as per the tutorial steps

Steps to reproduce

Follow the steps to add netlifyCMS to an existing project:
https://www.gatsbyjs.org/docs/sourcing-from-netlify-cms/
and
https://www.gatsbyjs.org/docs/adding-markdown-pages/

Result

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "allMarkdownRemark" on type "Query".

File: gatsby-node.js:8:24

 ERROR 

Error while running GraphQL query.

success createPages - 0.072 s
success createPagesStatefully - 0.115 s
success onPreExtractQueries - 0.015 s
success update schema - 0.040 s

 ERROR #85907  GRAPHQL

There was an error in your GraphQL query:

- Unknown field 'markdownRemark' on type 'Query'.

File: src/templates/blogTemplate.js

Environment

System:
    OS: macOS 10.14.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.132
    Safari: 12.0.1
  npmPackages:
    gatsby: ^2.7.5 => 2.15.20
    gatsby-cli: ^2.6.5 => 2.7.49
    gatsby-image: ^2.2.19 => 2.2.19
    gatsby-plugin-manifest: ^2.2.18 => 2.2.18
    gatsby-plugin-netlify-cms: ^4.1.17 => 4.1.17
    gatsby-plugin-offline: ^2.1.1 => 2.1.1
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
    gatsby-plugin-sass: ^2.0.11 => 2.0.11
    gatsby-plugin-sitemap: ^2.2.13 => 2.2.13
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-source-filesystem: ^2.1.26 => 2.1.26
    gatsby-transformer-remark: ^2.6.24 => 2.6.24
  npmGlobalPackages:
    gatsby-cli: 2.7.49

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[larpo1]

https://github.com/larpo1/lavanda-website.git

[LekoArts]

Where? :)
I can't see a link to a repository of you here.

[larpo1]

updated sorry

[jonniebigodes]

@larpo1 i've picked up on your issue.
Here are the steps i took to triage this issue.

• Cloned your repo.
• Installed the dependencies.
• Issued gatsby develop and i was able to see the error.
• Checked gatsby-config.js and you're missing the gatsby-transfomer-remark plugin there. You have it declared in package.json, but you didn't "activate it" by adding it into gatsby-config.js. Meaning that in gatsby-node.js you're issuing a graphql query to something that gatsby knows nothing about. Something similar will happen in src/templates/blogTemplate.js and i'll get into that shortly.

Once i've changed gatsby-config.js to the following, leaving in only plugins section for relevance:

plugins: [
        `gatsby-plugin-sitemap`,
        `gatsby-plugin-netlify-cms`,
        `gatsby-plugin-react-helmet`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/static/images`,
            },
        },
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                name: `gatsby-starter-default`,
                short_name: `starter`,
                start_url: `/`,
                background_color: `#663399`,
                theme_color: `#FF54AC`,
                display: `minimal-ui`,
                icon: `${__dirname}/static/images/icons/favicon-196x196.png`, // This path is relative to the root of the site.
            },
        },
        `gatsby-plugin-sass`,
        {
            resolve: 'gatsby-plugin-web-font-loader',
            options: {
                google: {
                    families: ['PT Serif', 'Poppins'],
                },
                custom: {
                    families: ['Inter', 'Poppins', 'Avenir', 'Brandon Grotesque'],
                    urls: ['/fonts/fonts.css']
                }
            }
        },
        {
            resolve: `gatsby-source-filesystem`,
            options: {
              name: `markdown-pages`,
              path: `${__dirname}/blog`,
            },
          },
          `gatsby-transformer-remark`
        // this (optional) plugin enables Progressive Web App + Offline functionality
        // To learn more, visit: https://gatsby.dev/offline
        // `gatsby-plugin-offline`,
    ],

• Issuing gatsby develop i'm presented with the following:
  

• Moving onto the template, checking the template used in src/template/blogTemplate.js you have a page query that has the following:

export const pageQuery = graphql`
  query($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        path
        title
      }
    }
  }

And checking gatsby-node.js you're not supplying the path variable through gatsby special context prop, that will be consumed by the page query in the template.

Setting the appropriate value in gatsby node, meaning changing in gatsby-node.js to the following:

result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.frontmatter.path,
      component: blogPostTemplate,
      context: {
        path:node.frontmatter.path
      }, // additional data can be passed via context
    })
  })

Will throw the following warning:

warn Your site's "gatsby-node.js" used a reserved field name in the context object when creating a page:

  * "path"

{
    "path": "/number-2",
    "component": "....\test_larpo1\\lavanda-website\\src\\templates\\blogTemplate.js",
    "context": {
        "path": "/number-2"
    }
}

Data in "context" is passed to GraphQL as potential arguments when running the
page query.

When arguments for GraphQL are constructed, the context object is combined with
the page object so *both* page object and context data are available as
arguments. So you don't need to add the page "path" to the context as it's
already available in GraphQL. If a context field duplicates a field already
used by the page object, this can break functionality within Gatsby so must be
avoided.

Please choose another name for the conflicting fields.

The following fields are used by the page object and should be avoided.

  * "path"
  * "matchPath"
  * "component"
  * "componentChunkName"
  * "pluginCreator___NODE"
  * "pluginCreatorId"

Something that you might take into consideration.

Feel free to provide feedback so that we can close this issue or continue to work on it until we find a suitable solution.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[justinr636]

Hey I came across this issue and was able to resolve it by making a slight modification to how I inputted a localhost url in my gatsby-config.js

I would just like to add my solution here incase anyone else comes across the same issue.

FYI I'm using gatsby with strapi as my cms

The problem code:

{
  resolve: `gatsby-source-strapi`,
  options: {
    apiURL: 'localhost:1337',
    contentTypes: [
      `blog`,
      `user`,
    ],
    queryLimit: 1000,
  }
},

Fixed code:

{
  resolve: `gatsby-source-strapi`,
  options: {
    apiURL: 'http://localhost:1337',
    contentTypes: [
      `blog`,
      `user`,
    ],
    queryLimit: 1000,
  }
},

I also removed .cache/ and node_modules/ and performed a reinstall to be safe.

[thinklinux]

@jonniebigodes that helped a lot! Thanks!

[jonniebigodes]

@thinklinux no need to thank, glad to know that my comment helped you out aswell.

[mnbf9rca]

I have this same problem. Literally all ive done is install gatsby and follow teh instructions here: https://www.gatsbyjs.org/docs/adding-markdown-pages/

[videohead]

Yep, I hit a related problem here : https://www.gatsbyjs.org/tutorial/part-four/#your-first-graphql-query

Cannot query field "frontmatter" on type "MarkdownRemark".
52:11 error Cannot query field "frontmatter" on type "MarkdownRemark" graphql/template-strings

Seems like I need an explicit call to gatsby-transformer-remark in my gatsby-config.js
And need to npm install --save gatsby-transformer-remark

[anphung]

@videohead I have the same issue following the tutorial. Turned out I had a space in the markdown file name, removing the space solved the issue.

[princefishthrower]

@videohead you were correct - I was working on a project that didn't have gatsby-transformer-remark in the gatsby-config.js. Simply adding:

{ resolve: `gatsby-transformer-remark` }

to gatsby-config.js fixed it. (Doing npm install --save gatsby-transformer-remark is of course still required 😄 )
Hard one to debug!

[mryechkin]

Having the same issue as well while following these steps: https://www.gatsbyjs.org/docs/adding-markdown-pages/

I've compared against the using-markdown-pages sample exercise and everything looks correct: https://github.com/gatsbyjs/gatsby/tree/master/examples/using-markdown-pages

Unfortunately @videohead and @princefishthrower's fix didn't work for me

package.json

"dependencies": {
    "gatsby": "^2.22.15",
    "gatsby-image": "^2.4.5",
    "gatsby-plugin-catch-links": "^2.3.5",
    "gatsby-plugin-manifest": "^2.4.9",
    "gatsby-plugin-offline": "^3.2.7",
    "gatsby-plugin-react-helmet": "^3.3.2",
    "gatsby-plugin-sharp": "^2.6.9",
    "gatsby-source-filesystem": "^2.3.11",
    "gatsby-transformer-remark": "^2.8.15",
    "gatsby-transformer-sharp": "^2.5.3",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.0.0"
  },

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-catch-links`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages`,
      },
    },
    { resolve: `gatsby-transformer-remark` },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

gatsby-node.js

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/node-apis/
 */

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

  const blogPostTemplate = require.resolve(`./src/templates/blogTemplate.js`)

  const result = await graphql(`
    {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___date] }
        limit: 1000
      ) {
        edges {
          node {
            frontmatter {
              slug
            }
          }
        }
      }
    }
  `)

  // Handle errors
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }

  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    createPage({
      path: node.frontmatter.slug,
      component: blogPostTemplate,
      context: {
        // additional data can be passed via context
        slug: node.frontmatter.slug,
      },
    })
  })
}

Any help would be appreciated!

[jonniebigodes]

@mryechkin going about what you have posted, probably the issue could be the location of the markdown, more specifically where gatsby-source-filesystem is looking for the content. As technically the pages folder in Gatsby is considered a special folder. As a test can you try to move the content to where the documentation points out. Adjust gatsby-config.js. Clear the cache with gatsby clean and issue a new build with gatsby develop and see if the issue persists? If so, report back and we could take it from there.

[mryechkin]

@jonniebigodes looks like it was two blunders on my part!

So, the first one.. yes, you're absolutely correct! I was following the official tutorial linked above, as well as another (older) YouTube video, and between the two I must've gone with the suggested name pages from the video instead of markdown-pages. Secondly, while checking that, I realized that my markdown frontmatter contained commas at the end of each line 🤦‍♂️ so when I followed the errors I realized it was complaining about unrecognized characters in my .md files and hence the issue.

Thank you for your suggestion and the fix!

[jonniebigodes]

@mryechkin no problem, glad that you managed to fix it.