为什么静态查询在 Storybook 中不起作用？答案

【问题标题】：Why don't static queries work in Storybook?为什么静态查询在 Storybook 中不起作用？
【发布时间】：2020-12-03 16:41:40
【问题描述】：

说明

我在 Storybook 中为使用 StaticQuery 的任何组件获取“正在加载（静态查询）”和“无法获取此静态查询的结果”。在 Storybook 中使用 useStaticQuery 的任何组件。一切似乎在本地和构建时都可以正常工作，但是在 Storybook 中我得到了这个：

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

重现步骤

克隆 repo (git@github.com:mrseanbaines/gatsby-storybook-static-query.git)
运行故事书 (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

【问题讨论】：

标签： gatsby storybook prismic.io

【解决方案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/

这样从 gatsby 导入的任何内容都不会破坏故事书

【讨论】：