将 Relay 与 React-Native 结合使用时的条件片段或嵌入式根容器

Question

我已经 relay 使用 react-native，但我对如何最好地利用中继路由和根容器感到困惑，尤其是在使用 Navigator 呈现时多条路线。

采取以下class：

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

然后在我的父路由中请求构建查询的 User 片段。

问题在于该片段将包含由 first 和 second 组件定义的那些字段，即使一次只显示其中一个。

在这种情况下我应该：

1) return renderScene 回调中的另一个 Relay.RootContainer？将 Relay.RootContainers 嵌入彼此通常是个坏主意吗？

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

2) 使用条件变量包含片段？

initialVariables: {
  first: true
},

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

或者有其他建议吗？

Answer 1

使用这样的东西：¹

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

试试这个：

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

将 Relay 与 React-Native 结合使用时的条件片段或嵌入式根容器

Conditional fragments or embedded root-containers when using Relay with React-Native

react-native

relayjs