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

Question

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

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

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

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

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

问题是当包含内部片段并获取数据时，中继“拒绝”从后端返回的数据。

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

在我看来这仍然是一个错误。

谢谢。

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 中屏蔽掉这些数据。

解决办法是：

1. 将this.props.category 传递给CategoryItemSubcategoryListContainer
2. 将连接调用categories(first: …) 上移至CategoryItem

这是一个实现选项一的工作 Playground 的链接：facebook.github.io/relay/prototyping/playground.html#source=...