graphQL + gatsby：查询 Image 或 mp4 的字段答案

【问题标题】：graphQL + gatsby: query a field that is Image or mp4graphQL + gatsby：查询 Image 或 mp4 的字段
【发布时间】：2020-09-08 04:52:32
【问题描述】：

有一个gatsby blog，我添加了一个封面图片，它可以是图片（我希望它显示为 Gatsby 图像）或 mp4（我希望它显示为 html5 视频）。

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

我的查询如下所示：

  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} />
)}

有什么想法吗？

【问题讨论】：

标签： graphql gatsby netlify-cms gatsby-image

【解决方案1】：

问题是，当我查询这个字段时（在我的降价帖子中，封面：x.mp4 或封面：x.jpg），如果它是一个 mp4 并且它没有 childImageSharp 的属性（错误：TypeError：无法读取 null 的属性“流体”）。

cover 字段将是一个文件节点，因此您将无法直接从中获取视频 src。如果你只想访问 mp4 文件（放在 video 标签内），你可以查询它的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} />
)}

【讨论】：

啊它有效！非常感谢！我不擅长graphQL，所以我不确定封面上的属性是什么。谢谢。

【解决方案2】：

为什么不混合使用这两种方法？

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

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

【讨论】：