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

Posted 2023-03-08

【中文标题】graphQL + gatsby：查询 Image 或 mp4 的字段

【英文标题】：graphQL + gatsby: query a field that is Image or 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 />
)

有什么想法吗？

【参考方案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 />

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