可选字段图像和 'childImageSharp' 为 null |盖茨比、GraphQL 和 YAML答案

【问题标题】：Optional field image and 'childImageSharp' as null | Gatsby, GraphQL & YAML可选字段图像和 'childImageSharp' 为 null |盖茨比、GraphQL 和 YAML
【发布时间】：2020-07-18 14:16:21
【问题描述】：

编辑：我最终创建了我的问题的一个小副本并将其发布到 Gatsby 的 GitHub，我最终在那里获得了一些帮助。
这是该问题的link！

如果此问题已在其他地方得到处理，我很抱歉，但我无法找到我需要的答案。

我目前正在处理 Gatsby、GraphQl 和 YAML 文件，我有多个要映射的部分，但有些有图像，有些没有。
我通过使用 childImageSharp 声明图像来定义我的 GraphQL

sections {
              title
              description
              imageHere {
                childImageSharp {
                  fluid(maxWidth: 600) {
                    ...GatsbyImageSharpFluid_noBase64
                  }
                }
              }

我看到了一个解决方案，该解决方案涉及将其添加到我的 gatsby-node.js 中，以便可以从我的 YAML 文件中正确读取路径

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
    type allProjectPageYaml implements Node {
      imageHere: [String]!
    }
  `;
  createTypes(typeDefs);
};

现在我的问题是有些部分有 imageHere 字段，有些则没有

sections:
 - title: Title 1
   description: Description 1
 - title: Title 2
   description: Description 2
   imageHere: Image1

我得到的错误是 TypeError: Cannot read property 'childImageSharp' of null

我的解决方法是什么？

【问题讨论】：

你确定 typeError 是由 graphql 查询而不是由试图访问该属性的 js 触发的吗？在后一种情况下，您可以使用深度属性检查，例如： const image = data.sections.imageHere?.childImageSharp

标签： reactjs graphql yaml gatsby

【解决方案1】：

您已将 imageHere 定义为所需的字符串数组，其中：imageHere: [String]!。

如果它实际上应该是一个可选的图像节点，您可能希望将其定义为正确的类型（类似于GatsbyImage，但我不记得它究竟是什么——您应该能够签入graphiql）。这看起来更像imageHere: GatsbyImage（没有爆炸，没有方括号）。

【讨论】：

感谢您的回答，但我考虑到了这一点，后来更改了我的 '[String]!到“文件”，因为根据这个link on Gatsby's page，它应该是一个文件。但是，它仍然对我失败。实际上，现在它在我用这个构建的模板页面上失败了。似乎 childImageSharp 没有采用我的图像路径并将其假设为实际路径。相反，它将其显示为字符串。知道是什么原因造成的吗？
@ItzaMi 哦，天哪，当 Gatsby 的推理系统遇到无法完全解析为系统上文件的节点时，通常会发生这种情况。即使只有 1 和其他 999 工作，该节点也被视为字符串类型。
那么解决方案是什么？我是 gatsby 的新手，这是我第一次遇到这样的事情
@ItzaMi 您需要找出哪个路径无效。据我所知，这是一个手动过程。

【解决方案2】：

我最终创建了我的问题的一个小副本并将其发布到 Gatsby 的 GitHub 上，我最终在那里获得了一些帮助。
这是该问题的link！

【讨论】：

【解决方案3】：

检查 ChildImageSharp 尝试引用的文件路径的拼写。当我收到此错误时，需要更正 img 文件路径。

【讨论】：

【解决方案4】：

对我来说，这是一个缓存问题，请尝试删除 .cache、public、dirs 或运行

gatsby clean

更新
如果使用netlify ci/cd，还需要添加到package.json

"resolutions": {
  "sharp": "0.24.0"
}

https://community.netlify.com/t/error-input-file-contains-unsupported-image-format-gatsby/10891/4

【讨论】：