Single-Page App Sharing Relay Variables

Question

I'm currently experimenting with a single page application implementation that consists of a Layout component and swapping numerous Page components nested inside. The Relay containers on the Layout and numerous Pages share variables (in this example, $groupId) that are used to filter queries in their fragments.

The problem is that the current implementation dispatches two requests for each active route instead of just one. I may be approaching this wrong but how can I combine the requests or structure the application so issuing only one setVariable({groupId: ... }) will update both components instead of having to set the variables on both components separately.

Route Configuration

<Route path="/" component={Layout} queries={ViewerQuery} render=  {renderer(Layout)}>
  <IndexRoute component={DashboardPage} queries={ViewerQuery}/>
  ...
</Route>

Viewer Query

export default {
  viewer: (Component, variables) => Relay.QL`query { 
    viewer {
      ${Component.getFragment("viewer", variables)}
    }
  } 
  `
};

Layout

export default Relay.createContainer(Layout, {
  initialVariables: {
    groupId: null
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        username
        group(id: $groupId) {
          description
        }
      }
    `
  }
});

Dashboard Page

export default Relay.createContainer(DashboardPage, {
  initialVariables: {
    groupId: null
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        group(id: $groupId) {
          ${SubComponent.getFragment('data')}
        }
      }
    `
  }
});

Answer 1

You need to use a batching network layer. See either react-relay-network-layer or my fork of the stock network layer (which requires my express-graphql fork as well).