Gatsby: GraphQL error: unknown argument "formatString"

[ChildishhAlbino]

Description

Hi.

I'm using Moment's formatString inside of GraphQL to format the dates from my blog posts - in a similar fashion shown in the Gatsby tutorial. However it isn't very reliable. It will work until I try to deploy to GitHub Pages - where it will crash and then not allow me to build again until I remove all instances of formatString from my code - get a working build - and then reinstalling all my node packages.

One of the queries in question:

{
  allMarkdownRemark(sort: { fields: [frontmatter___currentDate], order: DESC }) {
    totalCount
    edges {
      node {
        id
        frontmatter {
          title
          postDate(formatString: "LLLL")
            currentDate(formatString: "LLLL")
          caption
          datePrefix
        }
        fields {
          slug
        }
      }
    }
  }
}

Steps to reproduce

1. Download the code from this repository.

2. Run npm install.

3. Run gatsby develop.

4. If no error occurs, edit one of the markdown files' dates and see if it continues to work. It most likely should.

5. Close the Gatsby development server

6. Run npm run deploy (This is where it breaks)

Expected result

What should happen?

The dates should be formatted accordingly to Moment's standard - result can be seen working on the live version of my blog

What happened.

I get this error when trying to deploy, develop, or build my Gatsby website - I have to delete my node modules, package-lock.json, and all instances of formatString() over my entire website (thankfully not many) and then develop from there.

Environment

  System:
    OS: Windows 10
    CPU: x64 Intel(R) Core(TM) i5-6600K CPU @ 3.50GHz
  Binaries:
    npm: 6.4.1 - D:\Software Development\Languages, Frameworks, etc\nodeJs\npm.CMD
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    gatsby: ^2.0.35 => 2.0.35
    gatsby-image: ^2.0.19 => 2.0.19
    gatsby-plugin-manifest: ^2.0.7 => 2.0.7
    gatsby-plugin-offline: ^2.0.10 => 2.0.10
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.1
    gatsby-plugin-sass: ^2.0.2 => 2.0.2
    gatsby-plugin-sharp: ^2.0.11 => 2.0.11
    gatsby-source-filesystem: ^2.0.6 => 2.0.6
    gatsby-transformer-remark: ^2.1.11 => 2.1.11
    gatsby-transformer-sharp: ^2.1.7 => 2.1.7

error The system cannot find the path specified.



  Error: The system cannot find the path specified.

  - envinfo.js:1 Function.e.exports.sync
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:7778

  - envinfo.js:1 Object.copySync
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:104976

  - envinfo.js:1 Object.t.writeSync.e [as writeSync]
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:123499

  - envinfo.js:1
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:124274

  - envinfo.js:1 Promise.all.then.e
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:124289

  - util.js:16 tryCatcher
    [npm]/[gatsby-cli]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:694:18

  - promise.js:638 Promise._fulfill
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:638:18

  - promise_array.js:126 PromiseArray._resolve
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise_array.js:126:19

  - promise_array.js:144 PromiseArray._promiseFulfilled
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise_array.js:144:14

  - promise.js:574 Promise._settlePromise
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:574:26

  - promise.js:614 Promise._settlePromise0
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:694:18


error UNHANDLED REJECTION


  Error: The system cannot find the path specified.

  - envinfo.js:1 Function.e.exports.sync
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:7778

  - envinfo.js:1 Object.copySync
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:104976

  - envinfo.js:1 Object.t.writeSync.e [as writeSync]
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:123499

  - envinfo.js:1
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:124274

  - envinfo.js:1 Promise.all.then.e
    [npm]/[gatsby-cli]/[envinfo]/dist/envinfo.js:1:124289

  - util.js:16 tryCatcher
    [npm]/[gatsby-cli]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:569:18

  - promise.js:614 Promise._settlePromise0
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:694:18

  - promise.js:638 Promise._fulfill
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:638:18

  - promise_array.js:126 PromiseArray._resolve
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise_array.js:126:19

  - promise_array.js:144 PromiseArray._promiseFulfilled
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise_array.js:144:14

  - promise.js:574 Promise._settlePromise
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:574:26

  - promise.js:614 Promise._settlePromise0
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:614:10

  - promise.js:694 Promise._settlePromises
    [npm]/[gatsby-cli]/[bluebird]/js/release/promise.js:694:18

Not sure if that's what the command was supposed to output but that's what I got when I ran the command.

[LekoArts]

• You’re mixing import and require in your components. Only use import
• One of your posts is missing the currentDate (why do you use that? You can use JS to get the current date)
• stylingClass is not valid syntax. You have to use className
• You’re using class instead of className.
• You’re importing Link from gatsby-link and not gatsby

That’s what I could find after a quick glance. Fix those things and see if it works

[ChildishhAlbino]

Thanks for replying - although I don't think I made it clear enough that it's not my code that doesn't work -because it will work. It just breaks when I try to push it to github pages; i muck around with it for a bit and it works fine.

EDIT: and eventually I can get it to post to GH Pages. It's just a massive hassle and the solution isn't particularly elegant or long-lasting.

To respond to your points however:

• Not sure where you found the "require" being used - if so it wasn't intentional. I had a quick look but couldn't find it.

• The 'currentDate' is designed to be the last time that article was updated - it's a bad naming convention and I'll change that. If an article hasn't been updated then the date returns null and I can use JS to change how my components look.

• stylingClass is just a variable I passing through my Subble components which then applies said styling to a div inside of it.

• Do you mind explain why class shouldn't be used? I'm not styling the React components themselves and just the HTML inside of them. I'm not very familiar with React and Web Development in general so please feel free to explain why those are would cause problems.

• The links work fine - hasn't ever caused any problems.

[ChildishhAlbino]

EDIT: I discovered that by deleting my .cache folder I can fix the problem a lot easier. Is there anyone who can explain why not deleting it would cause this error?

[LekoArts]

although I don't think I made it clear enough that it's not my code that doesn't work -because it will work.

At some point it doesn't work and hence your code is most probably the reason.

Not sure where you found the "require" being used - if so it wasn't intentional. I had a quick look but couldn't find it.

https://github.com/ChildishhAlbino/childishhalbino.github.io/blob/problem-fixing/src/pages/about.js#L13

The 'currentDate' is designed to be the last time that article was updated - it's a bad naming convention and I'll change that. If an article hasn't been updated then the date returns null and I can use JS to change how my components look.

GraphQL can have some problems sometimes when a field has no value. Give the lastUpdated field the release date and check if updated and release are equal.

stylingClass is just a variable I passing through my Subble components which then applies said styling to a div inside of it.

Yeah, saw that now, too. The subble component doesn't make too much sense to me. It has no special markup, it's just a div with classes. You could create a Layout component which wraps every page and import the scss there. Btw, keep your capitalization in order: You sometimes use uppercase/lowercase. Use it consistently (e.g. JS files uppercase, scss files lowercase)

Do you mind explain why class shouldn't be used? I'm not styling the React components themselves and just the HTML inside of them. I'm not very familiar with React and Web Development in general so please feel free to explain why those are would cause problems.

class is a restricted word in JSX (you're writing JSX not HTML) as your React component can be a class for example. https://reactjs.org/docs/faq-styling.html

The links work fine - hasn't ever caused any problems.

Could be a cause of issues anyway. The right import is import { Link } from 'gatsby'

---

To validate that problem as an actual bug we'd need a minimal reproduction repository which shows that error. Since your repository has other issues I don't think we can take that as an example.

Note: Also make sure that your gatsby-cli is on the latest version.

[ChildishhAlbino]

I think that empty value was the cause - so I'll close this for now. It's working as expected now so I'm happy. Thanks for your help :D

EDIT: I guess I can't close it LOL

[peterpeterparker]

@ChildishhAlbino one year later, your comment lead me to the solution too. Unknown argument 'formatString' is also thrown if the argument is not a valid date, like in my case 2019-09-XX

[brockduncan]

Deleting .cache fixed it for me, thank you!