错误：无法获取此 StaticQuery 的结果

Question

概述

我使用的是 gatsby 环境。

由于 gatsby 中使用了 graphql，所以使用了 useStaticQuery。

在开发环境下(gatsby develop)运行正常，在构建后的环境下(gatsby build && gatsby serve)，出现如题的错误。

错误文字

错误：无法获取此 StaticQuery 的结果。

这可能是 Gatsby 中的一个错误，如果刷新页面没有修复它，请在 https://github.com/gatsbyjs/gatsby/issues 中打开一个问题

错误代码

const data = useStaticQuery(
    graphql`
      query {
        allArticle(sort: { order: DESC, fields: updatedAt___seconds }) {
          edges {
            node {
              category
              id
              thumbnail
              title
              createdAt {
                seconds
              }
            }
          }
        }
        allRanking {
          edges {
            node {
              id
              category
              title
              thumbnail
            }
          }
        }
      }
    `
  )

※由于它在秘密模式下正常工作，我想知道缓存是否有问题。

我尝试了什么

删除盖茨比

1. $ yarn remove gatsby
2. $ rm -rf node_modules
3. $ yarn install
4. $ gatsby build && gatsby serve

执行 gatsby clean 命令

1. $ gatsby clean

更改组件名称和文件

https://github.com/gatsbyjs/gatsby/issues/24902#issuecomment-847926225

删除 .cache 文件

我的环境

操作系统：MacOS

package.json

"dependencies": {
    "firebase": "^8.6.7",
    "gatsby": "^3.6.2",
    "gatsby-plugin-advanced-sitemap": "^2.0.0",
    "gatsby-plugin-clarity": "^1.0.0",
    "gatsby-plugin-dark-mode": "^1.1.2",
    "gatsby-plugin-google-adsense": "^1.1.3",
    "gatsby-plugin-google-gtag": "^3.7.1",
    "gatsby-plugin-manifest": "^3.6.0",
    "gatsby-plugin-offline": "^4.6.0",
    "gatsby-plugin-react-helmet": "^4.6.0",
    "gatsby-plugin-twitter": "^3.12.0",
    "gatsby-source-filesystem": "^3.7.1",
    "react": "^17.0.1",
    "react-calendar-heatmap": "^1.8.1",
    "react-copy-to-clipboard": "^5.0.4",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-lazyload": "^3.2.0",
    "react-markdown": "5.0.3",
    "react-scroll": "^1.8.2",
    "react-slick": "^0.28.1",
    "react-syntax-highlighter": "^15.4.3",
    "react-tooltip": "^4.2.21",
    "remark-gfm": "^1.0.0",
    "slick-carousel": "^1.8.1",
    "typescript": "^4.3.2"
  },

Answer 1

很难猜测发生了什么，正如您所指出的，这似乎与缓存问题有关，但是，您已经尝试了所有与缓存相关的东西。我建议：

• 删除gatsby-plugin-offline 并添加gatsby-plugin-remove-serviceworker，因为您将不再使用服务人员

• 检查导入路径。应该是：

  import { useStaticQuery } from 'gatsby';
  

• 检查SEO 组件命名和导入（即：Seo.js 或SEO.js）。这同样适用于Layout