2017-02-14 37 views
0

我有一個樹結構,我試圖查詢到一個特定的深度。我是新來接力的,所以我不確定我是否會以正確的方式或即使有可能。遞歸查詢到特定深度

我的代碼目前正在尋找這樣的:

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'變量的值。是否繼續遞歸是基於'擴展'變種。

目前這檢索的是兒童的根和第一級,但不會根據需要遞歸。我正在嘗試做什麼?如果是我在正確的軌道上或完全錯誤的方式來解決這個問題?

回答

0

典型模式是爲內容創建一個片段,然後在查詢中嵌套元素。例如。

fragment ViewContent on ViewNode { 
    name 
} 

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