Одностраничные переменные общего доступа к приложениям

Question

В настоящее время я экспериментирую с одностраничной реализацией приложения, которая состоит из компонента Layout и обменивает многочисленные компоненты Page, вложенные внутри. Контейнеры Relay в Layout и многочисленные страницы разделяют переменные (в этом примере $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')}
        }
      }
    `
  }
});

Answer 1

Вам необходимо использовать пакетный сетевой уровень. Посмотрите либо уровень response-relay-network-layer, либо мой форк уровня стандартной сети (который также требует моего форка express-graphql).