Nested containers (with getFragment) prevents server from rendering

kulikalov

Routes: ``` <Router> <Route path="/" component={RootComponent}> <IndexRoute component={Main} /> </Route> </Router> ``` `Template` component Transmit container: ``` const RootComponent = Transmit.createContainer(Template, { initialVariables: {}, fragments: { data: (data) => { return Promise.all([ Main.getFragment('story', {data}), // Node.getFragment('data', {data}) ]) .then((a) => { console.log('a', a) return a }) }, } }) ``` `Main` component Transmit container: ``` export default Transmit.createContainer(Main, { initialVariables: { some: 1 }, fragments: { story: (data) => { return new Promise(resolve => { return resolve({data}) }) }, } }) ``` If any other container (`Main`) besides the root one (`Template`) is wrapped into Transmit container this way, then ``` Transmit.renderToString(ReactRouter.RouterContext, renderProps).then(({reactString, reactData}) => { ``` `reactString` is equal to this: `` Server-side rendering is not happening, only client side. I've added some logs into containers and found that server correctly runs them: in the example above dataflow goes successfully till `console.log('a', a)`. If only `Template` has container and i don't call `getFragment`, server renders everything ok. What am I doing wrong?

Comments

RickWong

You're doing nothing wrong. It's a shortcoming in Transmit. Work around it by using only 1 root container, and resolving everything from that root's queries.

kulikalov

Thank you! In this case could you advice the best way to pass the router params into the `RootComponent`'s Transmit container? I've checked source code of transmit and seems right now you don't pass props during fragments fetching.