Combining queries in nested react-router-relay routes

Question

I have a schema with a viewer as topmost root element and all other data under it: the viewer has a list of users and supplies a single user(id). There is no other element in my root query.

My root component has defined following routes:

<Router history={browserHistory} render={applyRouterMiddleware(useRelay)} environment={Relay.Store}>
    <Route path="/" component={App}>
        <IndexRoute component={Dashboard} />
        <Route path="users" component={UserList} queries={ViewerQueries}>
            <Route path=":userId" component={UserDetails} queries={UserQueries} />
        </Route>
    </Route>
</Router>

These are the queries - I don't know how to make UserQueries to be nested within ViewerQueries or if this is even possible:

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

const UserQueries = {
  user: () => Relay.QL`query { user(id: $userId) }`
}

My goal for the UserDetails component is to get its data from

query {
  viewer {
    user(id: "xyz") {
      ...
    }
  }
}

Currently, I get the following error when trying this:

Error: Cannot query field "user" on type "RootQuery".

How do I teach react-router-relay to let UserDetails get it's data from

query { viewer { user(id) } }

and not just from

query { user(id) }?

Combining queries in nested react-router-relay routes

0 Answers0