StaticQueryHashes not generating

[herecydev]

(Continuation from #25723)

Static Query Hashes are not being generated which is causing errors for the build gatsby site. @sidharthachatterjee gatsby clean hasn't resolved this.

  System:
    OS: Windows 10 10.0.18362
    CPU: (8) x64 Intel(R) Core(TM) i7-3820 CPU @ 3.60GHz
  Binaries:
    Node: 12.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    gatsby: ^2.23.12 => 2.24.7
    gatsby-image: ^2.4.9 => 2.4.13
    gatsby-plugin-manifest: ^2.4.14 => 2.4.19
    gatsby-plugin-offline: ^3.2.13 => 3.2.19
    gatsby-plugin-react-helmet: ^3.3.6 => 3.3.10
    gatsby-plugin-sharp: ^2.6.14 => 2.6.20
    gatsby-source-filesystem: ^2.3.14 => 2.3.20
    gatsby-transformer-sharp: ^2.5.7 => 2.5.11

[sidharthachatterjee]

@herecydev Strange that I couldn't reproduce this. Can you try clearing .cache and public (can run gatsby clean) and trying again?

[herecydev]

I've done a gatsby clean and also deleted node_modules. Still the same outcome

[sidharthachatterjee]

@herecydev So strange. Does it occur for all sites or only specifically the one you linked me to? Are you running gatsby build or yarn gatsby build?

[sidharthachatterjee]

Let me add some more verbose logs, push a release and then maybe you can post verbose logs for me with --verbose

[herecydev]

Does it occur for all sites or only specifically the one you linked me to

I first notice this on a site (which I can't publish) and then repro'd onto the gatsby starter we're looking at.

Are you running gatsby build or yarn gatsby build

Tried both; same outcome.
I've also tried both windows vs mac, node 12 & node 14. Same outcome.

[DanailMinchev]

Hi folks, not sure if this is related or helps, but I can reproduce similar issue mentioned in #25723
but using Storybook:

git clone https://github.com/DanailMinchev/gatsby-starter-testing.git
cd gatsby-starter-testing
git checkout 4b65ddb3338b05be0d1d71d14710f591d98282ce
nvm use
npm ci
npm run build
npm run storybook

Once Storybook is loaded navigate to http://localhost:6006/iframe.html?id=pages-index--basic and you will see following error:

The result of this StaticQuery could not be fetched.

This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues
Error: The result of this StaticQuery could not be fetched.

This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues
    at useStaticQuery (http://localhost:6006/vendors~main.5438e684300b6f270738.bundle.js:30995:11)
    at Layout (http://localhost:6006/main.5438e684300b6f270738.bundle.js:279:75)
    at oh (http://localhost:6006/vendors~main.5438e684300b6f270738.bundle.js:43442:146)
    at Rj (http://localhost:6006/vendors~main.5438e684300b6f270738.bundle.js:43550:496)
    at Qj (http://localhost:6006/vendors~main.5438e684300b6f270738.bundle.js:43535:265)
    at Kj (http://localhost:6006/vendors~main.5438e684300b6f270738.bundle.js:43535:194)
    at yj (http://localhost:6006/vendors~main.5438e684300b6f270738.bundle.js:43528:172)
    at Ig (http://localhost:6006/vendors~main.5438e684300b6f270738.bundle.js:43519:137)
    at bk (http://localhost:6006/vendors~main.5438e684300b6f270738.bundle.js:43570:43)
    at http://localhost:6006/vendors~main.5438e684300b6f270738.bundle.js:43573:301

[DanailMinchev]

Also, I tried https://github.com/herecydev/gatsby-static-query-bug, but it works fine for me:

[herecydev]

Also, I tried https://github.com/herecydev/gatsby-static-query-bug, but it works fine for me:

Did you check the console? It has loads of errors for me

[DanailMinchev]

Also, I tried https://github.com/herecydev/gatsby-static-query-bug, but it works fine for me:

Did you check the console? It has loads of errors for me

Yes, when loading the index page I can see some errors, they are 404 errors, for page data files of page-2 and using-typescript pages, console from the index page:

[jonniebigodes]

@DanailMinchev just skimming your repo. to make Storybook work nicely with Gatsby , you'll need to mock the data that is being passed into the page, take a look at this repo to see how you can do it.

[wardpeet]

It seems to only happen on windows, fixing it as we speak. Sorry for the inconviences it may have caused

[AleC77]

It seems to only happen on windows, fixing it as we speak. Sorry for the inconviences it may have caused

So how did you fix it? I happens only on Window for me too

[wardpeet]

@AleC77 PR is up, we will merge it tomorrow and publish a new version. I'll keep you posted.

[wardpeet]

Fixed in gatsby@2.24.11

[alessandrocalia]

Fixed in gatsby@2.24.11

Thank you! It works!

[DanailMinchev]

Sorry, a bit offtopic:

@DanailMinchev just skimming your repo. to make Storybook work nicely with Gatsby , you'll need to mock the data that is being passed into the page, take a look at this repo to see how you can do it.

Thank you @jonniebigodes , I had a look at your repo and used a similar approach (as well described in https://www.gatsbyjs.org/docs/testing-components-with-graphql/#testing-staticquery) to use "Pure Components".
As I understand you pass the data as properties to pure compoenents in your Storybook and this way you are avoiding calling the useStaticQuery, is that correct?

This means actually that testing visually with Storybook is a good approach only for dedicated pure components where we pass the graphql mock data as a data property for example.

I was looking for more end to end visual testing where we test all of the pages, ideally not passing the mocked data, but using the generated pages instead and I switched to Cypress for "whole page" testing with https://github.com/palmerhq/cypress-image-snapshot (https://github.com/DanailMinchev/gatsby-starter-testing/blob/master/cypress/e2e/visual.test.js#L8), but if you have data which is changing on each build (for example new Date which is displayed on the page - https://github.com/DanailMinchev/gatsby-starter-testing/blob/master/src/components/layout.js#L28) then you need to mock the new Date using cy.clock().
But, because Gatsby is generated build time, this means I cannot mock during the test, one thing I was looking to use is https://github.com/bahmutov/cypress-react-unit-test , but then it doesn't work with Gatsby currently https://github.com/bahmutov/cypress-react-unit-test/issues/307.

I am wondering if you have other ideas for testing visually the whole pages which are not using mocked data and using mainly the final generated build to execute the visual tests?

Thanks

[joey81525]

I had the same issue. I tried to deploy the Gatsby default starter, everything is fine locally, but the using-ssr page shows 404 when I have the starter deployed on netlify. https://bigwind100.netlify.app/
I thought it had something to do with the netlify, but then I saw that the staticQueryHashes for the using-ssr page was not generated. Please help.

[VivekDosayaSixt]

hey, so we are trying to migrate to v4 from v2. The build is intermittently failing as in sometimes we get the right page-data.json and sometimes it is not generated right. Any help would be appreciated.