Conditional Fragmente oder eingebettete root-Container beim Relais mit React-india

Question

ich habe relay mit react-native arbeiten, aber ich bin verwirrt darüber, wie man am besten Relaisstrecken und Wurzelbehältern, insbesondere nutzen, wenn sie mit einem Navigator Arbeits Das rendert mehrere Routen.

Nehmen Sie die folgende Klasse:

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 meinen Eltern Weg bitte ich dann das User-Fragment, das die Abfrage aufbaut.

Das Problem besteht darin, dass das Fragment die von den Komponenten first und second definierten Felder enthält, auch wenn nur jeweils eines von ihnen angezeigt wird.

In diesem Fall sollte ich:

1) eine andere Relay.RootContainer im renderScene Rückruf zurückkehren? Ist es generell eine schlechte Idee, Relay.RootContainers ineinander einzubetten?

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

2) Bedingte Variablen verwenden, um ein Fragment einzufügen?

initialVariables: { 
    first: true 
}, 

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

Oder gibt es andere Vorschläge?

Answer 1

Mit so etwas wie folgt aus:

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

Try this:

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