Question

似乎在GraphQL查询中找不到值时，它会将该字段设置为null而不是undefined（请参阅问题here）。

null是未定义的或没有GraphQL

鉴于React不会对null值使用默认prop，处理GraphQL数据传递到React Component的情况的最佳方法是什么。

例如，我有一个TagList组件，我将传递GraphQL查询的结果。虽然我有以下内容：

TagList.defaultProps = {
  tags: [],
}

如果查询未返回任何代码，则tags的值不会是undefined，而是null，因此未应用默认值，并且组件尝试使用null作为代码的值。

显然我可以在render方法的顶部添加一个检查并将值设置为[]，但感觉必须有更好的解决方案。

Answer 1

GraphQL规范没有包含未定义值的概念 - 值只是null或非null。实际上，在概述解析字段值的步骤时，它指定undefined应该被强制转换为空值：

如果result为null（或其他类似于null的内部值，如undefined或NaN），则返回null。

那就是说，从我的头脑中，有几种方法可以解决这个问题：

1。）在客户端，创建一个可以将组件包装在的小HOC：

const UndefinedToNull = (Component) => (props) => {
  const newProps = props.map(p => p === null ? undefined : p)
  return <Component {...newProps}>
}

2。）如果您正在使用Apollo作为客户端，您应该能够创建一个将null转换为undefined的中间件链接。类似的东西：

const middlewareLink = new ApolloLink((operation, forward) => {
  return forward(response).map(result => {
    // transverse the result, mutating it as needed
    return result
  })
}

3.。）在服务器端，如果您正在使用apollo-server，则可以使用formatResponse配置选项来横向化GraphQL响应并根据需要转换空值或未定义。 YMMV与其他GraphQL中间件。

将GraphQL值与React一起使用时，它们可能为null

1 个答案: