reactjsreact-routerrelayjsreact-router-relay

React relay+router does not collapse queries of nested routes

I read on the react-router-relay that:

react-router-relay will automatically generate a combined Relay route with all queries and parameters from the active React Router routes, then pass down the query results to each of the route components. As the queries are all gathered onto a single route, they'll all be fetched at the same time, and the data for your entire page will load and then render in one go.

But in my app I actually see two separate calls to /graphql. Here's my code:

<Route path="site_:siteId" component={AppSkeleton} queries={SiteAccountQueries}>
    <Route path="mySites" component={Sites} queries={SiteAccountQueries} />
</Route>

The first call fetches the data for AppSkeleton, and the second for Sites. Wasn't it supposed to collapse them all into one single call? What am I doing wrong?

Solution

  • The documentation doesn't say they get merged into a single call. Your queries get combined into a single route, and all queries are made simultaneously, but the mapping of query to network request is a concern of the network layer.

    It is in fact the case that the default Relay network layer will issue a separate HTTP request for every query in a given route; this will happen regardless of whether you're using react-router-relay or whether you just happen to have a route with more than one query.