特定深度的递归查询

Question

我有一个树形结构，我试图查询一个特定的深度。我是一个新的接力者，所以我不确定我是不是在用正确的方式或者甚至是不是可能的。

我的代码目前是这样的：

class TreeRoot extends React.Component {
  render() {
    var container = this.props.treeRoot;
    return (
      <div>
        <ViewNode viewNode={container.root} maxDepth={10} expand={true}/>
      </div>
    );
  }
} 

class ViewNode extends React.Component {

   render() {
      var vn = this.props.viewNode;
      return (
       <div>
        <div>{vn.type} {vn.widget} {vn.mode}</div>
         <ViewNodeList viewNode={vn} maxDepth={this.props.maxDepth-1}/>
       </div>
      );
  }
}

ViewNode = Relay.createContainer(ViewNode, {
    initialVariables:{
        maxDepth:1,
        expand:false
    },
    fragments: {
      viewNode: (variables) => Relay.QL`
        fragment on ViewNode{
          id
          type
          widget
          mode
          viewNodes @include(if: $expand){
            ${ViewNode.getFragment("viewNode", {maxDepth:(variables.maxDepth -1),expand:(variables.maxDepth > 0)}).if(variables.expand)}
        }
    }`,
  }
});

class ViewNodeList extends React.Component {
  render() {
    const vn = this.props.viewNode;
    if (!vn.viewNodes){
      return (<div></div>);
    }
    return (
      <div>
        {vn.viewNodes.map((el, i)=> {
          return <ViewNode key={i} viewNode={el} maxDepth={this.props.maxDepth} expand={this.props.maxDepth > 0}></ViewNode>
        })
        }
      </div>
    );
  };
}

TreeRoot = Relay.createContainer(TreeRoot, {
    fragments: {
      root: () => Relay.QL`
          fragment on TreeRoot{
              id
              name
              root{
                  ${ViewNode.getFragment('viewNode',{maxDepth:10,expand:true})}
              }
           }
       `,
    }
  }
);

重要的一点是我试图控制ViewNode组件的viewNode片段中的递归。它试图在递减'maxDepth‘变量并使用'maxDepth’计算'expand‘变量的值时向下递归。是否继续递归取决于“扩展”变量。

目前，这将检索根和第一级子对象，但不会按预期递归。我想要做的事情是可能的吗？如果是这样，我是在正确的轨道上还是以完全错误的方式进行呢？

Answer 1

典型的模式是为内容创建一个片段，然后在查询中嵌套元素。例如。

fragment ViewContent on ViewNode {
  name
}

query ViewQuery {
  root {
    viewNode {
      ...ViewContent
      viewNode {
        ...ViewContent
        viewNode {
           ...ViewContent
        }
      }
    }
  }
}