如何為 Graphql frontmatter 使用三元運算符？

Question

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

我嘗試了幾種不同的變體，但沒有運氣。 有人知道怎么做嗎？

提前致謝！

Answer 1

只是：

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

您不需要使用三元條件來返回空值或null值。 您可以使用&&運算符。