我目前正在试验一个单页应用程序实现，它由一个布局组件和交换嵌套在里面的许多页面组件组成。Layout 上的 Relay 容器和许多 Pages 共享变量（在本例中为$groupId），这些变量用于过滤其片段中的查询。
问题是当前的实现为每个活动路由分配了两个请求，而不仅仅是一个。我可能正在接近这个错误，但是我如何组合请求或构建应用程序，以便只发布一个setVariable({groupId: ... })将更新两个组件，而不必分别在两个组件上设置变量。
路由配置
<Route path="/" component={Layout} queries={ViewerQuery} render= {renderer(Layout)}>
<IndexRoute component={DashboardPage} queries={ViewerQuery}/>
...
</Route>
观众查询
export default {
viewer: (Component, variables) => Relay.QL`query {
viewer {
${Component.getFragment("viewer", variables)}
}
}
`
};
布局
export default Relay.createContainer(Layout, {
initialVariables: {
groupId: null
},
fragments: {
viewer: () => Relay.QL`
fragment on User {
username
group(id: $groupId) {
description
}
}
`
}
});
仪表板页面
export default Relay.createContainer(DashboardPage, {
initialVariables: {
groupId: null
},
fragments: {
viewer: () => Relay.QL`
fragment on User {
group(id: $groupId) {
${SubComponent.getFragment('data')}
}
}
`
}
});