1

コンポーネントで現在フェッチされているデータに基づいて、リレーコンテナでフラグメントを定義する方法を誰かが説明できますか? 次の例を検討してください。

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

1 に答える 1