Gatsby: In GraphQL, frontmatter does not contain 'path' and 'date', the title is an empty string.

[tulikavijay]

Description

I was following the blog tutorial and found this error, the frontmatter does not contain 'path' and 'date', also the title is an empty string.

GraphQL Error Argument "frontmatter" has invalid value {path: {eq: $path}}.
In field "path": Unknown field.

      file: /home/tux/frames/personal-blog/src/templates/blog-post.js

   1 | 
   2 |   query BlogPostByPath($path: String!) {
>  3 |     markdownRemark(frontmatter: { path: { eq: $path } }) {
     |                                 ^
   4 |       html
   5 |       frontmatter {
   6 |         date(formatString: "MMMM DD, YYYY")
   7 |         path
   8 |         title
   9 |       }
  10 |     }
  11 |   }
  12 | 

Environment

Gatsby version: 1.1.28
Node.js version: v9.3.0
Operating System: Ubuntu 16.04

File contents (if changed):

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
  },
  plugins: [`gatsby-plugin-react-helmet`,
            'gatsby-plugin-catch-links',
            {
            resolve: `gatsby-source-filesystem`,
            options: {
              path: `${__dirname}/src/pages`,
              name: 'pages',
            },
          },
          {
            resolve: 'gatsby-transformer-remark',
            options: {
              plugins: [] // just in case those previously mentioned remark plugins sound cool :)
            },
          },
          ],

}

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "gatsby": "^1.9.145",
    "gatsby-link": "^1.6.32"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"src/**/*.js\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "gatsby-plugin-catch-links": "^1.0.14",
    "gatsby-plugin-react-helmet": "^2.0.3",
    "gatsby-source-filesystem": "^1.5.11",
    "gatsby-transformer-remark": "^1.7.26",
    "prettier": "^1.9.2",
    "react-helmet": "^5.2.0"
  }
}

gatsby-node.js:

 const path = require("path");
 exports.createPages = ({ boundActionCreators, graphql }) => {
  const { createPage } = boundActionCreators;

  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`);

  return graphql(`{
    allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___date] }
      limit: 1000
    ) {
      edges {
        node {
          html
          frontmatter {
            date
            path
            title
          }
        }
      }
    }
  }`)
    .then(result => {
      if (result.errors) {
        return Promise.reject(result.errors);
      }
      result.data.allMarkdownRemark.edges.forEach(({node})=>{
        createPage({
          path:node.frontmatter.path,
          component:blogPostTemplate,
          context:{}
        }
        )
      })
    });
};

gatsby-browser.js:
gatsby-ssr.js:

Actual result

In GraphQL :

{
  allMarkdownRemark{
    edges{
      node{
        id
        frontmatter{
          title
        }
         html
      }
    }
  }
}

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "id": "/home/tux/frames/personal-blog/src/pages/07-12-2017-getting-started/index.md absPath of file >>> MarkdownRemark",
            "frontmatter": {
              "title": ""
            },
            "html": "<p>Oooooh-weeee, my first blog post!</p>"
          }
        }
      ]
    }
  }
}



md5-1b05c548e8f4f2cb9b5faeb1706044e9



{
  allMarkdownRemark{
    edges{
      node{
        id
        frontmatter{
          title
          path
        }
         html
      }
    }
  }
}



md5-fd4345416e7037e5eca2ba41a1a8fdc2



{
  "errors": [
    {
      "message": "Cannot query field \"path\" on type \"frontmatter_2\".",
      "locations": [
        {
          "line": 8,
          "column": 11
        }
      ]
    }
  ]
}

Expected behavior

What should happen?

frontmatter should return correct title and have path and date as elements.

[KyleAMathews]

Which tutorial?

[tulikavijay]

https://www.gatsbyjs.org/blog/2017-07-19-creating-a-blog-with-gatsby/
it also happened when I was following the part four of getting started with Gatsby tutorial.

[KyleAMathews]

Guessing you missed a step e.g. not adding the markdown file described here https://www.gatsbyjs.org/blog/2017-07-19-creating-a-blog-with-gatsby/#writing-our-first-markdown-blog-post

[tulikavijay]

I did add a markdown file, in the GraphQL query results above, you can see the html part. this is the markdown file, called index.md...

path: "/hello-world"
date: "2017-07-12T17:12:33.962Z"
title: "My First Gatsby Post"
---

Oooooh-weeee, my first blog post!

[KyleAMathews]

Perhaps you need to restart gatsby develop then as the graphql scheme doesn't get regenerated unless you restart Gatsby.

[tulikavijay]

i tried to run gatsby develop again with each content in the article copied so i don't make a mistake...
And installed gatsby,gatsby-cli,graphql and other plugins again using npm --save-dev, found this error :

success delete html files from previous builds — 0.017 s
success open and validate gatsby-config.js — 0.009 s
success copy gatsby files — 0.029 s
success onPreBootstrap — 0.011 s
success source and transform nodes — 0.153 s
error UNHANDLED REJECTION


  Error: RootQueryType.allSitePage field type must be Output Type but got: SitePageConnection.

  - Array.forEach

  - Array.reduce

  - index.js:52 _callee$
    [personal-blog]/[gatsby]/dist/schema/index.js:52:20

  - next_tick.js:67 _combinedTickCallback
    internal/process/next_tick.js:67:7

  - next_tick.js:98 process._tickCallback
    internal/process/next_tick.js:98:9

Note : this is after i installed GraphQL through npm --save-dev, before the error i mentioned before was showing.

[KyleAMathews]

this is after i installed GraphQL through npm --save-dev, before the error i mentioned before was showing.

This is causing a problem actually — Gatsby ships with its own copy of GraphQL and manually installing GraphQL will break Gatsby :-( Try removing your version of GraphQL and trying again.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

[kpennell]

restart gatsby develop

@KyleAMathews you might throw this simple fix in the docs based off the number of upvotes on that comment ...maybe it already is

[Behinder]

My issue is I see html property but there is no way to access frontmatter 👎

[ahmedrafayat]

This fixed it. Learning graphql as I go about making my gatsby site :D

Perhaps you need to restart gatsby develop then as the graphql scheme doesn't get regenerated unless you restart Gatsby.