可选字段图像和'childImageSharp'为null | Gatsby,GraphQL和YAML

问题描述 投票:1回答:1

编辑:我最终创建了我的问题的一小幅复制品,并将其发布到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:无法读取null的属性'childImageSharp'

我的解决方法是什么?

reactjs graphql yaml gatsby
1个回答
0
投票

您已将imageHere定义为必需的字符串数组,其内容为:imageHere: [String]!

如果实际上应该是一个可选的图像节点,则可能需要将其定义为正确的类型(类似于GatsbyImage,但我无法确切地记住它是临时使用的,您应该能够检查graphiql)。看起来更像imageHere: GatsbyImage(没有爆炸,没有方括号)。

© www.soinside.com 2019 - 2024. All rights reserved.