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

如何解决如何为Graphql frontmatter使用三元运算符？

我有使用netlifyCMS的gatsby网站。我有一个可选的图像字段，但是当然会失败，并显示“ childImageSharp为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未定义”

import React from "react"
import { Link,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。您可以使用&&运算符。