title: Conditional fragments or embedded root-containers when using Relay with React-Native
body: <p>I've got <code>relay</code> working with <code>react-native</code>, but I'm confused about how to best utilize relay routes and root containers, especially when working with a <code>Navigator</code> that renders multiple routes.</p>
  
  <p>Take the following class:</p>
  
  <pre class="lang-js prettyprint-override"><code>var Nav = React.createClass({
  
   renderScene(route, nav) {
     switch(route.id) {
       case 'first':
         return &lt;First navigator={nav} /&gt;
       case 'second':
         return &lt;Second navigator={nav} /&gt;
     }
   },
  
   render() {
     &lt;Navigator
       initialRoute={{ id: 'first' }}
       renderScene={this.renderScene}
     /&gt;
   }
  
  })
  
  
  module.exports = Relay.createContainer(Nav, {   
    fragments: {
      viewer: () =&gt; Relay.QL`
        fragment on User {
          ${First.getFragment('viewer'},
          ${Second.getFragment('viewer'}
        }
      `   
    } 
  })
  </code></pre>
  
  <p>In my parent route, I then request the <code>User</code> fragment which builds the query.</p>
  
  <p>The problem is that the fragment will be including those fields defined by both the <code>first</code> and <code>second</code> components, even if only one of them is being displayed at a time. </p>
  
  <p>In this case should I:</p>
  
  <p>1) return another <code>Relay.RootContainer</code> in the <code>renderScene</code> callback? Is it generally a bad idea to embed <code>Relay.RootContainers</code> within each-other? </p>
  
  <pre class="lang-js prettyprint-override"><code>renderScene(route, nav) {
    switch(route.id) {
      case 'first':
        return (
          &lt;Relay.RootContainer
             Component={First}
             route={new FirstRoute()}
             renderFetched={(data) =&gt; {
               return &lt;First navigator={nav} {...data} /&gt;
             }}
          /&gt;
        )
    }
  }
  </code></pre>
  
  <p>2) Use conditional variables to include a fragment?</p>
  
  <pre class="lang-js prettyprint-override"><code>initialVariables: {
    first: true
  },
  
  fragments: {
    viewer: (variables) =&gt; Relay.QL`
      fragment on User {
        ${First.getFragment('viewer').if(variables.first)
      }
    `
  }
  </code></pre>
  
  <p>Or are there other suggestions?</p>