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