单页应用程序共享中继变量

Question

我目前正在尝试单页面应用程序实现，该实现由布局组件组成，并交换嵌套在其中的众多页面组件。布局上的中继容器和众多页面共享变量（在此示例中为<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="input1" type="text" value="" placeholder="Search.. ." /> <p id="etext">England</p>），用于过滤其片段中的查询。

问题是当前实现为每个活动路由调度两个请求而不是一个。我可能正在接近这个错误，但我如何组合请求或构造应用程序，因此只发出一个$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
        }
      }
    `
  }
});

Answer 1

您需要使用批处理网络层。请参阅react-relay-network-layer或my fork of the stock network layer（也需要my express-graphql fork）。