为什么静态查询在故事书中不起作用？

Question

说明

对于任何使用StaticQuery的组件，我在故事书中获得了"加载(静态查询)"，并且在故事书中为任何使用useStaticQuery的组件提供了"无法获取此静态查询的结果"。一切似乎在本地和构建时都运行良好，但在故事书中我得到了这个：

最小复制：https://github.com/mrseanbaines/gatsby-storybook-static-query

重现步骤

1. 克隆存储库 ([e-mail]:mrseanbaines/gatsby-storybook-static-query.git)
2. 运行故事书 (yarn storybook)

预期成果

组件应呈现

实际结果

我收到错误

环境

使用gatsby-source-prismic-graphql源数据。也发生在@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 

Answer 1

在项目的 .storybook 文件夹中编辑 main.js如下所示。

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;
}
}

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

这样，从盖茨比进口的任何产品都不会破坏故事书