Рекурсивный запрос к определенной глубине

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 
     } 
     } 
    } 
    } 
}