Relay 拒绝递归获取连接。可在 Relay playground 上重现

Question

再次尝试解决与此处相同的问题 https://github.com/facebook/relay/issues/1243。但是这次我让它可以在 Relay playground 上重现。

想法是当用户将鼠标悬停在父类别上时递归地获取数据。

我提出了两个要点。一个与模式有关，第二个与应用程序有关。只需将它们复制并粘贴到操场上，将鼠标悬停在 catName2 上，您就会收到错误消息。

架构https://gist.github.com/GrigoryPtashko/d110b72076a4611657d5364109ba5905。

应用程序 https://gist.github.com/GrigoryPtashko/c27d6421f1f02c78dc054b2874b4ac87。

问题是当包含内部片段并从中继获取数据时 "rejects" 从后端返回的数据。

当我写第一期的时候，我认为这是我的 graphql 后端的问题（它不是在 JS 中）。但是现在我让它在没有后端的情况下也可以重现。

在我看来这是 none bug 越少。

谢谢。

PS 这是粘贴到 relay playgroud

中的架构和应用程序

Answer 1

您遇到的异常是 Cannot read property 'map' of undefined。这是因为这里传入的 categories prop 是未定义的：

<CategoryItemSubcategoryListContainer 
  categories={this.props.category.categories}
  key={this.props.category.id}
/>

问题是您期望 categories 道具在 Relay 提供给 CategoryItem 的数据上具体化。看看 CategoryItem 的片段……

fragments: {
  category: variables => Relay.QL`
    fragment on Category {
      id
      name
      ${CategoryItemSubcategoryListContainer
        .getFragment('categories')
        .if(variables.expanded)
      }
    }
  `,
},

可以看到categories已经找不到了。它肯定是通过 CategoryItemSubcategoryListContainer.getFragment(…) 包含的，但是由于 CategoryItem 没有明确地获取它，Relay 将该数据屏蔽在它的 props 之外。

解决方案是：

将 this.props.category 传递给 CategoryItemSubcategoryListContainer
将连接调用 categories(first: …) 移动到 CategoryItem

这是一个 link 实现选项一的工作游乐场：facebook.github.io/relay/prototyping/playground.html#source=...

Relay 拒绝递归获取连接。可在 Relay playground 上重现

Recursive fetching of a connection is rejected by Relay. Reproducible on the Relay playground

recursion

relayjs