How can I use a ternary operator for Graphql frontmatter?

Question

I have my gatsby site using netlifyCMS. I have one of the image fields optional, but of course it fails with 'childImageSharp is null' error because I've specified it and it's looking for it.

here is my file before I tried a ternary:

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

Then here is what I tried but it failed with, '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

I'm tried a few different variations but had no luck. Anyone know how to do this?

Thanks in advance!

You probably meant `edge.node.frontmatter.serviceCountryImg ? …`? — Bergi, Nov 12 '20 at 22:30
Yup! I tried that earlier but had it wrapped again in parentheses. This worked. Thanks! — Austinmdem, Nov 12 '20 at 23:14

score 1 · Accepted Answer · answered Nov 13 '20 at 05:50

1

Just:

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

You don't need to use a ternary condition to return an empty or null value. You can use the && operator.

answered Nov 13 '20 at 05:50

Ferran Buireu

28,630
6
39
67

How can I use a ternary operator for Graphql frontmatter?

1 Answers1