diff --git a/Changelog.md b/Changelog.md index e8dd1eccfa..75261cecb4 100644 --- a/Changelog.md +++ b/Changelog.md @@ -4,6 +4,10 @@ Expect active development and potentially significant breaking changes in the `0 ### vNext +### v0.5.5 + +- Bug: Fixed lifecycle events for componentWillMount() on the server [#205](https://github.com/apollostack/react-apollo/pull/205) + ### v0.5.4 - Bug: Created better reference to updateQuery when bound early. It will also throw if called before it should be. diff --git a/package.json b/package.json index 4bafc971d0..1a1dcd832f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-apollo", - "version": "0.5.4", + "version": "0.5.5", "description": "React data container for Apollo Client", "main": "index.js", "scripts": { diff --git a/src/server.ts b/src/server.ts index 64f01c87d6..d60ba72570 100644 --- a/src/server.ts +++ b/src/server.ts @@ -46,7 +46,13 @@ function getQueriesFromTree( let ComponentClass = type; let ownProps = getPropsFromChild(component); const Component = new ComponentClass(ownProps, context); - + try { + Component.props = ownProps; + Component.setState = (newState: any) => { + Component.state = assign({}, Component.state, newState); + }; + } catch (e) {} // tslint:disable-line + if (Component.componentWillMount) Component.componentWillMount(); let newContext = context; if (Component.getChildContext) newContext = assign({}, context, Component.getChildContext()); diff --git a/test/react-web/server/index.tsx b/test/react-web/server/index.tsx index 87b324a560..31abdcc337 100644 --- a/test/react-web/server/index.tsx +++ b/test/react-web/server/index.tsx @@ -111,45 +111,43 @@ describe('SSR', () => { ; }); - // XXX this will require a custom renderer - // it('should allow for setting state in a component', (done) => { - // const query = gql`query user($id: ID) { currentUser(id: $id){ firstName } }`; - // const data = { currentUser: { firstName: 'James' } }; - // const variables = { id: 1 }; - // const networkInterface = mockNetworkInterface( - // { request: { query, variables }, result: { data }, delay: 50 } - // ); - // const apolloClient = new ApolloClient({ networkInterface }); - - // @graphql(query, { name: 'user' }) - // class Element extends React.Component { - - // state = { thing: 1 } - - // componentWillMount() { - // console.log('here') - // this.setState({ thing: 2 }) - // } - - // render(){ - // const { user } = this.props; - // console.log(this.state); - // return
{user.loading ? 'loading' : user.currentUser.firstName}
- // } - // } - - // const app = (); - - // getDataFromTree(app) - // .then(({ store }) => { - // const initialState = store.getState(); - // expect(initialState.apollo.data).to.exist; - // expect(initialState.apollo.data['$ROOT_QUERY.currentUser({"id":1})']).to.exist; - // done(); - // }) - // .catch(console.error) - // ; - // }); + it('should allow for setting state in a component', (done) => { + const query = gql`query user($id: ID) { currentUser(id: $id){ firstName } }`; + const data = { currentUser: { firstName: 'James' } }; + const variables = { id: 1 }; + const networkInterface = mockNetworkInterface( + { request: { query, variables }, result: { data }, delay: 50 } + ); + const apolloClient = new ApolloClient({ networkInterface }); + + @graphql(query, { name: 'user' }) + class Element extends React.Component { + + state = { thing: 1 }; + + componentWillMount() { + this.setState({ thing: this.state.thing + 1 }); + } + + render(){ + const { user } = this.props; + expect(this.state.thing).to.equal(2); + return
{user.loading ? 'loading' : user.currentUser.firstName}
+ } + } + + const app = (); + + getDataFromTree(app) + .then(({ store }) => { + const initialState = store.getState(); + expect(initialState.apollo.data).to.exist; + expect(initialState.apollo.data['$ROOT_QUERY.currentUser({"id":1})']).to.exist; + done(); + }) + .catch(console.error) + ; + }); it('shouldn\'t run queries if ssr is turned to off', (done) => { const query = gql`query user($id: ID) { currentUser(id: $id){ firstName } }`;