javascriptreactjsgraphql-jsrelayjsreact-router-relay

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


Solution

  • 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