Gatsby - 无法获取此 StaticQuery 的结果答案

【问题标题】：Gatsby - The result of this StaticQuery could not be fetchedGatsby - 无法获取此 StaticQuery 的结果
【发布时间】：2020-11-16 05:36:38
【问题描述】：

我有一个 Gatsby 网站，已经在线运行了 3 个月。截至 7 月 24 日星期五，我开始收到以下结果，用户只看到一个空白屏幕。

    
    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
        at h (gatsby-browser-entry.js:77)
        at O9Ll.t.default (buybike.js:52)
        at Ki (react-dom.production.min.js:153)
        at Fa (react-dom.production.min.js:175)
        at vo (react-dom.production.min.js:263)
        at cu (react-dom.production.min.js:246)
        at ou (react-dom.production.min.js:246)
        at Zo (react-dom.production.min.js:239)
        at react-dom.production.min.js:123
        at scheduler.production.min.js:19

这是我的 package.json

    "@reach/dialog": "^0.10.1",
    "@reach/tabs": "^0.10.1",
    "@reach/visually-hidden": "^0.10.1",
    "@stripe/stripe-js": "^1.4.0",
    "bootstrap": "^4.4.1",
    "dotenv": "^8.2.0",
    "gatsby": "^2.23.18",
    "gatsby-background-image": "^1.1.1",
    "gatsby-image": "^2.3.1",
    "gatsby-plugin-create-client-paths": "^2.2.1",
    "gatsby-plugin-manifest": "^2.3.3",
    "gatsby-plugin-netlify-identity": "0.0.3",
    "gatsby-plugin-offline": "^3.1.2",
    "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
    "gatsby-plugin-react-helmet": "^3.2.1",
    "gatsby-plugin-robots-txt": "^1.5.1",
    "gatsby-plugin-sharp": "^2.5.3",
    "gatsby-plugin-sitemap": "^2.4.3",
    "gatsby-plugin-transition-link": "^1.18.0",
    "gatsby-remark-responsive-iframe": "^2.3.3",
    "gatsby-source-contentful": "^2.2.7",
    "gatsby-source-filesystem": "^2.2.2",
    "gatsby-source-stripe": "^3.0.7",
    "gatsby-transformer-remark": "^2.7.3",
    "gatsby-transformer-sharp": "^2.4.3",
    "gsap": "^3.2.6",
    "netlify": "^4.1.5",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "react-icons": "^3.10.0",
    "react-netlify-identity-widget": "^0.2.7",
    "react-spring": "^8.0.27",
    "redux": "^4.0.5",
    "styled-components": "^5.1.0",
    "video-react": "^0.14.1"
  },

我的网站托管在 Netlify 上，我使用 Contentful 作为我的 CMS。可以在此处找到该站点https://revelwell.com.au/ - 初始页面加载，但如果您单击任何链接以导航离开该页面，则会发生错误。如果你点击刷新页面加载完全正常。

非常感谢任何帮助。谢谢詹姆斯

【问题讨论】：

github.com/gatsbyjs/gatsby/issues/24902

标签： gatsby netlify contentful

【解决方案1】：

刚刚对 gatsby 项目进行了修复 (github.com/gatsbyjs/gatsby/pull/26077/)

现在可以在 2.24.13

版本上使用

如果您的 package.json 是："gatsby": "^2.23.18"，您只需要删除您的 yarn.lock 并执行 yarn install 即可获得最新版本（您可以通过执行 yarn list gatsby 检查您的 gatsby 版本）

这应该可以解决您的问题（我的问题已解决！）。

【讨论】：

仍然在"gatsby": "^2.24.66",上发力
2.24.91 仍在发生
仍在"gatsby": "^3.7.1"上发生

【解决方案2】：

到目前为止，您尝试了什么？正如@ksav 所指出的，在this GitHub thread 中有几种方法可以解决类似的问题：

删除node_modules、.cache并重新安装
删除node_modules、.cache 将 Gatsby 修复为v2.23.3/升级到^2.26.1，其中修复了错误并重新安装

它似乎与无法在全新安装中重现的loading staticQuery bug 有关。最后的试验是删除你的package-lock/yarn-lock.json并重新生成。

【讨论】：

我已经按照上面的内容进行了操作，但仍然无法正常工作。按照上面的方法，我无法让它在本地构建。我已经删除了模块以及锁定文件。
上述链接上的更多内容可能对面临此问题的其他人有所帮助。我自己还没有解决方案，但这可能会有所帮助:)
使用"gatsby": "^2.26.1"，删除node_modules、.cache和package-lock/yarn-lock.json成功了！

【解决方案3】：

我们的问题是由于导入错误造成的。我们有一个文件夹设置，我们在页面中有一个子文件夹：

-pages
 -about-us
  -index
  -references
  -employees

在关于我们的第一个子页面的索引页面中，我们确实导入了这样的组件：import Index from '../../components/AboutUs';这在开发中有效，但在生产中我们需要将索引添加到import Index from '../../components/AboutUs/Index';

只是想指出这一点，因为 Gatsby 可以创建在生产或开发模式下不可读的路径，这会导致静态查询问题。

【讨论】：

【解决方案4】：

我的解决方案基于以下内容：

#26099

解决方案： yarn add -D babel-plugin-remove-graphql-queries

    # .storybook/main.js
        config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loader: require.resolve('babel-loader'),
      options: {
        presets: [['react-app', { flow: false, typescript: true }]],
        plugins: [
          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'),
        ],
      },
    });
    config.resolve.extensions.push('.ts', '.tsx');

    # package.json
    "storybook:static-query": "yarn clean && yarn build && cp -r ./public/page-data/sq/d ./public/static",
    "storybook": "yarn storybook:static-query && NODE_ENV=test start-storybook -p 6006  --no-dll -s public",

脚本“storybook:static-query”的原因感谢mohsenkhanpour。但简而言之，“babel-plugin-remove-graphql-queries”会在 /static/d 上查找查询，因此我们只是将其从 Gatsby 放置的位置移开。

相关包版本：

    "gatsby": "^2.24.66",
    "storybook": "^6.0.28",
    "babel-loader": "^8.1.0",
    "babel-plugin-remove-graphql-queries": "^2.9.20",

【讨论】：

【解决方案5】：

有时清理缓存可以解决突发的 GraphQL 错误：

# Run `npm install -g gatsby-cli` if you haven't installed Gatsby CLI
gatsby clean

Documentation on gatsby clean

【讨论】：

【解决方案6】：

尝试全局安装

npm install -g gatsby-cli

【讨论】：

【解决方案7】：

只需将您使用 useStaticQuery 挂钩的组件的文件名大写即可。

示例：header.js -> Header.js
然后清除 Gatsby 缓存并重新启动服务器。
这应该可以解决问题。

【讨论】：

【解决方案8】：

在学习教程时遇到“无法获取此 StaticQuery 的结果”错误，花了大约 30 分钟才发现问题。

我尝试“gatsby clean”并多次删除并重新安装我的 node_modules 目录，但均未成功。

我已将查询提取到 useSiteMetadata 挂钩，最初在创建“useSiteMetaData.js”文件时不小心将“D”大写，导致它在我的文件中导入为“../hooks/useSiteMetaData.js”导航组件。我已将文件名更改为“useSiteMetadata.js”，但该导入仍使用初始大写“D”大小写。

我将导入路径更正为“../hooks/useSiteMetadata.js”并运行“gatsby clean”，错误消失了。

作为额外说明，我还删除了 localhost:8000 中的 cookie - 我之前尝试过几次都没有效果，但我在修复导入路径大小写之前就这样做了，所以想注意以防万一.

【讨论】：