GraphQL Error when cache is deleted: Unknown field date on type frontmatter

[attfarhan]

I am building a Gatsby typescript project and I keep getting this error Unknown field dateon typefrontmatter`` in one of my queries. I have made sure that every entry has a date field, and I can see that in the graphql typings file that the schema does include this date field.

What I found is that this only occurs when the cache is empty (when doing a fresh build with no .cache directory), so I am unable to deploy my site using continuous deployment.

The query is:

export const pageQuery = graphql`
query BlogPosts{
    allMarkdownRemark(sort: {fields: [frontmatter___date], order: DESC}){
        edges{
            node{
                frontmatter{
                    mainImage
                    title
                    author
                    date(formatString: "MMMM DD, YYYY")
                }
                fields{
                    slug
                }
                fileAbsolutePath
                excerpt
            }
        }
    }
}`

My gatsby config is:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
  },
  pathPrefix: `/static`,
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/data/`
      }
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-responsive-image`,
            options: {
              maxWidth: 690,
              backgroundColor: `#f7f0eb`
            }
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-autolink-headers`
        ]
      }
    },
    
    `gatsby-plugin-react-helmet`, 
    
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,

    // Parse JSON files
    `gatsby-transformer-json`,
    
    `gatsby-plugin-typescript`,
  ],
}

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
  "dependencies": {
    "@types/lodash": "^4.14.74",
    "@types/react": "^16.0.5",
    "@types/react-dom": "^15.5.4",
    "@types/react-helmet": "^5.0.3",
    "babel-eslint": "^7.2.3",
    "gatsby": "^1.9.27",
    "gatsby-link": "^1.6.8",
    "gatsby-plugin-react-helmet": "^1.0.3",
    "gatsby-plugin-sharp": "^1.6.2",
    "gatsby-plugin-typescript": "^1.4.8",
    "gatsby-remark-autolink-headers": "^1.4.4",
    "gatsby-remark-copy-linked-files": "^1.5.2",
    "gatsby-remark-prismjs": "^1.2.1",
    "gatsby-remark-responsive-image": "^1.0.0-alpha13-alpha.435e0178",
    "gatsby-source-filesystem": "^1.4.4",
    "gatsby-transformer-json": "^1.0.3",
    "gatsby-transformer-remark": "^1.7.2",
    "gatsby-transformer-sharp": "^1.6.1",
    "graphql-code-generator": "^0.8.10",
    "lodash": "^4.17.4",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "ts-loader": "^2.3.3"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "main": "n/a",
  "scripts": {
    "build": "gatsby build",
    "start": "gatsby develop",
    "serve": "gatsby build && gatsby serve",
    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'",
    "graphql-types": "gql-gen --url http://localhost:8000/___graphql --template typescript --out ./src/graphql-types.d.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.5.2",
    "typescript": "^2.4.2"
  }
}

[KyleAMathews]

Not really sure what is causing this. Could you please create a simple site reproducing the problem?

[attfarhan]

Turns out this was because some of our posts generated through our CMS did not have quotation marks around the dates in the frontmatter. Where would be a good place to document requirements for frontmatter fields, @KyleAMathews? Since other generators (was using Jekyll prevously and had no problem) do not require this, it would be good to document this somewhere. Happy to open a PR.

[KyleAMathews]

This should have fixed it #1964

Can you check if you're on the latest version of Gatsby?

[attfarhan]

Yeah I was on version 1.9.27 when reporting this, and created a simple site with the latest version (1.9.32, just re-tried it this morning), and it still does not quite work.

[KyleAMathews]

Could you build a small reproduction site for this that I could take a look at?

[josephrace]

I think I've encountered the same issue. In my case, I was testing Netlify CMS which generates markdown using its datetime widget in the following format:

date: 2017-09-16T16:45:01.889Z

This resulted in the same error seen by @attfarhan:

GraphQL Error Unknown field `date` on type `frontmatter`

For me, it also only happens the first time I try to build (i.e. when there is no .cache dir).

Manually adding the quotation marks around the date made the error disappear.

I put together a quick repo for you to check if that helps - https://github.com/josephrace/gatsby-date-issue - it's mostly just code from the "Programatically creating pages from data" page of the tutorial, with 2 example markdown files in src/pages.

[KyleAMathews]

Ok, so figured out the problem. Our frontmatter parser gray-matter uses js-yaml under the hood to parse the YAML in frontmatter which in turn parsers ISO 8601 compliant strings to JavaScript date objects. Which causes trouble when there's (as in the case of your very nice repro site) fields that have both ISO 8601 dates and ones that aren't as the first gets turned into a date object and the other stays as a string. Because when we try to infer the type of the field, we get a type mismatch which we just declare invalid and ignore. Hence why the date field was ignored.

So #2163 solves this by stringifying all date objects in frontmatter so that regardless of the date format you use, they'll all end up strings so will get inferred in the end as date fields.

Thanks for everyone who chimed in on this issue and @josephrace for building the reproduction site!!

[attfarhan]

@KyleAMathews Sorry for the super delayed response, got busy with a product release, which includes our new marketing site built on Gatsby :). Thanks @josephrace for taking creating the sample repo. Glad this got solved!

[josephrace]

Thanks Kyle, this is working for me with gatsby-transformer-remark@1.7.9

[illogic-al]

This is an issue again. Current version of gatsby, and gatsby-transformer-remark (2.3.8) require date fields to be wrapped in quotes.

e.g. frontmatter

---
layout: post
title: "Ansible blog"
date: 2019-01-01 05:30
comments: false
category: [software]
tags: [ansible]
---

frontmatter with quotes around the date works just fine. e.g.

---
layout: post
title: "Ansible blog"
date: "2019-01-01 05:30"
comments: false
category: [software]
tags: [ansible]
---

[kblizeck]

Appears to still be an issue in gatsby 2.19.45, gatsby-transformer-remark: 2.6.59, even with quotes around the date -

---
layout: blog
title: Patricia Arquette is my hero
date: "2015-03-03T14:59:00.000Z"
---

error  Unknown argument "formatString" on field "date" of type "MarkdownRemarkFrontmatter"  graphql/template-strings

export const pageQuery = graphql`
	query BlogListingQuery( $skip: Int!, $limit: Int! ) {
		allMarkdownRemark(
			sort: { order: DESC, fields: [frontmatter___date] }
			filter: { frontmatter: { layout: { eq: "blog" } } }
			limit: $limit
			skip: $skip
		) {
			edges {
				node {
					id
					fields {
						slug
					}
					frontmatter {
						title
						layout
						date(formatString: "MMMM DD, YYYY")
						thumbnail
					}
				}
			}
		}
	}
`