Error loading a result for the page query in "/" in development after successful built

Description

This is a very weird issue which has started occurring recently. The development sequence runs successfully and I see the message:

You can now view website in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 10.845s

When I go to http://localhost:8000/ and hit enter, I receive the following:

Error loading a result for the page query in "/". Query was not run and no cached result was found.
Error loading a result for the page query in "/404.html". Query was not run and no cached result was found.
Error loading a result for the page query in "/dev-404-page". Query was not run and no cached result was found.

I’ve discovered by luck that if I wait around 5-10 mins, it starts to work. So I can visit / and other pages. But in the meantime, there are no messages or log into the terminal. As if there is a background process running. I’ve also noticed my Netlify deployments started to go up to 20 mins from the usual 4-5 minutes it takes. I guess Netlify is polling on index page and deploys when it gets a 200.

Steps to reproduce

Really don’t know how to reproduce and what is causing this.

Expected result

To be able to navigate to / once build is successful.

Actual result

Error loading a result for the page query in "/". Query was not run and no cached result was found.

for around 10 mins, then it resumes normally.

Environment

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.13.1 - ~/.asdf/installs/nodejs/12.13.1/bin/node
    Yarn: 1.22.4 - ~/.asdf/shims/yarn
    npm: 6.12.1 - ~/.asdf/installs/nodejs/12.13.1/bin/npm
  Languages:
    Python: 3.7.2 - ~/.asdf/shims/python
  Browsers:
    Chrome: 86.0.4240.111
    Edge: 86.0.622.51
    Firefox: 79.0
    Safari: 14.0
  npmPackages:
    gatsby: ^2.24.85 => 2.24.85
    gatsby-image: ^2.4.21 => 2.4.21
    gatsby-plugin-fullstory: ^2.3.14 => 2.3.14
    gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
    gatsby-plugin-google-tagmanager: ^2.3.16 => 2.3.16
    gatsby-plugin-manifest: ^2.4.35 => 2.4.35
    gatsby-plugin-preload-fonts: ^1.2.28 => 1.2.28
    gatsby-plugin-react-helmet: ^3.3.14 => 3.3.14
    gatsby-plugin-sharp: ^2.6.43 => 2.6.43
    gatsby-plugin-sitemap: ^2.4.17 => 2.4.17
    gatsby-plugin-theme-ui: ^0.3.0 => 0.3.0
    gatsby-source-filesystem: ^2.3.35 => 2.3.35
    gatsby-source-prismic: ^3.1.4 => 3.2.1
    gatsby-transformer-sharp: ^2.5.19 => 2.5.19
  npmGlobalPackages:
    gatsby-cli: 2.12.111

[FelDev]

I also randomly got that error using Gatsby 3.4.0 npm rebuild --update-binary didn’t do the trick Then I tried gatsby clean and everything worked again.

Besides having the FAST_DEV flag set to true, not much is special about my setup. I do not use the gatsby-plugin-remove-trailing-slashes mentionned in #29946

My list of plugins:

• gatsby-plugin-styled-components
• gatsby-plugin-image
• gatsby-plugin-sharp
• gatsby-transformer-sharp
• gatsby-plugin-purgecss
• gatsby-plugin-i18n

[OlBal]

I am experiencing this same error since the latest Gatsby update. I tried Gatsby clean to clear the cache but that had no effect.