Skip to content
This repository has been archived by the owner on Mar 15, 2018. It is now read-only.

Render never called in Container #77

Open
nolawnchairs opened this issue Jan 26, 2018 · 0 comments
Open

Render never called in Container #77

nolawnchairs opened this issue Jan 26, 2018 · 0 comments

Comments

@nolawnchairs
Copy link

nolawnchairs commented Jan 26, 2018

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);
        }
    }
});
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant