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

Posted

技术标签:

【中文标题】可选字段图像和 \'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 【参考方案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

【讨论】:

以上是关于可选字段图像和 'childImageSharp' 为 null |盖茨比、GraphQL 和 YAML的主要内容,如果未能解决你的问题,请参考以下文章

Drupal Views 将图像字段输出为可选链接

盖茨比 - 无法读取 null 的属性“childImageSharp”

需要在 Django Formset 中有一个必填字段和可选字段

在 netlify cms 和 gatsby js 中使图像可选

如何在 NetlifyCMS 构建中修复“TypeError:childImageSharp 未定义”?

Laravel 使用可选图像更新记录