react-native - modern - relay vs apollo

Fragmentos condicionales o contenedores raíz incrustados al usar Relé con React-Native

Question

Tengo el relay trabajando con react-native , pero estoy confundido acerca de cómo utilizar mejor las rutas de retransmisión y los contenedores raíz, especialmente cuando se trabaja con un Navigator que renderiza múltiples rutas.

Toma la siguiente clase:

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

En mi ruta principal, solicito el fragmento de User que crea la consulta.

El problema es que el fragmento incluirá los campos definidos por el first y el second componente, incluso si solo se muestra uno a la vez.

En este caso, debería:

1) devuelve otro Relay.RootContainer en la renderScene llamada renderScene ? ¿En general es una mala idea incorporar Relay.RootContainers dentro de cada uno?

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

2) ¿Usa variables condicionales para incluir un fragmento?

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

¿O hay otras sugerencias?

Answer 1

Usando algo como esto: ¹

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

Prueba esto:

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