特定の深さへの再帰的なクエリ

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'変数の値を計算しながら再帰しようとしています。再帰を継続するかどうかは、 'expand' varに基づいています。

現在のところ、これは子のルートと最初のレベルを取得しますが、必要に応じて再帰しません。私がしようとしていることは可能ですか？それが正しい軌道に乗っているのか、これについて完全に間違っているのか？

Answer 1

典型的なパターンは、コンテンツの断片を作成してから、その要素をクエリにネストすることです。例えば。

fragment ViewContent on ViewNode { 
    name 
} 

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