Graphql 图形ql+；盖茨比：查询图像或mp4字段

有一个，我已经添加了一个封面图像，要么是一个图像（我希望它显示为盖茨比图像），要么是mp4（我希望它显示为html5视频）

问题是，当我查询此字段时（在我的降价帖子中，

cover:x.mp4

或

cover:x.jpg

），如果它是mp4并且没有

childImageSharp

属性（错误：

TypeError:无法读取null的属性'fluid'

我的查询如下所示：

  frontmatter {
    date(formatString: "YYYY")
    title
    cover {
      childImageSharp {
        fluid(maxWidth: 900) {
          ...GatsbyImageSharpFluid_noBase64
          ...GatsbyImageSharpFluidLimitPresentationSize
        }
      }
    }
  }

所以我的目标是拥有某种JSX，比如：

{post.frontmatter.cover.childImageSharp && (
  <Img fluid={post.frontmatter.cover.childImageSharp.fluid} />
)}
{post.frontmatter.cover.childImageSharp ? '' : (
  <video src={post.frontmatter.cover} />
)}

{post.frontmatter.cover.childImageSharp&&(
)}

有什么想法吗？
为什么不把这两种方法混合使用呢

{post.frontmatter.cover.childImageSharp ? <Img fluid={post.frontmatter.cover.childImageSharp.fluid} /> : <video src={post.frontmatter.cover} />}

{post.frontmatter.cover.childImageSharp？}

不管你将如何管理它，我认为你的想法是实现你想要的东西的好方法。您将根据您的查询呈现一个或另一个组件，因此，它是高效和干净的

问题是，当我查询这个字段时（在我的降价帖子中，cover:x.mp4或cover:x.jpg），如果它是mp4并且没有childImageSharp属性（错误：TypeError:无法读取null属性'fluid'

cover
字段将是一个文件节点，因此无法直接从中获取视频src。如果您只想访问mp4文件（放入视频标签中），可以查询其
publicURL
：

  frontmatter {
    date(formatString: "YYYY")
    title
    cover {
      extension
      publicURL

      childImageSharp {
        fluid(maxWidth: 900) {
          ...GatsbyImageSharpFluid_noBase64
          ...GatsbyImageSharpFluidLimitPresentationSize
        }
      }
    }
  }

然后在组件中：

{cover.extension === 'mp4'
  ? <video src={cover.publicURL} />
  : <Img fluid={cover.childImageSharp.fluid} />
)}

{cover.extension=='mp4'
? 
: 
)}
啊，它很管用！！！非常感谢！我不擅长graphQL，所以我不确定封面上的属性是什么。非常感谢。