Conditional fragments or embedded root containers when using Relay with React-Native

Question

My relay works with react-native , but I'm confused about how best to use relay routes and root containers, especially when working with Navigator , which displays multiple routes.

Take the following class:

 var Nav = React.createClass({ renderScene(route, nav) { switch(route.id) { case 'first': return <First navigator={nav} /> case 'second': return <Second navigator={nav} /> } }, render() { <Navigator initialRoute={{ id: 'first' }} renderScene={this.renderScene} /> } }) module.exports = Relay.createContainer(Nav, { fragments: { viewer: () => Relay.QL` fragment on User { ${First.getFragment('viewer'}, ${Second.getFragment('viewer'} } ` } }) 

In my parent route, I then request the User fragment that builds the request.

The problem is that the fragment will include those fields that are defined by both the first and second components, even if only one of them is displayed.

In this case, I should:

1) returns another Relay.RootContainer in the renderScene ? Is it a bad idea to embed Relay.RootContainers inside each other?

 renderScene(route, nav) { switch(route.id) { case 'first': return ( <Relay.RootContainer Component={First} route={new FirstRoute()} renderFetched={(data) => { return <First navigator={nav} {...data} /> }} /> ) } } 

2) Use conditional variables to include fragment?

 initialVariables: { first: true }, fragments: { viewer: (variables) => Relay.QL` fragment on User { ${First.getFragment('viewer').if(variables.first) } ` } 

Or are there any other suggestions?

Answer 1

Using something like this: ¹

 function matchRoute(route, map) { return map[route.name] ? map[route.name]() : null; } 

Try the following:

 fragments: { viewer: (variables) => Relay.QL` fragment on User { ${route => matchRoute(route, { FirstRoute: () => First.getFragment('viewer'), SecondRoute: () => Second.getFragment('viewer'), }}, } `, } 

[1]: medium.com/@cpojer/relay-and-routing