I cannot navigate to /users
in my app, because it doesn`t trigger fetching of all queries that I would expect it should.
My app consists of an App
component and some components that contain actual content like Dashboard
or UserList
. There is also an EnsureAuthenticationContainer
but this is just a component that, when a user is authenticated, simply renders it's children. This is my route setup:
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>
The problem is, that both App
and UserList
have defined fragements and it seems that only the query of UserList
is send.
Fragment of App
:
fragments: {
viewer: () => {
return Relay.QL`
fragment on ViewerType {
loggedInUser {
id
}
}
`;
}
}
Fragment of UserList
:
fragments: {
viewer: () => Relay.QL`
fragment on ViewerType {
id,
users(first: $limit) {
edges {
node {
id,
userName,
firstName,
lastName,
eMail
}
}
}
}
`,
}
How can I setup React/Relay/Router to query both users
and loggedInUser
?
Update
I use react-router@3.0.5 and react-router-relay@0.13.7
Update #2
This is the only query Relay generates when I visit "/users" and which is send to the server:
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
}
The response matches the query:
I'm totally not sure but I would have done like this :
fragment of App :
fragments: {
viewer: () => {
return Relay.QL`
fragment on ViewerType {
loggedInUser {
id
}
${UserList.getFragment("viewer")}
}
`;
};
}
I think this example repo is going to be helpful to you : https://github.com/taion/relay-todomvc/blob/master/src/components/TodoApp.js#L60-69