gatsby: [Storybook] useStaticQuery fetching fails when used inside stories

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",
        }]
     ]
  }

@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.

Cool, works for me atm. Definetly just at temporary workaround, so for now i’ve added a script to my package.json to copy the files and run it before storybook, which looks something like this:

"scripts": {
    "copy-static-queries": "cp -r ./public/page-data/sq/d ./public/static",
    "prestorybook": "npm run copy-static-queries",
  }

Edit: I used a locked version (2.9.14) of babel-plugin-remove-graphql-queries so storybook still runs with NODE_ENV=production

Thanks @DevSide, that’s working for me.

For everyone else, here’s a full example of what’s working for me on the latest version of Gatsby as of this comment (2.32.4). This is derived from the official Gatsby doc about integrating Storybook and @DevSide’s comment.

First, make a Gatsby addon to keep your .storybook/main.js file clean:

(sidenote: this really should just be an addon available on NPM - https://github.com/gatsbyjs/gatsby/discussions/28304)

// .storybook/addon-gatsby.js

module.exports = {
  webpack: async (config, options) => {
    const babelPlugins = [
      // use @babel/plugin-proposal-class-properties for class arrow functions
      require.resolve('@babel/plugin-proposal-class-properties'),
      // use @babel/plugin-proposal-optional-chaining since Webpack 4 doesn't understand optional chaining
      require.resolve('@babel/plugin-proposal-optional-chaining'),
      // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
      [
        require.resolve('babel-plugin-remove-graphql-queries'),
        {
          stage: config.mode === `development` ? 'develop-html' : 'build-html',
          staticQueryDir: 'page-data/sq/d',
        },
      ],
    ]

    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]

    // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
    config.module.rules[0].use[0].loader = require.resolve('babel-loader')

    // use @babel/preset-react for JSX and env (instead of staged presets)
    config.module.rules[0].use[0].options.presets = [
      require.resolve('@babel/preset-react'),
      require.resolve('@babel/preset-env'),
    ]

    config.module.rules[0].use[0].options.plugins = babelPlugins

    // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
    config.resolve.mainFields = ['browser', 'module', 'main']

    // Add TypeScript support
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve('babel-loader'),
      options: {
        presets: [['react-app', { flow: false, typescript: true }]],
        plugins: babelPlugins,
      },
    })

    config.resolve.extensions.push('.ts', '.tsx')

    return config
  },
}

If you aren’t using TypeScript, feel free to remove that portion.

Then, in your .storybook/main.js file, add your addon:

const path = require('path')

module.exports = {
  // ...your other settings, if any
  addons: [
    // ...your other addons, if any
    path.resolve('./.storybook/addon-gatsby.js'),
  ],
}

Lastly, install babel-preset-react-app if you’re using the TypeScript settings in the example above.

@smetzdev I don’t think NODE_ENV has any effect on hosting, since your files are compiled and then you host those files. Unless the library you are using for compilation treats different environments in a different manner. For example gatsby treats different envs differently to optimize the compilation for development and production, and it throws when you pass NODE_ENV=test.

I don’t think storybook treats them any different. It automatically sets NODE_ENV=development however I have been passing NODE_ENV=production, and recently NODE_ENV=test to get the queries processed by babel-plugin-remove-graphql-queries. I can’t say I have noticed any change whatsoever.

Update: As react itself handles NODE_ENV differently to decide whether to export the development bundle or the minified one, it’s probably best not to depend on NODE_ENV to process queries. It would be best to introduce a new environment variable for babel-plugin-remove-graphql-queries.

FWIW, @mohsenkhanpour and @smetzdev 's fixes of NODE_ENV=test and cp -r ./public/page-data/sq/d ./public/static above seem to be working for me. It feels a little “hacky” but for now, it’s getting the job done. Thanks, guys!

I’ll close this issue as it’s not about Gatsby but the correct configuration for Storybook.

We’ve since then updated our Storybook guide (thanks to various contributors): https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/

It also includes a section on a new Storybook Addon for Gatsby: https://storybook.js.org/addons/storybook-addon-gatsby

If you have further questions for configuring Storybook with Gatsby please go to our GitHub Discussions (https://github.com/gatsbyjs/gatsby/discussions/categories/help) or to the addon’s page. Thanks!

Yeah, if i change query, then i need to run gatsby develop to rebuild public/static folder and then restart Storybook server. But this is not a big problem, because i am using Storybook for pure UI prototyping, and queries changes are relatively rare. I just want to get my components working in Storybook without splitting them into pure components / containers.

Thanks, @smetzdev! This is really working as temp fix.

Solution in short for other Storybook users:

Static query results loading in Gatsby runtime was added in gatsby@2.24.7 and babel-plugin-remove-graphql-queries@2.9.15, so we need to lock previous versions:

"dependencies": {
  "gatsby": "2.24.6"
},
"resolutions": {
  "babel-plugin-remove-graphql-queries": "2.9.14"
}

Important note: resolutions are yarn feature, so it doen’t work with npm. But you can just add babel plugin to dependencies list - it’s working too.

But packages install through npm breaks my Storybook in another way (mdx default styling broke, don’t ask…), so i changed my package manager anyway.

@marcysutton ok. I removed my change (add link to issue comment) —-

a chat inside another useStaticQuery Issue

The comment is here: https://github.com/gatsbyjs/gatsby/pull/26077#issuecomment-665605068

As a sidenote to the actual issue, @muescha please do not edit other people’s comments. If you have new context to add, please add it in a new comment rather than modifying another person’s words, out of respect to them. Thank you!

Solution with config.mode === 'development' ? 'develop-html' : 'build-html' doesn’t work for me anymore with build-storybook (it worked on previous versions). Since start-storybook is working great, can I use 'develop-html' stage for the production build? It works, but any side effects in this solution? I suppose this is not worse than previous solution with NODE_ENV=“test” 🤔

Gatsby 3.3.0 Storybook 6.2.8 – with @storybook/builder-webpack5 Webpack 5.28.0 – locked, because the newer version causes another troubles 😦

thank you very much for the answers above.

i was able to run and see images via gql using this topic and recipe https://github.com/PaulieScanlon/gatsby-recipe-storybook-js

start-storybook mode

"storybook": "NODE_ENV=production start-storybook -s public -p 6006 --debug-webpack",

---

build-storybook /serve mode after build and running npx http-server i see no images , just Loading (static query)

"storybook-build": "NODE_ENV=production build-storybook -s public --debug-webpack", "storybook-serve": "npx http-server ./storybook-static"

in both cases babel plugin goes onto build mode

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

---

Destination folder storybook-static

static folder has folders with images and page-date/sq/d/ has gql cache json files as expected

my package.json https://pastebin.com/TRj35qmN

CC @smetzdev @jonniebigodes @mohsenkhanpour