Gatsby useStaticQuery 给出导致“无法获取此 StaticQuery 的结果”。查询适用于 graphiql 和热重载，而不是页面加载

Question

正如标题所说，我有一个要显示的 svg 的 publicURL 的静态查询。这在 graphiql 中运行良好，我在其他文件中对其他 svg 有非常相似的查询，但由于某种原因，这个确切的查询给了我错误。这些错误中最奇怪的部分是，如果我注释掉查询，保存文件并让 gatsby 热重载，然后取消注释，保存并再次热重载，则会出现图标。

这里是一个重现错误的分支：https://github.com/RyanCallahan312/Portfolio/tree/gatsby-bug

还有相关的特定组件。

import * as React from 'react';
import { useStaticQuery, graphql } from 'gatsby';

interface Icons {
    allFile: {
        nodes: [{ publicURL: string}];
    };
}

const ProjectCard: React.FC = () => {
    const icons: Icons = useStaticQuery(graphql`
    {
        allFile(
            filter: {relativeDirectory: {eq: "icons"}, name: {eq: "eye-white"}}
        ) {
            nodes {
                publicURL
            }
        }
    }
    `);

    return (
        <div>
            <a>
                <img
                    width='32px'
                    src={
                        icons.allFile.nodes[0].publicURL
                    }
                />
            </a>
        </div>
    );
};

export default ProjectCard;

堆栈跟踪：

Uncaught 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 https://github.com/gatsbyjs/gatsby/issues
    at useStaticQuery (webpack-internal:///./.cache/gatsby-browser-entry.js:117)
    at ProjectCard (webpack-internal:///./src/components/projectCard/projectCard.tsx:19)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)

我尝试运行gatsby clean，然后删除节点模块和package-lock.json，然后安装并运行一切干净。我还尝试从我的电脑中删除我的 npm 缓存和 repo，然后再次克隆它。

在此先感谢您的帮助，我已经卡了大约 2 天了。

Answer 1

我在 Node 12.16.1 中运行项目没有遇到任何问题。项目构建没有问题，我可以在/projects 路径中看到眼睛：

假设查询正确地获取数据。请尝试以下操作：

npm uninstall gatsby 
rm -rf node_modules
npm install gatsby 
rm package-lock.json 
npm install
gatsby develop 

到目前为止，您显然已经尝试过。也可以使用 Node 版本（需要您重做所有流程）。

（重新）来源：

• https://github.com/gatsbyjs/gatsby/issues/24902
• https://github.com/gatsbyjs/gatsby/issues/24890
• https://github.com/gatsbyjs/gatsby/issues/26563