Gatsby - 加载（静态查询）白屏答案

【问题标题】：Gatsby - Loading (Static Query) white screenGatsby - 加载（静态查询）白屏
【发布时间】：2022-01-02 22:12:15
【问题描述】：

我有 Gatsby.js 项目，我遇到了这个问题，在导航或加载页面时，我得到一个白屏页面，上面写着“正在加载静态查询”，开发和构建时间都没有错误。

我见过其他人遇到这个问题。

我已经更新了 Gatsby 版本 3.8.0 -> 4.2.0

我构建的内容作为静态网站托管上传到 AWS S3，它前面还有 AWS Cloudfront 作为内容交付网络和捕获。

这里我想提一下，在部署新功能时我们会使 Cloudfront 缓存失效。

在无痕模式或我清除所有浏览器缓存和存储时，问题不会发生。

我不知道在这里重现什么

这是我的 Gatsby 静态查询实现（不确定这是否会导致问题，尽管它这么说）

我将 StaticQuery 用于我的 Layout 组件，该组件获取可用于所有组件的数据。

import { graphql, StaticQuery } from "gatsby";
const query = graphql`
  {
    allSanityTranslations {
      edges {
        node {
          data {
            key
            translate {
              en
              se
              ch
            }
          }
        }
      }
    } .........

const Layout = ({
  children,
  showNav,
  showFooter,
  seo,
  currentPage,
  url,
  entity,
}) => (
  <StaticQuery
    query={query}
    render={(data) => (
      <LocaleProvider
        currentPage={currentPage}
        entity={entity}
        translations={
          data && data.allSanityTranslations
            ? MapEdgesToNodes(data.allSanityTranslations)
            : []
        } ..Children...

正如 Gatsby 文档中所说，StaticQuery 在构建时运行。

查询过大有关系吗？

在新版本之前我也在做gatsby clean。

这是屏幕：

更新：

由于进一步调查，我注意到在部署带有代码更改和代码更改的新版本时会发生这种情况。

“加载静态查询屏幕”显示在每个未刷新的页面导航上。

如果我删除浏览器中的所有内容 -> 缓存存储，这将不再发生。所以我认为是与缓存有关。

我正在使用 gatsby-plugin-offline 并在缓存存储中创建 ID：

gatsby-plugin-offline-runtime-...（页面数据等）
gatsby-plugin-offline-precache-...（webpack 和其他 js 文件）

这是我的 gatsby-config.js 关于这个：

{
  resolve: `gatsby-plugin-manifest`,
  options: {
    name: "MyWebsite",
    short_name: "MyWebsite",
    start_url: "/",
    background_color: "#2bb6ef",
    theme_color: "#2bb6ef",
    display: "standalone",
    icon: "static/assets/images/logo/logo-icon.svg",
    icon_options: {
      purpose: `any maskable`,
    },
    include_favicon: true,
  },
},
{ resolve: `gatsby-plugin-offline` },

除此之外，我使用 Sanity 作为来源。

【问题讨论】：

问题是迁移的结果？我的意思是，它适用于 3.8 版吗？
不，它发生在 3.8.0 中，然后我升级希望它会得到修复

标签： amazon-s3 gatsby amazon-cloudfront browser-cache gatsby-plugin

【解决方案1】：

尝试以下方法：

删除 node_modules 和锁定的依赖模块 (yarn.lock/package-lock.json)，然后重新生成它们
使用npm i -g gatsby-cli 更新 gatsby-cli
如果您使用的是babel-plugin-remove-graphql-queries，请将其升级到最新版本或至少升级到高于2.9.5 的版本（来源https://github.com/gatsbyjs/gatsby/issues/24890#issuecomment-714626440）

【讨论】：