Question

我正在开发一个React应用。我想使用此查询：

const Newss = gql`
  query getNewssData {
    newss(ordered: true) {
      id
      title
      content
      event{
        id
        title
      }
    }
  }
`;

由此反应代码执行：

<Query query={Newss}>
  {({ loading, error, data }) => {
    if (loading) return LoadingNews();
    if (error) return `Error! ${error.message}`;
    return data.newss.map(news => newssToRender(news));
  }}
</Query>

但是它返回错误！因为有一些没有事件的新闻。即使event可能为null，如何有时也允许执行此查询？

非常感谢您的帮助！

伊萨亚

注意：

function newssToRender(news) {
  if (news.event === null) {
    return newssToRenderWithoutEvent(news);
  }
  return (
    <div>
      <News
        title={news.title}
        content={news.content}
        eventid={news.event.id}
        eventTitle={news.event.title}
        pictureSrc={news.picture}
      />
    </div>
  );
}

Answer 1

该错误表明该字段是非空类型，这是GraphQL中的特殊类型，该类型包装了另一种类型。非null字段不能返回null，否则会导致错误。这与声明一个Int然后返回一个String的字段没有什么不同-提供了错误的类型（并且不能强制），因此抛出错误。

模式是用于服务器-客户端通信的契约。如果字段是特定类型，则服务器有效地保证该字段将始终是该类型。这限制了客户端的工作，因为它消除了在客户端上对响应进行类型检查的需要。

不幸的是，您无能为力，因为此类错误表示服务器端代码本身存在问题。如果事件有时为空是有意义的，则应将该字段设为可空。否则，应该修复所有底层代码，以防止该字段返回null。正确的做法是向API的作者提交错误（或者，如果是，请自己修复代码！）。

Answer 2

这确实是一个网关问题：

event: (root, args, context) => context.loaders.event.load(root.event)

替换为：

event: (root, args, context) => root.event ? context.loaders.event.load(root.event) : null,

允许为空值

谢谢你丹尼尔

查询空值返回graphql中的loading.load错误

2 个答案: