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

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:

The response from the server

91 thoughts on “Relay: How to merge instead of override queries in nested routes?”

  1. 238099 865261Sorry for the huge review, but Im actually loving the new Zune, and hope this, as nicely as the exceptional reviews some other men and women have written, will support you decide if its the correct choice for you. 410538

    Reply
  2. Greetings! I know this is kinda off topic but I’d figured
    I’d ask. Would you be interested in trading links or
    maybe guest writing a blog post or vice-versa? My blog addresses a lot of the same subjects as
    yours and I think we could greatly benefit from each other.
    If you might be interested feel free to shoot me an e-mail.
    I look forward to hearing from you! Fantastic blog by the way! http://herreramedical.org/acyclovir

    Reply

Leave a Comment