relayjs - 根据获取的数据定义片段

Question

谁能解释我如何根据当前在组件中获取的数据在 Relay 容器上定义片段？考虑这个例子：

const TreeNodeContainer = Relay.createContainer(TreeNode, {
  fragments: {
    node: (variables) => Relay.QL`
      fragment on TreeNode {
        id,
        expanded,
        title,
        children(first: 1000) @include(if: $expanded) {
          edges {
            node {
              id,
              ${TreeNodeContainer.getFragment('node').if('how I can get component props or "expanded" value here?')}
            }
          }
        }
      }
    `,
  },
});

TreeNode 组件很简单——它具有改变服务器上“扩展”字段的突变。

class TreeNode extends React.Component {

  handleClick() {
    Relay.Store.update(new ExpandNodeMutation({node: this.props.node}));
  }

  render() {
    var node = this.props.node;
    var variables = this.props.relay.variables;
    return (
      <div className="node">
        <div className="title" onClick={this.handleClick.bind(this)}>  {node.title}</div>
        <div className="children" style={{paddingLeft: 20}}>
          {node.expanded && node.children && node.children.edges.map((edge)=> {
            return <TreeNodeContainer node={edge.node} key={edge.node.id}/>
          })}
        </div>
      </div>
    )
  }
}

Answer 1

使用.if(variables.expanded)：

const TreeNodeContainer = Relay.createContainer(TreeNode, {
  fragments: {
    node: variables => Relay.QL`
      fragment on TreeNode {
        # ...
        children(first: 1000) @include(if: $expanded) {
          # ...
            ${TreeNodeContainer.getFragment('node').if(variables.expanded)}