CODEWITHSUNDEEP
javascriptgraphqljsxgatsby
Roman Walters
Roman Walters

Reputation: 95

How to handle a null result in qraphql query in jsx for gatsby?

I have a graphql query in a template file, that delivers null for some pages. How can I handle this not getting a type error?

The graphql query:

export const query = graphql`
    query(
            $cat: String!,
            $regexCat: String!
        ) 
    {
        products: allWarenlisteCsv(filter: {Warengruppe: {eq: $cat}}) {
            edges {
              node {
                Artikelnummer
                Artikelbeschreibung
                Bemerkungen
                Preis
                Grafik
              }
            }
        }
        categories: allWarenlisteCsv(filter: {Warengruppe: {regex: $regexCat}}) {
            distinct(field: Warengruppe)
        }
        imagemap: imagemapsCsv(Warengruppe: {eq: $cat}) {
            Warengruppe
            image
            map
        }
    }
`

The imagemap returns:

{
  "data": {
    "imagemap": null
  }
}

for most pages.

Then I get

TypeError: imagemap is null

I tried to handle this in jsx like this, but doesn't work:

 { imagemap !== 'undefined' &&
            <div>
                <img src={ "/images/image_maps/" + imagemap.image } usemap="#map" alt="Explosionszeichnung"></img>
                <map name="map" dangerouslySetInnerHTML={{__html: imagemap.map}} />
            </div>
 }

(The images will get handled by gatsby-image later)

Upvotes: 1

Views: 384

Answers (1)

janhartmann
janhartmann

Reputation: 15003

You are checking whether or not imagemap is undefined - not null.

You should be doing imagemap !== null, but it would be easier to write { imagemap && <div>...</div> }

This will check for null and undefined. Also see Understanding JavaScript Truthy and Falsy

Upvotes: 2

Related Questions