Storybook: Gatsby Static queries not working in Storybook

[mrseanbaines]

Describe the bug
I'm getting "Loading (StaticQuery)" in Storybook for any component that uses StaticQuery and "The result of this StaticQuery could not be fetched." in Storybook for any component that uses useStaticQuery. Everything seems to work fine locally and when built, but in Storybook I am getting these errors.

Minimal reproduction: https://github.com/mrseanbaines/gatsby-storybook-static-query

I also tried making the minimal reproduction even more minimal by removing any use of Prismic and only querying data from the siteMetadata, but I'm still getting the same results. Updated _all_ of the packages to the latest versions and also added a version of the stories using the new CSF format but again, same results. Made a branch with these changes here.

Also then tried removing usage of TypeScript but still doesn't work: See branch here.

To Reproduce
Steps to reproduce the behavior:

1. Clone the repo ([email protected]:mrseanbaines/gatsby-storybook-static-query.git)
2. Run Storybook (yarn storybook)

Expected behavior
The components should render

Screenshots

System:

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
  Binaries:
    Node: 12.17.0 - ~/.nvm/versions/node/v12.17.0/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.17.0/bin/npm
  Browsers:
    Chrome: 84.0.4147.125
    Firefox: 79.0
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-actions: 6.0.10 => 6.0.10
    @storybook/addons: 6.0.10 => 6.0.10
    @storybook/react: 6.0.10 => 6.0.10

[shilman]

We're most likely getting async data loaders in 6.1 https://github.com/storybookjs/storybook/pull/11012

In the meantime, I'm not sure what the best workaround is. @tmeasday ?

[domyen]

We experienced this issue in the storybookjs/frontpage Gatsby project. This comment from @dakebl 👏 helped us resolve it: https://github.com/storybookjs/frontpage/issues/43

[mrseanbaines]

Thanks for the response @domyen. I had a look at the issue/comment you pointed to, but it looks like I'm already doing what was suggested (i.e. setting NODE_ENV and using babel-plugin-remove-graphql-queries). This is all mentioned in the Gatsby/Storybook setup guide, which is where I copied the config for the reproduction site from.

https://github.com/mrseanbaines/gatsby-storybook-static-query/blob/3e513029ae1c454543aaa39cc7c29cd9975a9a0d/package.json#L6

https://github.com/mrseanbaines/gatsby-storybook-static-query/blob/3e513029ae1c454543aaa39cc7c29cd9975a9a0d/.storybook/main.js#L19

[tmeasday]

@shilman I don't think this is a async thing, more likely a Gatsby/SB interop problem. I'm not sure what changed in 6.0 to break this.

@kylesuss I think you recently worked around useSiteMetadata in a different way in front page, any insight for us?

[kylesuss]

Yeah the fix outlined here no longer works:

https://github.com/storybookjs/frontpage/issues/43

I didn't really solve the underlying issue, but worked around it by overriding a hook that we use to make static queries. I added this to our Storybook's webpack config:

https://github.com/storybookjs/frontpage/blob/b150f80f2f8d84cddf80f7ad108cdb469c388959/.storybook/main.js#L54=L61

Along with this file:

https://github.com/storybookjs/frontpage/blob/b150f80f2f8d84cddf80f7ad108cdb469c388959/.storybook/useSiteMetadata.js

[piemasters]

Just upgraded @storybook/react from 6.0.10 to 6.0.16 and also getting this error, with the previous storybookjs/frontpage#43 no longer working.

[shilman]

@piemasters can you bisect to figure out which version introduced the error?

[jonniebigodes]

I'm inclined to believe this is a problem on Gatsby's side. I've been getting a lot of notifications for issues similar to this, ranging from pulling data in from Gatsby or a external source through a plugin. It's affecting both development and production builds. And affecting providers like Vercel and Heroku. My two cents on this, was that with the recent changes they've been doing, something broke and spread not only Storybook but others as well. I've seen workarounds for this, saying to upgrade, others to downgrade Gatsby version. Pinning versions for thebabel-plugin-remove-graphql-queriespackage or even adding resolutions in case yarn is being used.

A plus side is that the their inkteam and the person behind the useStaticQuery hook and StaticQuery is on it and with that probably soon will soon add a fix for this issue.

[piemasters]

@jonniebigodes yup you're correct, not a storybook issue it was introduced by babel-plugin-remove-graphql-queries 2.9.15. 2.9.14 works fine with @storybook/react 6.0.16.

For my components with static queries I had already split out the pure component for testing as documented here: https://www.gatsbyjs.com/docs/testing-components-with-graphql/#testing-staticquery. To get around the above error I now import the pure component into storybook and add the props I want via the Controls addon. I guess this can lose sync with the correct data if I forget to update, but seems like a better solution.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[papistan]

@piemasters solution above worked: [email protected] + @storybook/[email protected]