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

Question

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:

What's your output in the "Network" tab (assuming you use Chrome)? Is there just one query or two? Please post the request payload and the response. — Chris, May 02 '17 at 15:32
Yes, there is only one query. I just posted what Relay generates and what is returned from the server. — Michael Hilus, May 02 '17 at 19:34
Why don't you just add `loggedInUser { id }` under your `userList` query? Relay isn't fetching `loggedInUser` because your active component (`UserList`) doesn't ask for it. — Chris, May 04 '17 at 11:13
The `UserList` component does not and should not know anything about logged in user. Even if I add `loggedInUser` to it, `App`, which is intended to display the current user, it still does not get `loggedInUser` injected as prop then. — Michael Hilus, May 05 '17 at 07:50

score 3 · Accepted Answer · answered May 02 '17 at 07:36

3

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

answered May 02 '17 at 07:36

Vincent Taing

2,975
2
16
24

Thanks for your answer. But won't your solution blow up the fragment of App when my application will consists of many more routes besides the UserList? – Michael Hilus May 02 '17 at 07:44
I don't think so because "react-router-relay will automatically generate a combined Relay query config with all queries and parameters from the active React Router routes, then pass down the query results to each of the route components". (https://github.com/relay-tools/react-router-relay#usage) – Vincent Taing May 02 '17 at 07:58
Thanks. I just tried that but navigating to "/" triggered the `users` field to be queries, although the component was not meant to be rendered. – Michael Hilus May 02 '17 at 08:18
Does changing your `queries` prop in your Route `` with `const UsersQueries = { viewer: () => Relay.QL`query { viewer { users } }` };` work ? – Vincent Taing May 02 '17 at 08:25
No, it doesn't change anything. – Michael Hilus May 02 '17 at 08:32
This answer could not help me much in solving the problem, but as you, Vincent, are the only person that really tried to help, the bounty goes to you. ;-) – Michael Hilus May 08 '17 at 20:38

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

1 Answers1