Storybook & Gatsby - Staticquery could not be fetched

In order to keep components organised across this website I added Storybook, an open source tool for developing UI components in isolation. Previously I had this set up with my flat ReactJS site, but I ran into a few issues while trying to use it with Gatsby. There had already been a major Storybook update since the last time I used it, so it was easier to scrap the existing one and start again.

One issue I encountered while setting up the components was the error - Staticquery could not be fetched while importing a content listing for the blog. This listing uses GraphQL queries to generate the data which is why the error was thrown.

What causes this error

Gatsby provides static files that are created during the initial compilation of the build process, which is when the GraphQL queries are run. This means that the data collected from the query has already been used to write the file that will be served as part of the production app.

In context of Storybook however, it renders the component in isolation and therefore doesn't trigger the initial compilation that fetched the data for the component, resulting in the 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

The solution

The short of it being that adding babel-plugin-remove-graphql-queries will remove the GraphQL queries all together but only when the NODE_ENV is set to production. Storybook sets the NODE_ENV to development by default, so we can fix this by updating the NPM scripts to set NODE_ENV:

{
    "storybook": "NODE_ENV=production start-storybook -p 6006 -s static",
    "build-storybook": "NODE_ENV=production build-storybook -s static",
}

Now you should be able to run yarn storybook without any issues and have all your components load that use GraphQL static queries!