search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.27k stars 10.31k forks source link

Error: The result of this StaticQuery could not be fetched. #26037

Closed jamaspy closed 4 years ago

jamaspy commented 4 years ago

Description

Hi Guys,

I have had a Gatsby Project running perfectly fine for 3 months. We are hosted on Netlify and using Contentful as the CMS.

As of Friday 24th July, I am getting the below error: 

react_devtools_backend.js:2273 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 h (gatsby-browser-entry.js:77)
    at b (SiteLinks.js:9)
    at Ki (react-dom.production.min.js:153)
    at Fa (react-dom.production.min.js:175)
    at vo (react-dom.production.min.js:263)
    at cu (react-dom.production.min.js:246)
    at ou (react-dom.production.min.js:246)
    at Zo (react-dom.production.min.js:239)
    at react-dom.production.min.js:123
    at scheduler.production.min.js:19

Here are my current package versions

    "@contentful/rich-text-react-renderer": "^13.4.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "@reach/dialog": "^0.10.1",
    "@reach/tabs": "^0.10.1",
    "@reach/visually-hidden": "^0.10.1",
    "@stripe/stripe-js": "^1.4.0",
    "bootstrap": "^4.4.1",
    "dotenv": "^8.2.0",
    "gatsby": "^2.23.18",
    "gatsby-background-image": "^1.1.1",
    "gatsby-image": "^2.3.1",
    "gatsby-plugin-create-client-paths": "^2.2.1",
    "gatsby-plugin-manifest": "^2.3.3",
    "gatsby-plugin-netlify-identity": "0.0.3",
    "gatsby-plugin-offline": "^3.1.2",
    "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
    "gatsby-plugin-react-helmet": "^3.2.1",
    "gatsby-plugin-robots-txt": "^1.5.1",
    "gatsby-plugin-sharp": "^2.5.3",
    "gatsby-plugin-sitemap": "^2.4.3",
    "gatsby-plugin-transition-link": "^1.18.0",
    "gatsby-remark-responsive-iframe": "^2.3.3",
    "gatsby-source-contentful": "^2.3.32",
    "gatsby-source-filesystem": "^2.2.2",
    "gatsby-source-stripe": "^3.0.7",
    "gatsby-transformer-remark": "^2.7.3",
    "gatsby-transformer-sharp": "^2.4.3",
    "gsap": "^3.2.6",
    "hls.js": "^0.13.2",
    "lodash": "^4.17.15",
    "lodash.merge": "^4.6.2",
    "moment": "^2.25.3",
    "mux-embed": "^3.1.0",
    "netlify": "^4.1.5",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0",
    "react-dom": "^16.12.0",
    "react-firebase-hooks": "^2.1.1",
    "react-helmet": "^5.2.1",
    "react-icons": "^3.10.0",
    "react-netlify-identity-widget": "^0.2.7",
    "react-spring": "^8.0.27",
    "redux": "^4.0.5",
    "styled-components": "^5.1.0",
    "video-react": "^0.14.1"

Steps to reproduce

1) https://www.revelwell.com 2) Navigate from the landing page to any other page 3) The page is blank 4) View console to see the above error 5) Refresh the page, content will load

Expected result

Users should be able to navigate normally throughout the site

Actual result

Blank/White screens show and StaticQuery fails to resolve

Environment

  System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.4.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 84.0.4147.89
    Firefox: 78.0.2
    Safari: 13.1.1
  npmPackages:
    gatsby: ^2.23.18 => 2.23.3
    gatsby-background-image: ^1.1.1 => 1.1.1
    gatsby-image: ^2.3.1 => 2.4.13
    gatsby-plugin-create-client-paths: ^2.2.1 => 2.3.10
    gatsby-plugin-manifest: ^2.3.3 => 2.4.20
    gatsby-plugin-netlify-identity: 0.0.3 => 0.0.3
    gatsby-plugin-offline: ^3.1.2 => 3.2.20
    gatsby-plugin-prefetch-google-fonts: ^1.4.3 => 1.4.3
    gatsby-plugin-react-helmet: ^3.2.1 => 3.3.10
    gatsby-plugin-robots-txt: ^1.5.1 => 1.5.1
    gatsby-plugin-sharp: ^2.5.3 => 2.6.21
    gatsby-plugin-sitemap: ^2.4.3 => 2.4.11
    gatsby-plugin-transition-link: ^1.18.0 => 1.20.2
    gatsby-remark-responsive-iframe: ^2.3.3 => 2.4.11
    gatsby-source-contentful: ^2.3.32 => 2.3.32
    gatsby-source-filesystem: ^2.2.2 => 2.3.22
    gatsby-source-stripe: ^3.0.7 => 3.1.1
    gatsby-transformer-remark: ^2.7.3 => 2.8.26
    gatsby-transformer-sharp: ^2.4.3 => 2.5.11
  npmGlobalPackages:
    gatsby-cli: 2.12.66
nirnejak commented 4 years ago

Same issue

blainekasten commented 4 years ago

We recently shipped some changes to our static queries. Cc'ing @sidharthachatterjee to diagnose and help ya'll out!

rlntls commented 4 years ago

Same issue for me too. Works fine in develop locally, failing on netlify. Tried moving one of the queries into a hook but got the error on the hook instead

cosmicespresso commented 4 years ago

Same here, failing on Vercel.

UPDATE: Same bug when trying to access a plugin page on Gatsby website.

jamesaspinall commented 4 years ago

Thank you @blainekasten @sidharthachatterjee - There is a typo in the URL to reproduce. The URL is: https://www.revelwell.com.au

sidharthachatterjee commented 4 years ago

Thank you for the url @jamesaspinall and others. Can you try clearing node_modules, running gatsby clean and building again? This appears to be an issue with babel loader cache which is in node_modules/.cache

On Netlify and other platforms, you should be able to do this by triggering a deploy that clears cache.

Also, @jamesaspinall Can you try removing gatsby-plugin-offline? There appears to be an issue in plugin offline along with the new Static Query loading mechanism. Adding gatsby-remove-serviceworker should remove this service worker. Let me know if that resolves this for you?

jamaspy commented 4 years ago

Thank you @sidharthachatterjee for the - Can you advice on the best version of Gatsby to be using as well. I have removed my node_module, deleted my package-lock file, npm i and then gatsby clean && gatsby build && gatsby serve following the removal of off-line plugin still causing the white screen & Query failure

Also after removing the off-line package by following the instruction in the Gatsby Docs the error still persists after a Clear Cache & Redeploy on Netlify - Live here: https://www.revelwell.com.au

gatsby info for current cleared cache build on netlify - Any more versioning advice very welcomed System: OS: macOS 10.15.5 CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 14.4.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.7 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 84.0.4147.89 Firefox: 78.0.2 Safari: 13.1.1 npmPackages: gatsby: 2.24.11 => 2.24.11 gatsby-background-image: ^1.1.1 => 1.1.1 gatsby-image: ^2.3.1 => 2.4.13 gatsby-plugin-create-client-paths: ^2.2.1 => 2.3.10 gatsby-plugin-manifest: ^2.3.3 => 2.4.21 gatsby-plugin-netlify-identity: 0.0.3 => 0.0.3 gatsby-plugin-prefetch-google-fonts: ^1.4.3 => 1.4.3 gatsby-plugin-react-helmet: ^3.2.1 => 3.3.10 gatsby-plugin-remove-serviceworker: ^1.0.0 => 1.0.0 gatsby-plugin-robots-txt: ^1.5.1 => 1.5.1 gatsby-plugin-sharp: ^2.5.3 => 2.6.22 gatsby-plugin-sitemap: ^2.4.3 => 2.4.11 gatsby-plugin-transition-link: ^1.18.0 => 1.20.2 gatsby-remark-responsive-iframe: ^2.3.3 => 2.4.11 gatsby-source-contentful: ^2.3.32 => 2.3.32 gatsby-source-filesystem: ^2.2.2 => 2.3.23 gatsby-source-stripe: ^3.0.7 => 3.1.1 gatsby-transformer-remark: ^2.7.3 => 2.8.27 gatsby-transformer-sharp: ^2.4.3 => 2.5.11 npmGlobalPackages: gatsby-cli: 2.12.66

pygeek commented 4 years ago

I'm able to confirm that clearing the npm cache in a Vercel deployment resolves this issue unless your project also uses gatsby-plugin-offline and service worker was previously installed. At first glance, there seems to be an issue with gatsby-plugin-offline.

sidharthachatterjee commented 4 years ago

@pygeek Thank you for confirming that. Clearing npm cache resolves babel loader cache which fixes one issue. The other issue is gatsby-plugin-offline which we're currently fixing.

@jamaspy Do you have a yarn lock file? Any Netlify Build plugins that are active currently? Is your site open source? I'd be very glad to take a look. Feel free to DM me on thttps://twitter.com/chatsidhartha/ if it is private.

sidharthachatterjee commented 4 years ago

@jamaspy Just did some debugging on your url with @pieh and we've managed to isolate the issue. I'll be pushing a fix but in the mean time, removing gatsby-plugin-transition-link should fix this for you

rlntls commented 4 years ago

@sidharthachatterjee issue should be visible here if you can help:

https://5f2045202995cd0007604f23--rlntls-gatsby.netlify.app/ https://github.com/rlntls/gatsby

abelmark commented 4 years ago

@jamaspy Just did some debugging on your url with @pieh and we've managed to isolate the issue. I'll be pushing a fix but in the mean time, removing gatsby-plugin-transition-link should fix this for you

Thanks for your quick response. I was curious when we can we be expecting a fix? Is there something I can change locally in the meantime (other than removing gatsby-plugin-transition-link)?

sidharthachatterjee commented 4 years ago

@abeaclark A fix is open in https://github.com/gatsbyjs/gatsby/pull/26077 and should be out tonight or tomorrow. Removing the plugin at the moment is the way to go!

jamaspy commented 4 years ago

Thank You @sidharthachatterjee @pieh for you support. I am blown away by the community here. THANK YOU. We removed the gatsby-plugin-transition-link but the issue persists. @sidharthachatterjee - I have invited you to the private repo and DM you on Twitter. We will wait for your fix in the meantime

chapster11 commented 4 years ago

I'm getting the same error i'm not using Netlify and not using Contentful. I am using Prismic as CMS. 

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

There is no other readable code to figure out where it's coming from. @sidharthachatterjee is the fix in #26077 only for Contentful ?

LarsBehrenberg commented 4 years ago

I am having the same issue using Netlify & NetlifyCMS. I followed @sidharthachatterjee advice and removed the gatsby-offline-plugin & service worker as well as caches, but the problem persists.

Here are my dependencies:

"dependencies": {
    "@babel/core": "^7.10.5",
    "@brainhubeu/react-carousel": "^1.19.25",
    "@emotion/core": "^10.0.5",
    "@emotion/styled": "^10.0.27",
    "@ncwidgets/id": "^0.8.1",
    "@types/react": "^16.9.43",
    "babel-plugin-emotion": "^10.0.33",
    "emotion-theming": "^10.0.27",
    "gatsby": "2.24.12",
    "gatsby-image": "^2.4.13",
    "gatsby-plugin-catch-links": "^2.3.11",
    "gatsby-plugin-emotion": "^4.3.10",
    "gatsby-plugin-google-analytics": "^2.3.13",
    "gatsby-plugin-mailchimp": "^5.2.2",
    "gatsby-plugin-manifest": "^2.4.21",
    "gatsby-plugin-netlify": "^2.3.11",
    "gatsby-plugin-netlify-cms": "^4.3.11",
    "gatsby-plugin-purgecss": "^5.0.0",
    "gatsby-plugin-react-helmet": "^3.3.10",
    "gatsby-plugin-remove-serviceworker": "^1.0.0",
    "gatsby-plugin-sharp": "^2.6.23",
    "gatsby-plugin-sitemap": "^2.4.11",
    "gatsby-remark-images": "^3.3.22",
    "gatsby-remark-relative-images": "^0.3.0",
    "gatsby-source-filesystem": "^2.3.23",
    "gatsby-transformer-remark": "^2.8.27",
    "gatsby-transformer-sharp": "^2.5.11",
    "netlify-cms-app": "^2.12.19",
    "prop-types": "^15.6.0",
    "react": "^16.12.0",
    "react-adsense": "^0.1.0",
    "react-burger-menu": "^2.7.0",
    "react-dom": "^16.8.4",
    "react-helmet": "^6.0.0",
    "react-social-icons": "^4.1.0",
    "remark": "^12.0.1",
    "remark-html": "^12.0.0"
  },

Would love to help in any way I can to solve this issue!

sidharthachatterjee commented 4 years ago

Can you try running gatsby@static-query-fix and let me know if that fixes this for you?

sidharthachatterjee commented 4 years ago

Just published a fix that should make query result loading a lot more robust in gatsby@2.24.13

Please upgrade to it, clear cache, run a build and let me know!

LarsBehrenberg commented 4 years ago

Worked for me! Thanks heaps!

rlntls commented 4 years ago

Working here too, thanks!

pygeek commented 4 years ago

Installed gatsby@^2.24.14. Still encountering the issue.

sidharthachatterjee commented 4 years ago

@pygeek Without gatsby-plugin-offline or with?

pygeek commented 4 years ago

With gatsby-plugin-offline

sidharthachatterjee commented 4 years ago

@pygeek We're yet to fix gatsby-plugin-offline (that will come as a separate fix and new version of gatsby-plugin-offline)

sidharthachatterjee commented 4 years ago

@pygeek Let's open another issue for this? So that we can reduce confusion?

pygeek commented 4 years ago

@sidharthachatterjee is there another Issue or PR open to resolve the issue with gatsby-plugin-offline? I've updated to the latest packages available and still experiencing issues—it seems like gatsby-plugin-offline is generally not busting cache.

    gatsby-plugin-manifest@2.4.22
    gatsby-plugin-offline@3.2.22
    gatsby@2.24.36
LekoArts commented 4 years ago

Since the original issue was solved, I'll close this in favour of https://github.com/gatsbyjs/gatsby/issues/26563 where also the issues about gatsby-plugin-offline could be discussed.