mảnh vỡ có điều kiện hoặc nhúng rễ container khi sử dụng Relay Phản ứng-Native

Question

Tôi đã có relay làm việc với react-native, nhưng tôi là nhầm lẫn về làm thế nào để tận dụng tốt nhất các tuyến đường tiếp sức và container gốc, đặc biệt là khi làm việc với một Navigator hiển thị nhiều tuyến đường.

Lấy lớp sau đây:

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

Trong lộ trình của bố mẹ tôi, sau đó tôi yêu cầu các mảnh User đó xây dựng các truy vấn.

Vấn đề là đoạn sẽ bao gồm các trường được xác định bởi cả hai thành phần first và second, ngay cả khi chỉ một trong số chúng được hiển thị cùng một lúc.

Trong trường hợp này nên I:

1) trả về một Relay.RootContainer trong renderScene gọi lại? Có thường là ý tưởng tồi khi nhúng Relay.RootContainers trong mỗi khác không?

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

2) Sử dụng biến có điều kiện để bao gồm một đoạn?

initialVariables: { 
    first: true 
}, 

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

Hoặc có đề xuất nào khác không?

Answer 1

Sử dụng một cái gì đó như thế này:

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

Hãy thử điều này:

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