親コンテナーから子コンテナーに変数を渡すための適切な構文を探しています。
/
グローバルウィジェットリストがオンで、特定のウィジェットリストがオンのこれらのルートがあるとしましょう/widgets/:WidgetListID
。
注:react-router-relayを使用しています
<Route
path='/' component={Layout}
>
<IndexRoute
component={WidgetListContainer}
queries={ViewerQueries}
/>
<Route
path='/widgets/:WidgetListID'
component={WidgetListContainer}
queries={ViewerQueries}
/>
</Route>
これは同じコンポーネントで、内部<WidgetList/>
でレンダリングされます。変数を渡す方法は次のとおりです。<WidgetListContainer/>
<Layout/>
WidgetListID
Layout.js
class Layout extends React.Component {
render() {
return (
<div>
...
{children}
...
</div>
);
}
}
WidgetListContainer.js
class WidgetListContainer extends React.Component {
render () {
return (
<div>
...
<WidgetList
viewer={viewer}
/>
</div>
)
}
}
export default Relay.createContainer(WidgetListContainer, {
initialVariables: {
WidgetListID: null
},
fragments: {
viewer: ($WidgetListID) => Relay.QL`
fragment on User {
${WidgetList.getFragment('viewer', $WidgetListID)}
}
`,
},
})
WidgetList.js
class WidgetList extends React.Component {
render () {
return (
<div>
<ul>
{viewer.widgets.edges.map(edge =>
<li key={edge.node.id}>{edge.node.widget.name}</li>
)}
</ul>
</div>
)
}
}
export default Relay.createContainer(WidgetList, {
initialVariables: {
WidgetListID: null
},
fragments: {
viewer: () => Relay.QL`
fragment on User {
widgets(first: 10, WidgetListID:$WidgetListID) {
edges {
node {
id,
name
}
}
}
}
`,
},
})
変数を WidgetList リレー コンテナー内に直接設定しても問題ありません。問題なくWidgetListID
動作しますが、WidgetListContainer リレー コンテナーから変数を渡そうとするとすぐに、空のデータ オブジェクトが作成されます{__dataID__: "VXNlcjo="}
。ただし、変数は getWidget() 関数で適切に出力されます。それで、ある時点で何かがうまくいかないのですが、何がわかりませんか?
WidgetListID
親コンテナーから子コンテナーに変数を渡すには、どの構文が適切でしょうか?