中继：如何合并而不是覆盖嵌套路由中的查询？

Question

我无法在我的应用程序中导航到 /users，因为它不会触发提取我期望的所有查询。

我的应用程序由一个 App 组件和一些包含 Dashboard 或 UserList 等实际内容的组件组成。还有一个 EnsureAuthenticationContainer 但这只是一个组件，当用户通过身份验证时，它只呈现 children。这是我的路线设置：

const ViewerQueries = {
    viewer: () => Relay.QL`query { viewer }`
};

[...]

<Router history={browserHistory} render={applyRouterMiddleware(useRelay.default)} environment={Relay.Store}>
    <Route path="/" component={App} queries={ViewerQueries}>
        <Route path="login" component={Login} />
        <Route component={EnsureAuthenticationContainer}>
            <IndexRoute component={Dashboard} />
            <Route path="users" component={UserList} queries={ViewerQueries} />
            <many more routes />
        </Route>
    </Route>
</Router>

问题是，App和UserList都定义了碎片，似乎只有UserList的查询被发送了。

App 的片段：

fragments: {
    viewer: () => {
        return Relay.QL`
            fragment on ViewerType {
                loggedInUser {
                    id
                }
            }
       `;
    }
}

UserList 的片段：

fragments: {
    viewer: () => Relay.QL`
        fragment on ViewerType {
            id,
            users(first: $limit) {
                edges {
                    node {
                        id,
                        userName,
                        firstName,
                        lastName,
                        eMail
                    }
                }
            }
        }
    `,
}

如何设置 React/Relay/Router 以同时查询 users 和 loggedInUser？

更新

我使用 react-router@3.0.5 和 react-router-relay@0.13.7

更新#2

这是我访问“/users”时中继生成的唯一查询，它被发送到服务器：

query Index {
  viewer {
    id,
    ...F0
  }
}
fragment F0 on ViewerType {
  _users2quBPZ:users(first:100) {
    edges {
      node {
        id,
        userName,
        firstName,
        lastName,
        eMail
      },
      cursor
    },
    pageInfo {
      hasNextPage,
      hasPreviousPage
    }
  },
  id
}

响应与查询匹配：

Answer 1

我完全不确定，但我会这样做：

应用片段：

fragments: {
  viewer: () => {
    return Relay.QL`
      fragment on ViewerType {
        loggedInUser {
          id
        }
        ${UserList.getFragment("viewer")}
      }
    `;
  };
}

我认为这个示例 repo 会对您有所帮助：https://github.com/taion/relay-todomvc/blob/master/src/components/TodoApp.js#L60-69

中继：如何合并而不是覆盖嵌套路由中的查询？

Relay: How to merge instead of override queries in nested routes?

javascript

reactjs

graphql-js

relayjs

react-router-relay