React + Typescript + GraphQL：如何处理null

Question

GraphQL查询返回类型或null。我在想出一种干净的方法来干净地处理所有这些null时遇到麻烦...

如果我有一个很大的嵌套graphql查询...

query {
  markdown {
    authors {
      names {
        first 
      }
    }
  }
}

然后这些字段中的每个字段在顶部都可以为空，因此在我的TSX文件中，我将必须进行某种方式的检查，但是如何进行整洁？

const Component = ({ data }) => (
  <div>
   {data && data.markdown && data.markdown.authors && data.markdown.authors.names && data.markdown.authors.names.first}
  </div>
)

Answer 1

如果使用lodash，则可以使用方法_.get和_.has来确定数据对象是否具有深度嵌套的键。

const data = {a: {b: {c: 'nested data'}}}
_.get(data, 'a.b.c') // returns 'nested data'

另请参阅以下问题的答案。

1. Test for existence of nested JavaScript object key
2. adding to json property that may or may not exist yet