Cannot fetch the data inside React component in storybook

[mati080]

hello i have the following problem. I use lerna for monorepo, in which I have 2 packages - gatsby applications and component library (storybook). The components from the storybook are imported into the gatsby application. I wonder if there is any option to execute a graphql query from the component so that the data can be retrieved? At this moment he receives a message

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

I read the solutions in this thread: #26099 unfortunately nothing works for me.

My settings

main.js

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-a11y"
  ],
  webpackFinal: async (config) => {
    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]
    // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
    config.module.rules[0].use[0].loader = require.resolve("babel-loader")
    // use @babel/preset-react for JSX and env (instead of staged presets)
    config.module.rules[0].use[0].options.presets = [
      require.resolve("@babel/preset-react"),
      require.resolve("@babel/preset-env"),
    ]
    config.module.rules[0].use[0].options.plugins = [
      // use @babel/plugin-proposal-class-properties for class arrow functions
      require.resolve("@babel/plugin-proposal-class-properties"),
      // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
      require.resolve("babel-plugin-remove-graphql-queries"),
    ]
    // Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
    config.resolve.mainFields = ["browser", "module", "main"]
    return config
  }
}

and I run the storybook like this:

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

I want to fetch the data in the following way:

const Example: React.FC = () => {
    const data = useStaticQuery(graphql`
        query HeaderQuery {
          site {
            siteMetadata {
              title
            }
          }
        }
      `)
    console.info(data);

    return (
        <div>ok</div>
    );
};

Do you have any solution to this problem? Or will it be difficult or impossible?

[LekoArts]

You could try the new instructions here: #31653

[mati080]

@LekoArts I tried, but I get the same error all the time ...