如何在 jsx 中为 gatsby 处理 graphql 查询中的空结果？答案

【问题标题】：How to handle a null result in qraphql query in jsx for gatsby?如何在 jsx 中为 gatsby 处理 graphql 查询中的空结果？
【发布时间】：2020-01-27 10:36:15
【问题描述】：

我在模板文件中有一个 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 为空

我尝试像这样在 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 处理）

【问题讨论】：

标签： javascript graphql jsx gatsby

【解决方案1】：

您正在检查 imagemap 是否为 undefined - 不是 null。

你应该写imagemap !== null，但写{ imagemap && <div>...</div> }会更容易

这将检查null 和undefined。另见Understanding JavaScript Truthy and Falsy

【讨论】：