Storybook-addon-gatsby: How to Override Options in babel-plugin-remove-graphql-queries & Fix Loading (StaticQuery) in Storybook

Developing with Prismic
1

package.json

"gatsby": "^4.3.0",
"gatsby-background-image": "^1.6.0",
"@storybook/react": "^6.4.9",
"storybook-addon-gatsby": "^0.0.3",

Hi, I'm trying to get images to load when I'm using StaticQuery. In Storybook, it just shows as Loading (StaticQuery). I've been researching this issue and encountered a potential fix in this GitHub issue:

However, when I try adding

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

to my .storybook/main.js, I get Error: Duplicate plugin/preset detected. in my console window. Since babel-plugin-remove-graphql-queries is already a dependency for storybook-addon-gatsby, how do I override this plugin's option?

3

Hi Kevin,

Welcome to the community!

I'm definitely not an expert on Gatsby, but I'm going to reach out to my team members with more experience to see if they can help you with this.

Thanks.

4

Hi @do-kevin,

Thanks for pointing this out. Static Query support is now built-in to storybook-addon-gatsby in v0.0.4.

Could you update and let me know if this fixes your issue?

The addon provides the stage and staticQueryDir options to babel-plugin-remove-graphql-queries, just like your example.

It also configures Storybook to load the ./page-data/sq/d directory automatically, so you do not need to use the -s option when starting Storybook.

Thanks!