Static queries not working in Storybook when using Prismic Gatsby source plugins

[sean (Sean Baines)]

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

[Pau]

Hello Sean, thanks for sharing all the details, we’re going to test this out and tell you what we found.

[Pau]

Hey again!

So I tested your project. I also get the same warning that you’re explaining.

A solution I can recommend you would be to make the queries at page level (
instead of doing them at the component level) and then just pass the header and footer data as props.

For this approach, you’ll need to type the props that you’re passing to your components since you’re using Typescript.

[sean (Sean Baines)]

@Pau thanks for looking into this and for your response.

Since posting this I tried removing the Prismic integration and only queried data from the gatsby-config siteMetadata and still got the same errors, so it seems like this isn’t a problem with the Prismic plugin. I’ve raised issues with Gatsby and Storybook so hopefully one of them will work out what’s causing this.