[Storybook] useStaticQuery fetching fails when used inside stories

Description

Fetching data via useStaticQuery within a story causes Storybook to break.

Steps to reproduce

I setup a reproduction repo, based on gatsby-default starter, following the description how to use Storybook with Gatsby.

Reproduction Repo

Expected result

The Story in the repo is supposed to show the queried title “Gatsby Starter Default”.

Actual result

Error message:

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:54134/vendors~main.846d47b2b5df26ed1d0b.bundle.js:28626:11)
    at Reproduction (http://localhost:54134/main.846d47b2b5df26ed1d0b.bundle.js:93:75)
    at http://localhost:54134/vendors~main.846d47b2b5df26ed1d0b.bundle.js:2952:21
    at http://localhost:54134/vendors~main.846d47b2b5df26ed1d0b.bundle.js:4255:16
    at withSubscriptionTracking (http://localhost:54134/vendors~main.846d47b2b5df26ed1d0b.bundle.js:4283:16)
    at http://localhost:54134/vendors~main.846d47b2b5df26ed1d0b.bundle.js:2952:21
    at http://localhost:54134/vendors~main.846d47b2b5df26ed1d0b.bundle.js:4254:14
    at http://localhost:54134/vendors~main.846d47b2b5df26ed1d0b.bundle.js:2980:20
    at storyFn (http://localhost:54134/vendors~main.846d47b2b5df26ed1d0b.bundle.js:5367:30)
    at oh (http://localhost:54134/vendors~main.846d47b2b5df26ed1d0b.bundle.js:41118:146)

Environment

System: OS: macOS 10.15.5 CPU: (16) x64 Intel® Core™ i9-9880H CPU @ 2.30GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 13.12.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.4 - /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.12 => 2.24.13 gatsby-image: ^2.4.9 => 2.4.14 gatsby-plugin-manifest: ^2.4.14 => 2.4.21 gatsby-plugin-offline: ^3.2.13 => 3.2.21 gatsby-plugin-react-helmet: ^3.3.6 => 3.3.10 gatsby-plugin-sharp: ^2.6.14 => 2.6.23 gatsby-source-filesystem: ^2.3.14 => 2.3.23 gatsby-transformer-sharp: ^2.5.7 => 2.5.11

[DevSide]

My workaround for gatsby 2.31.0 and storybook 6.1.15. I changed the options of babel-plugin-remove-graphql-queries in .storybook/main.js.

module.exports = {
  webpackFinal(config) {
     config.module.rules[0].use[0].options.plugins = [
        ...,
        [require.resolve("babel-plugin-remove-graphql-queries"), {
          stage: config.mode === `development` ? "develop-html" : "build-html",
          staticQueryDir: "page-data/sq/d",
        }]
     ]
  }

[mohsenkhanpour]

@blainekasten @sidharthachatterjee

I have the same problem with the latest version of Gatsby. I did some research and I think the problem comes from:

1. babel-plugin-remove-graphql-queries still defaults to static/d :

Considering this line: https://github.com/gatsbyjs/gatsby/blob/289c7f8c154a3d764621c39be585cee0da9c9f1c/packages/babel-plugin-remove-graphql-queries/src/index.js#L199

Recent versions of gatsby (after “2.24.6”) host the static query data in page-data/sq/d however the latest version of babel-plugin-remove-graphql-queries still defaults to static/d. I suppose this default is used by the Storybook’s babel-loader.

2. babel-plugin-remove-graphql-queries doesn’t check against NODE_ENV=production anymore

This pull request edits packages/babel-plugin-remove-graphql-queries/src/index.js with the following diff:

-        [`production`, `test`].includes(process.env.NODE_ENV) &&
+        (process.env.NODE_ENV === `test` ||state.opts.stage === `build-html`) &&

Now as most Storybook + Gatsby workspaces are advised by Gatsby docs to run Storybook with NODE_ENV=production and babel-plugin-remove-graphql-queries after the mentioned PR doesn’t check against NODE_ENV=production the queries aren’t processed anymore.

Here is what I did to confirm that these two changes are the cause of the problem:

1. Run Storybook with NODE_ENV=test as babel-plugin-remove-graphql-queries still checks against it and processes the queries. NODE_ENV=test start-storybook -s public
2. Copy queries from page-data/sq/d to static/d.

Viola. The components containing the queries are loaded with the needed queries.