错误：无法获取此 StaticQuery 的结果。这可能是 Gatsby 中的一个错误，如果刷新页面不能修复它

Question

当我尝试使用静态查询在我的 gatsby 项目中使用 gatsby-image 加载图像时出现此错误。为了给你一些背景信息，我创建了一个包含多个 gatsby 网站并重用共享组件的 monorepo。文件夹的层次结构是：

• 包
  • 共享用户界面
    • 图片
      • lightlogo.png
    • 组件
      • lightlogo.js
    • index.js
  • 风险投资
    • 源
      • 页
        • 404.js

index.js 文件导出 lightlogo 组件供页面访问。

index.js的代码如下：

export { default as LightLogo } from "./components/lightlogo"

而组件的代码是：

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

const LightLogo = ({ style }) => {
  const { data } = useStaticQuery(graphql`
    query {
        lightlogo: file(relativePath: { eq: "light_logo.png" }) {
          childImageSharp {
            fluid(maxWidth: 78) {
              ...GatsbyImageSharpFluid_withWebp
            }
          }
        }
      }
    `)
  return <Img style={style}
    fluid={data.lightlogo.childImageSharp.fluid} alt="Light HAG Logo"
  />
}

export default LightLogo

404页面的代码是：

import React from "react"
import { LightLogo } from "../../../shared-ui"

const NotFoundPage = () => (
  <div>
    <LightLogo />
    <h1>NOT FOUND</h1>
    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
  </div>
)

export default NotFoundPage

Ventures 文件夹中的 gatsby 配置如下：

module.exports = {
    plugins: [
        `gatsby-plugin-react-helmet`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `../shared-ui/images`,
            },
        },
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sitemap`,
        `gatsby-plugin-sass`,
        `gatsby-plugin-styled-components`,
        {
            resolve: `gatsby-plugin-sharp`,
            options: {
                useMozJpeg: false,
                stripMetadata: true,
                defaultQuality: 75,
            },
        },
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                name: `HAG Ventures`,
                short_name: `HAG`,
                start_url: `/`,
                background_color: `#663399`,
                theme_color: `#663399`,
                display: `minimal-ui`,
                icon: `../shared-ui/images/light_logo.png`, // This path is relative to the root of the site.
            },
        },
        // this (optional) plugin enables Progressive Web App + Offline functionality
        // To learn more, visit: https://gatsby.dev/offline
        // `gatsby-plugin-offline`,
    ],
}

我的 package.json 是：

{
    "name": "@lerna-monorepo/ventures",
    "description": "A simple starter to get up and developing quickly with Gatsby",
    "version": "0.1.0",
    "author": "Kyle Mathews <mathews.kyle@gmail.com>",
    "dependencies": {
        "@lerna-monorepo/shared-ui": "^1.0.0",
        "@fortawesome/fontawesome-svg-core": "^1.2.30",
        "@fortawesome/free-brands-svg-icons": "^5.14.0",
        "@fortawesome/free-regular-svg-icons": "^5.14.0",
        "@fortawesome/free-solid-svg-icons": "^5.14.0",
        "@fortawesome/react-fontawesome": "^0.1.11",
        "babel-plugin-styled-components": "^1.10.7",
        "bootstrap": "^4.4.1",
        "framer-motion": "^1.8.4",
        "gatsby": "2.23.3",
        "gatsby-background-image": "^0.10.2",
        "gatsby-cli": "^2.14.1",
        "gatsby-image": "^2.2.38",
        "gatsby-plugin-manifest": "^2.2.31",
        "gatsby-plugin-offline": "^3.0.27",
        "gatsby-plugin-react-helmet": "^3.1.21",
        "gatsby-plugin-robots-txt": "^1.5.0",
        "gatsby-plugin-sass": "^2.2.1",
        "gatsby-plugin-sharp": "^2.3.5",
        "gatsby-plugin-sitemap": "^2.2.26",
        "gatsby-plugin-styled-components": "^3.2.1",
        "gatsby-source-filesystem": "^2.2.2",
        "gatsby-source-rss-feed": "^1.2.2",
        "gatsby-transformer-sharp": "^2.3.7",
        "gsap": "^3.5.1",
        "lottie-player": "^1.0.0",
        "lottie-react": "^2.1.0",
        "lottie-web": "^5.7.4",
        "node-sass": "^4.13.1",
        "popper.js": "^1.16.1",
        "prop-types": "^15.7.2",
        "react": "^16.14.0",
        "react-bootstrap": "^1.0.0",
        "react-dom": "^16.14.0",
        "react-helmet": "^5.2.1",
        "react-hot-loader": "^4.13.0",
        "react-lazyload": "^3.1.0",
        "react-slick": "^0.27.10",
        "react-waypoint": "^9.0.3",
        "scrollmagic": "^2.0.7",
        "scrollmagic-plugin-gsap": "^1.0.4",
        "slick-carousel": "^1.8.1",
        "styled-components": "^5.1.0",
        "uninstall": "0.0.0"
    },
    "devDependencies": {
        "prettier": "^1.19.1"
    },
    "keywords": [
        "gatsby"
    ],
    "license": "MIT",
    "scripts": {
        "build": "gatsby build",
        "develop": "gatsby develop",
        "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
        "start": "npm run develop",
        "serve": "gatsby serve",
        "clean": "gatsby clean",
        "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
    },
    "repository": {
        "type": "git",
        "url": "https://github.com/gatsbyjs/gatsby-starter-default"
    },
    "bugs": {
        "url": "https://github.com/gatsbyjs/gatsby/issues"
    }
}

我尝试使用 yarn 重新安装所有软件包，但没有成功。当我在 GraphiQl 中查询图像时，查询成功获取文件。

Answer 1

如果您的 Gatsby 应用程序的根是 packages/ventures，那么 Gatsby 将不会从 packages/shared-ui 提取 GraphQL 查询，即使您导入它们也是如此。这是因为 Gatsby 在解析和评估代码之前使用静态分析来提取 GraphQL 查询，将查询替换为引用查询结果数据的标识符。

您通常会以Gatsby Theme 的形式执行此类操作，它提供了一种共享代码的机制，该机制在很大程度上被视为具有一些附加挂钩和替换功能的本地组件。

或者，您可能会幸运地使用Node APIs 挂钩到构建过程并复制文件（例如，将查询解析出shared-ui 组件并将其重写到ventures 文件夹onPreBootstrap） ，但这将是一场艰苦的战斗。