fix ssr issues with lifecycle events

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.

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": {

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());

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<any, any> {
-
-    //     state = { thing: 1 }
-
-    //     componentWillMount() {
-    //       console.log('here')
-    //       this.setState({ thing: 2 })
-    //     }
-
-    //     render(){
-    //       const { user } = this.props;
-    //       console.log(this.state);
-    //       return <div>{user.loading ? 'loading' : user.currentUser.firstName}</div>
-    //     }
-    //   }
-
-    //   const app = (<ApolloProvider client={apolloClient}><Element id={1} /></ApolloProvider>);
-
-    //   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<any, any> {
+
+        state = { thing: 1 };
+
+        componentWillMount() {
+          this.setState({ thing: this.state.thing + 1 });
+        }
+
+        render(){
+          const { user } = this.props;
+          expect(this.state.thing).to.equal(2);
+          return <div>{user.loading ? 'loading' : user.currentUser.firstName}</div>
+        }
+      }
+
+      const app = (<ApolloProvider client={apolloClient}><Element id={1} /></ApolloProvider>);
+
+      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 } }`;