如何为 Graphql frontmatter 使用三元运算符？答案

【问题标题】：How can I use a ternary operator for Graphql frontmatter?如何为 Graphql frontmatter 使用三元运算符？
【发布时间】：2021-02-24 23:06:19
【问题描述】：

我的 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

我尝试了几种不同的变体，但都没有运气。有人知道怎么做吗？

提前致谢！

【问题讨论】：

你的意思可能是edge.node.frontmatter.serviceCountryImg ? …？
是的！我早些时候尝试过，但又把它放在括号里。这行得通。谢谢！

标签： javascript graphql gatsby netlify-cms

【解决方案1】：

只是：

{serviceCountryImg && <Img fixed={edge.node.frontmatter.serviceCountryImg.childImageSharp.fixed}/>}

您不需要使用三元条件来返回空值或null 值。您可以使用&& 运算符。

【讨论】：