递归查询到特定深度答案

【问题标题】：Recursive query to specific depth递归查询到特定深度
【发布时间】：2017-07-03 06:57:15
【问题描述】：

我有一个树结构，我试图查询到特定的深度。我是接力新手，所以不确定我是否以正确的方式进行此操作，或者是否可能。

我的代码目前看起来像这样：

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”变量的值时向下递归。是否继续递归取决于 'expand' 变量。

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

【问题讨论】：

标签： recursion graphql relayjs

【解决方案1】：

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

fragment ViewContent on ViewNode {
  name
}

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

【讨论】：