我能否从中继查询结果中提取深嵌套节点？

Question

我的目标是将来自同一个arrays的多个嵌套的兄弟级edges合并到一个render调用中。

后端数据通过Relay容器(也使用react-router-relay)传递。

我有一个组件层次结构，它显示来自几个不同Tags的多个Users。顶级查询如下所示：

getUserGroup(id: 'abc') {
  users {
    edges { // array of arrays objects with nested arrays
      node {
        Tags {
          edges { // array of objects with target items
            node {
              tagName // target item
              id
            }
          }
        }
      }
    }
  }
}

这样的结果(以完全扁平的形式)：

  results = [['tagname1', 'tagname2'], [tagname3, tagname4]]

目前，我在每个node Type的Component中呈现一个层次结构，即Tagmenu -> UserTagGroup -> TagItems (代码位于本文的底部)。

这将由User对所有标记进行分组，最终呈现如下列表：

User 1:
  - Tag 1
  - Tag 2
User 2:
  - Tag 3
  - Tag 4

我想要实现的是一个render，在第二层，即像TagMenu -> TagItems这样的层次结构中，所有Users的标记都混合在一起来呈现：

User Tags
  - Tag 1
  ...
  - Tag 4

到目前为止，我可以管理的唯一方法是手动从顶级Relay容器结果中提取和组合所有数组，其结果如下(伪代码)：

for each array in users.edges:
  for each array in node.Tags.edges:
    return node.tagName

这似乎是不对的，原因有两个：

1. 把它打包到render()函数中有点麻烦，
2. 还不清楚是否有可能是 in Relay

..。但这显然是可行的。

我的问题是：Relay是如何做到这一点的？考虑到库是如何自然地导致组件组合的，我无法想象在更高的级别上提取深度嵌套的结果并手动调整它们是最优的。以下是我的组件：

// TagsMenu component, top level
class TagsMenu extends Component {
  render() {
    return (
      <div>
        {
          this.props.userGroup.users.edges.map(u => {
            return <UserTagGroup user={u.node} />
          })
        }
      </div>
    )
  }
}

fragment on UserGroup {
  users(first: 1000) {
    edges {
      node {
        ${UserTagGroup.getFragment('user')}
      }
    }
  }
}


// UserTagGroup, second component
class UserTagGroup extends Component {
  render() {
    return (
      <div>
        <h4>User:  {this.props.user.id}</h4>
        {
          this.props.user.Tags.edges.map(t => {
            return <TagMenuItem tag={t.node} />
          })
        }
      </div>
    )
  }
}
fragment on User {
  id
  listingTags(first: 1000) {
    edges {
      node {
        ${TagMenuItem.getFragment('tag')}
      }
    }
  }
}


// TagMenuItem, bottom level component. Renders 1 Tag.
class TagMenuItem extends Component {
  render() {
    return (
      <div>
        {this.props.tag.tagName}
      </div>
    )
  }
}
fragment on Tag {
  tagName
  id
}

Answer 1

但是，您所描述的“手动从顶级中继容器中提取和组合所有数组”似乎是可行的。

如果问题在于在render()方法中有这个函数，我建议您使用状态和方法componentWillReceiveProps()的组合。目标是只有当this.props.users真正改变时才重新计算扁平的列表。

沿着这些路线的东西：

class MyRootContainer extends Component {

  constructor(props) {
    super(props);

    this.state = {
      flattenedList: this.computeFlattenedListFromProps(this.props),
    };
  }

  componentWillReceiveProps(props) {
    if (this.props.users !== props.users) {
      this.setState({
        flattenedList: this.computeFlattenedListFromProps(props),
      });
    }
  }

  computeFlattenedListFromProps(props) {
    // Compute and return flattened list
  }

  render() {
    ...
  }
}