RickWong/react-transmit

Render never called in Container

nolawnchairs opened this issue · 0 comments

I'm trying to use server-side rendering for the 'VideoBrowser' component as illustrated below, however, the render() method is never called (none of the console.log() calls within render() print anything to the server console). Everything works as expected on the client side.

I used the same paradigm for the topmost component, and it renders properly on both the server and client side.

In the Transmit.createContainer() method, the API request returns properly, and the output is logged to the console as expected within the Promise.then() implementation... again, the same paradigm was used in the top-most component, and it worked properly.

Any ideas what is wrong? I tried looking at the examples linked from the docs, but the code there is out of date (Router no longer has a run() method), hence not useful.

I'm running a basic development server using Express.

Routing:

            (<IntlProvider locale="en">
                <StaticRouter context={context} location={this.props.requestUri}>
                    <Main>
                        {routes}
                    </Main>
                </StaticRouter>
            </IntlProvider>)

I doubt there is anything wrong with the router hierarchy, since the data is getting fetched from the API in the promise... just that render() is never called.

I am using this Transmit inside another Transmit.createContainer() call in the root component.

class VideoBrowser extends Component {
    render() {
        console.log("Are we here?"); // <-- this only logs client-side, never server-side
        if (!this.props.collectionData)
            return null;
        console.log(this.props.collectionData); // <-- correct data logs only client-side
        return (
            <Container>
                <Title>Videos</Title>
                <Heading>Videos</Heading>
                <Content>
                    <h3>Collections</h3>
                    <VideoCollectionList
                        collections={this.props.collectionData.collections} />
                </Content>
            </Container>
        );      
    }
}

export default Transmit.createContainer(VideoBrowser, {
    initialVariables: {},
    fragments: {
        collectionData() {
            return new ApiRequest()
                .post({ getNew: true, getPopular: true })
                .to("collections/listAll")
                .execute()
                .then(response => {
                    console.log(response.data); // <-- this logs the expected data, BOTH server and client side
                    return response.data
                })
                .catch(error => null);
        }
    }
});