How to pass variables between relay containers

Question

I am looking for good syntax to pass a variable from a parent container to a child container.

Say I have these routes, with a global list of widgets on / and specific lists of widgets on /widgets/:WidgetListID .

Note. I am using relay-router-relay

 <Route path='/' component={Layout} > <IndexRoute component={WidgetListContainer} queries={ViewerQueries} /> <Route path='/widgets/:WidgetListID' component={WidgetListContainer} queries={ViewerQueries} /> </Route> 

This is the same <WidgetList/> component displayed inside the <WidgetListContainer/> inside <Layout/> , and this is how I try to pass the WidgetListID variable:

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 } } } } `, }, }) 

I have no problem setting the WidgetListID variable directly inside the WidgetList relay container, it works fine, but as soon as I try to transfer it from the WidgetListContainer relay container, I have an empty data object {__dataID__: "VXNlcjo="} . Although the variable is well printed in my getWidget () function. So something is not working at some point, but I can’t understand what?

What would be the good syntax for passing the WidgetListID variable from the parent container to the child container?

Answer 1

In the WidgetListContainer change this:

 fragments: { viewer: ($WidgetListID) => Relay.QL` fragment on User { ${WidgetList.getFragment('viewer', $WidgetListID)} } `, }, 

to

 fragments: { viewer: ({WidgetListID}) => Relay.QL` fragment on User { ${WidgetList.getFragment('viewer', {WidgetListID})} } `, }, 

The first argument to the fragment creator is Relay variables . Therefore, first you need to derive the WidgetListID variable from the WidgetListID variables, and then you can pass it to WidgetList.getFragment() .

Note that the $ character is only used inside the Relay.QL template Relay.QL . Inside the variable object, you are referencing a variable by name without $ .

Answer 2

Hi, I also worked a little with this. Change this:

  class WidgetListContainer extends React.Component { render () { return ( <div> ... <WidgetList viewer={viewer} /> </div> ) } } 

:

 class WidgetListContainer extends React.Component { render () { return ( <div> ... <WidgetList WidgetListID={this.props.relay.variables.WidgetListID} viewer={viewer} /> </div> ) } } 

also in your WidgetList component relay container, do not forget to set the initial variables in initialVariables: {WidgetListID: null}, this setting will make your WidgetListID variable available for your WidgetList component relay container.