Gatsby构建后StaticQuery无法获取结果错误如何解决？

我使用Gatsby环境开发项目，由于Gatsby中使用GraphQL，因此调用了useStaticQuery接口。
代码在开发环境（gatsby develop）中运行正常，但在执行gatsby build && gatsby serve启动构建后的环境时，出现了对应报错。

报错信息
Error: 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 the Gatsby official repository.

相关报错代码如下：

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
            }
          }
        }
      }
    `
  )

※ 经测试隐身模式下运行正常，因此怀疑问题与缓存相关。

已尝试的解决方案 #

• 重装Gatsby依赖
  1. $ yarn remove gatsby
  2. $ rm -rf node_modules
  3. $ yarn install
  4. $ gatsby build && gatsby serve
• 执行Gatsby缓存清理命令
  1. $ gatsby clean
• 修改组件名称与对应文件
• 手动删除.cache文件夹
  以上方案均未解决问题，以下为可行的解决方法：

可行解决方案 #

方案1：调整离线插件的缓存策略 #

你项目依赖中安装了gatsby-plugin-offline，该插件默认会缓存静态资源包括StaticQuery的查询结果，旧版缓存未失效会导致构建后读取不到新的查询结果。操作步骤：

1. 打开gatsby-config.js，找到gatsby-plugin-offline的配置项，添加跳过StaticQuery相关缓存的规则：

{
  resolve: `gatsby-plugin-offline`,
  options: {
    cacheId: `gatsby-app-${Date.now()}`, // 每次构建生成唯一缓存ID
    skipWaiting: true,
    clientsClaim: true,
    runtimeCaching: [
      {
        urlPattern: /^https?:\/\/.*\/static\/d\/.*\.json$/, // 匹配StaticQuery的JSON结果文件
        handler: `NetworkFirst`, // 优先走网络请求获取最新内容，而非直接读缓存
      },
    ],
  },
}

2. 执行gatsby clean && gatsby build && gatsby serve验证问题是否解决。

方案2：拆分静态查询 #

将当前合并的单个useStaticQuery拆分成两个独立的查询分别调用，避免单个查询体积过大触发缓存异常：

// 查询Article数据
const articleData = useStaticQuery(
  graphql`
    query {
      allArticle(sort: { order: DESC, fields: updatedAt___seconds }) {
        edges {
          node {
            category
            id
            thumbnail
            title
            createdAt {
              seconds
            }
          }
        }
      }
    }
  `
)
// 查询Ranking数据
const rankingData = useStaticQuery(
  graphql`
    query {
      allRanking {
        edges {
          node {
            id
            category
            title
            thumbnail
          }
        }
      }
    }
  `
)

方案3：临时禁用离线插件验证根因 #

如果上述两个方案未生效，可先在gatsby-config.js中注释掉gatsby-plugin-offline的引入，重新构建后测试，确认是否是离线插件缓存导致的问题。如果注释后问题消失，可升级gatsby-plugin-offline到对应适配你Gatsby版本的最新小版本，再重新配置启用。

我的开发环境 #

• 操作系统：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"
  },

内容的提问来源于stack exchange，提问作者黒光俊秀