Multiple requests over different routes.

[nickclaw]

I'm using react-router, and I currently have it set up like this.

// code omitted, App and Entry components defined

let AppContainer = Transmit.createContainer(App, {
    queries: {
        entries: function() {
           // code omitted
        }
    }
});

let EntryContainer = Transmit.createContainer(Entry, {
    queries: {
        entry: function(params) {
            // code omitted
        }
    }
});

let routes = (
    <Route handler={AppContainer} path="/">
        <DefaultRoute name="home" handler={ require('./page/home.jsx') } />
        <Route path="/entry/:entry" name="entry" handler={EntryContainer)} />
    </Route>
);

This setup nicely loads the entries query of the outer container on the server side, but the entry query of the inner route only loads client side, is there a way to do this completely on the backend?

[XeeD]

Hi, I've implemented it and made some notes about the setup: https://gist.github.com/XeeD/23824f4626bd29673a44

You need to manually collect the queries of the RouteHandler and them send them in as props. See this: https://gist.github.com/XeeD/23824f4626bd29673a44#file-app-react-js-L24-L37

Hope it helps :wink:

[RickWong]

@nickclaw Does entries return a Promise? It should loop through the entries with an index, and actually return Promise.all(entries.map(entry => EntryContainer.getQuery("entry", entry)));. This is a requirement for server-side rendering to render the full page.