コンポーネントで現在フェッチされているデータに基づいて、リレーコンテナでフラグメントを定義する方法を誰かが説明できますか? 次の例を検討してください。
const TreeNodeContainer = Relay.createContainer(TreeNode, {
fragments: {
node: (variables) => Relay.QL`
fragment on TreeNode {
id,
expanded,
title,
children(first: 1000) @include(if: $expanded) {
edges {
node {
id,
${TreeNodeContainer.getFragment('node').if('how I can get component props or "expanded" value here?')}
}
}
}
}
`,
},
});
TreeNode コンポーネントは非常に単純です。サーバーの「拡張」フィールドを変更する突然変異があります。
class TreeNode extends React.Component {
handleClick() {
Relay.Store.update(new ExpandNodeMutation({node: this.props.node}));
}
render() {
var node = this.props.node;
var variables = this.props.relay.variables;
return (
<div className="node">
<div className="title" onClick={this.handleClick.bind(this)}> {node.title}</div>
<div className="children" style={{paddingLeft: 20}}>
{node.expanded && node.children && node.children.edges.map((edge)=> {
return <TreeNodeContainer node={edge.node} key={edge.node.id}/>
})}
</div>
</div>
)
}
}