0

私は現在、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')}
        }
      }
    `
  }
});
4

1 に答える 1