0

Description

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 this:

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

Steps to reproduce

  1. Clone the repo (git@github.com:mrseanbaines/gatsby-storybook-static-query.git)
  2. Run Storybook (yarn storybook)

Expected result

The components should render

Actual result

I get errors instead

Environment

Using gatsby-source-prismic-graphql to source data. Also happens with @prismicio/gatsby-source-prismic-graphql.

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    Shell: 5.7.1 - /bin/zsh
  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
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 84.0.4147.125
    Firefox: 79.0
    Safari: 13.1.2
  npmPackages:
    gatsby: 2.24.43 => 2.24.43 
    gatsby-source-prismic-graphql: 3.6.2 => 3.6.2
mrseanbaines
  • 823
  • 2
  • 12
  • 25

1 Answers1

0

In the .storybook folder in your project edit the main.js as follows.

module.exports = {
  "stories": [
    //your stories
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    //your addons
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "storybook-css-modules-preset"
  ],
 // This config to exlude gatsby node modules saved me.
  webpackFinal: async config => {
    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
    return config;
  }
}

Reference https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/

This way any imports from gatsby will not break storybook

xxcheckmatexx
  • 113
  • 1
  • 6