私は現在、Layout コンポーネントで構成され、内部にネストされた多数の Page コンポーネントを交換する単一ページ アプリケーションの実装を試しています。レイアウト上のリレー コンテナーと多数のページ$groupId
は、フラグメント内のクエリをフィルター処理するために使用される変数 (この例では ) を共有します。
問題は、現在の実装では、アクティブなルートごとに 1 つではなく 2 つのリクエストがディスパッチされることです。私はこれに間違ったアプローチをしているかもしれませんが、リクエストを組み合わせたり、アプリケーションを構造化して、setVariable({groupId: ... })
両方のコンポーネントで変数を個別に設定するのではなく、1 つだけ発行すると両方のコンポーネントが更新されるようにするにはどうすればよいでしょうか。
ルート構成
<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')}
}
}
`
}
});