Как обработать нулевой результат в запросе qraphql в jsx для gatsby? - PullRequest
1 голос
/ 27 сентября 2019

У меня есть запрос graphql в файле шаблона, который возвращает null для некоторых страниц.Как я могу справиться с этим, не получая ошибку типа?

Запрос graphql:

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
        }
    }
`

Карта изображений возвращает:

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

для большинства страниц.

Тогда я получаю

TypeError: imagemap имеет значение null

Я пытался обработать это в jsx, как это, но не работает:

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

(изображения будут обработаны gatsby-image позже)

1 Ответ

2 голосов
/ 27 сентября 2019

Вы проверяете, является ли imagemap undefined - не null.

Вы должны делать imagemap !== null, но было бы легче написать { imagemap && <div>...</div> }

Это проверит для null и undefined.Также см. Понимание истинности и фальши JavaScript

...