Koşullu fragmanları veya gömülü kök konteynerler Tepki-Yerli Ben <code>react-native</code> ile çalışan <code>relay</code> var

Question

ile Röle kullanarak, ancak bir Navigator ile çalışırken Özellikle, en iyi röle yolları ve kök kapları kullanmak konusunda kafam karıştı Bu, birden çok yol oluşturur. Sonra sorgu oluşturur User fragman talep, benim ana rota olarak

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

:

aşağıdaki sınıf atın.

Sorun, parçanın yalnızca bir kerede görüntüleniyor olsa bile, parçanın hem first hem de second bileşenleri tarafından tanımlanan alanları içereceği olacaktır.

1) renderScene geri aramasında başka Relay.RootContainer dönüş: Ben gereken bu durumda

? Genelde Relay.RootContainers'u birbirinin içine yerleştirmek kötü bir fikir mi?

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

2) Bir parçayı dahil etmek için koşullu değişkenleri kullanın?

initialVariables: { 
    first: true 
}, 

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

Yoksa başka önerileriniz var mı? Böyle

Answer 1

kullanma şey:

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

bu deneyin:

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