Relay.js 错误：repeat() 参数必须大于或等于 0 且不是无穷大

Question

不知道我在这里做错了什么。我的中继查询似乎组成正确（即我可以验证查询是否成功返回预期的结果）但是当应用程序在浏览器中呈现时我收到Error: repeat() argument must be greater than or equal to 0 and not be infinity 的错误。

应用程序一直很好，直到我添加了分页结果的片段 (edge + node)：

const ConversationContainer = Relay.createContainer(Conversation, {
  fragments: {
    conversation: () => Relay.QL`fragment on Conversation {
      id
      fingerprint
      unreadCount
      messages(first: 3) {
        pageInfo {
          hasNextPage
        }
        edges {
          node {
            body
          },
          cursor
        },
      }
    }`
  }
})

和演示组件：

class Conversation extends Component {
  render() {
    const { id, fingerprint, unreadCount, messages } = this.props.conversation;
    return <div>
      <div>conversation <code>{id}</code></div>
      <div>fingerprint: <code>{fingerprint}</code>, unreadCount: {unreadCount}</div>
      <pre>{JSON.stringify(messages, null, 2)}</pre>
    </div>;
  }
}

那么错误的原因是什么？

编辑：错误出现在 UI 中，由我的根组件的 renderFailure 属性呈现（也作为控制台中的警告）

const root = <Relay.RootContainer
  Component={AppContainer}
  route={new AppRoute()}
  renderLoading={() => <div>Loading...</div>}
  renderFailure={(error, retry) => <div>Error: {error.message}</div>}
/>;

Answer 1

我能想到的两件事：

中继网络层

这可能与您的 GraphQL 服务器有关，而不是中继。

看看 Relay 源代码中的这一行： https://github.com/facebook/relay/blob/a1a4d99cb698e1eed63d28f8291ef114115d515d/src/network-layer/default/RelayDefaultNetworkLayer.js#L193

我知道这很奇怪，但是您的服务器是否会返回带有负列值的错误？

getBabelRelayPlugin

https://github.com/facebook/relay/blob/00de34d32d51ba9e4d17e45280ad6d7e2734c6ed/scripts/babel-relay-plugin/src/getBabelRelayPlugin.js#L155

再次与错误有关，但这次是客户端架构验证。尽管您似乎说您的查询运行良好，但这意味着您的架构是有效的。

你能告诉我们 GraphQL 服务器返回什么吗？