frammenti condizionali o radice contenitori incorporati quando si utilizza Relè con React-Native

Question

Ho relay lavorare con react-native, ma sono confuso su come utilizzare al meglio le rotte di relè e contenitori di root, soprattutto quando si lavora con un Navigator che rende più percorsi.

Prendere la seguente classe:

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

Nel mio percorso genitore, quindi richiedere l'User frammento che costruisce la query.

Il problema è che il frammento includerà quei campi definiti da entrambi i componenti first e second, anche se solo uno di essi viene visualizzato alla volta.

In questo caso dovrei:

1) tornare un'altra Relay.RootContainer nel renderScene richiamata? È generalmente una cattiva idea incorporare Relay.RootContainers l'uno nell'altro?

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

2) Utilizzare le variabili condizionali per includere un frammento?

initialVariables: { 
    first: true 
}, 

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

Oppure ci sono altri suggerimenti?

Answer 1

Usando qualcosa di simile:

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

Prova questa:

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