javascript - 如何为 Graphql frontmatter 使用三元运算符?
问题描述
我有我的 gatsby 网站使用 netlifyCMS。我有一个可选的图像字段,但当然它会因“childImageSharp is null”错误而失败,因为我已经指定了它并且它正在寻找它。
这是我尝试三元之前的文件:
import React from "react"
import { Link, graphql, useStaticQuery } from "gatsby"
import Layout from "../components/layout/layout"
import Img from "gatsby-image"
import TriangleThree from "../../assets/trianglethree.svg"
const Services = () => {
const data = useStaticQuery(graphql`
query {
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
filter: { frontmatter: { template: { eq: "service" } } }
) {
edges {
node {
excerpt
frontmatter {
service
template
title
date(formatString: "MMMM DD, YYYY")
serviceCountryImg {
childImageSharp {
fixed {
...GatsbyImageSharpFixed
}
}
}
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
fields {
slug
}
}
}
}
}
`)
return (
<>
<Layout>
<main className="main">
<div className="services old-page">
<h1 className="services__title">Streaming Services</h1>
<div style={{ width: 200 }}></div>
<section className="services__thumbnails">
<div className="services__thumbnails-container">
{data.allMarkdownRemark.edges.map(edge => {
return (
<Link
to={`/streaming-services${edge.node.fields.slug}`}
className="services__thumbnails-item"
data-country="United States"
data-requirements="Requires Subscription"
>
<div className="services__thumbnails-wrapper">
<div className="services__thumbnails-inner">
<figure className="services__thumbnails-artwork">
<Img
fluid={
edge.node.frontmatter.image.childImageSharp
.fluid
}
/>
</figure>
<h2 className="services__thumbnails-name">
{edge.node.frontmatter.service}
</h2>
<Img fixed={edge.node.frontmatter.serviceCountryImg.childImageSharp.fixed} /> -OPTIONAL IMAGE
</div>
</div>
</Link>
)
})}
<div className="services__thumbnails-item is-request">
<div className="services__thumbnails-wrapper">
<div className="services__thumbnails-inner">
<TriangleThree />
<h3 className="services__thumbnails-request">
Request a service
</h3>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
</Layout>
</>
)
}
export default Services
然后这是我尝试过的,但失败了,'serviceCountryImg is undefined'
import React from "react"
import { Link, graphql, useStaticQuery } from "gatsby"
import Layout from "../components/layout/layout"
import Img from "gatsby-image"
import TriangleThree from "../../assets/trianglethree.svg"
const Services = () => {
const data = useStaticQuery(graphql`
query {
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
filter: { frontmatter: { template: { eq: "service" } } }
) {
edges {
node {
excerpt
frontmatter {
service
template
title
date(formatString: "MMMM DD, YYYY")
serviceCountryImg {
childImageSharp {
fixed {
...GatsbyImageSharpFixed
}
}
}
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
fields {
slug
}
}
}
}
}
`)
return (
<>
<Layout>
<main className="main">
<div className="services old-page">
<h1 className="services__title">Streaming Services</h1>
<div style={{ width: 200 }}></div>
<section className="services__thumbnails">
<div className="services__thumbnails-container">
{data.allMarkdownRemark.edges.map(edge => {
return (
<Link
to={`/streaming-services${edge.node.fields.slug}`}
className="services__thumbnails-item"
data-country="United States"
data-requirements="Requires Subscription"
>
<div className="services__thumbnails-wrapper">
<div className="services__thumbnails-inner">
<figure className="services__thumbnails-artwork">
<Img
fluid={
edge.node.frontmatter.image.childImageSharp
.fluid
}
/>
</figure>
<h2 className="services__thumbnails-name">
{edge.node.frontmatter.service}
</h2>
{serviceCountryImg ? (
<Img
fixed={
edge.node.frontmatter.serviceCountryImg.childImageSharp.fixed
}
/>
) : (
""
)}
</div>
</div>
</Link>
)
})}
<div className="services__thumbnails-item is-request">
<div className="services__thumbnails-wrapper">
<div className="services__thumbnails-inner">
<TriangleThree />
<h3 className="services__thumbnails-request">
Request a service
</h3>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
</Layout>
</>
)
}
export default Services
我尝试了一些不同的变化,但没有运气。有人知道怎么做吗?
提前致谢!
解决方案
只是:
{serviceCountryImg && <Img fixed={edge.node.frontmatter.serviceCountryImg.childImageSharp.fixed}/>}
您不需要使用三元条件来返回空值或null
值。您可以使用&&
运算符。
推荐阅读
- python - 将 .py 转换为 .exe 后,视频录制在 python 上不起作用
- assembly - 我如何从我的计算机组织作业中解决这个问题?
- angular - 使用 msal 检索令牌
- php - 如何使用 symfony 学说中的查询构建器来检查权限联结表的文档?
- html - 不要在 ng-options 中包含标签
- python - 你如何在包含包的仓库之外构建一个轮子?
- c++ - 为什么我可以使用 memcpy 将一个对象变量复制到另一个
- hibernate-envers - Spring Data Envers 实体不能为空
- javascript - 如何使用单个名称控制多个按钮以请求天气 API 的响应
- arrays - 如何从气象站获取数据到 Excel 或 Accel