graphQL + gatsby：查询一个字段是Image还是mp4

Question

有一个 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} />
)}

有什么想法吗？

Answer 1

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

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

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

Answer 2

The problem is, when I query this field (in my markdown posts, cover: x.mp4 or cover: x.jpg), if it's an mp4 and it doesn't have a property of childImageSharp (error: TypeError: Cannot read property 'fluid' of null).

cover 字段将是一个文件节点，因此您无法直接从中获取视频源。如果你只想访问 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} />
)}

graphQL + gatsby：查询一个字段是Image还是mp4

graphQL + gatsby: query a field that is Image or mp4

graphql

gatsby

netlify-cms

gatsby-image