Error catching (#89)

* finally fix caught errors

* only render the error once

* version bump

Changelog.md

@@ -2,6 +2,10 @@
 
 Expect active development and potentially significant breaking changes in the `0.x` track. We'll try to be diligent about releasing a `1.0` version in a timely fashion (ideally within 1 or 2 months), so that we can take advantage of SemVer to signify breaking changes from that point on.
 
+### v0.3.13
+
+Bug: fixed issue causing errors to be passed to apollo-client [#89](https://github.com/apollostack/react-apollo/pull/89)
+
 ### v0.3.11/12
 
 Bug: fixed overrendering of components on redux state changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-apollo",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "description": "React data container for Apollo Client",
   "main": "index.js",
   "scripts": {

src/connect.tsx

@@ -137,6 +137,8 @@ export default function connect(opts?: ConnectOptions) {
       private hasQueryDataChanged: boolean;
       private hasMutationDataChanged: boolean;
       private hasOwnStateChanged: boolean;
+      private childRenderError: any = null;
+      private isRenderingError: boolean = false;
 
       // the element to render
       private renderedElement: any;
@@ -203,6 +205,25 @@ export default function connect(opts?: ConnectOptions) {
         this.hasMounted = false;
       }
 
+      forceRenderChildren() {
+        const { isRenderingError } = this;
+        // ensure setState throws an error in the render
+        // to prevent it from going to apollo-client as a
+        // network error
+        try {
+          // update state to latest of redux store
+          this.setState(this.store.getState());
+        } catch (e) {
+          // save for the next render
+          this.childRenderError = e;
+          this.isRenderingError = true;
+          if (!isRenderingError) {
+            this.forceUpdate();
+          }
+        }
+
+      }
+
       bindStoreUpdates(): void {
         const { store } = this;
         const { reduxRootKey } = this.client;
@@ -317,7 +338,7 @@ export default function connect(opts?: ConnectOptions) {
 
             if (this.hasMounted) {
               // update state to latest of redux store
-              this.setState(this.store.getState());
+              this.forceRenderChildren();
             }
 
 
@@ -360,8 +381,7 @@ export default function connect(opts?: ConnectOptions) {
           }, data);
 
           if (this.hasMounted) {
-            // update state to latest of redux store
-            this.setState(this.store.getState());
+            this.forceRenderChildren();
           }
         };
 
@@ -438,7 +458,7 @@ export default function connect(opts?: ConnectOptions) {
           if (this.hasMounted) {
             // update state to latest of redux store
             // this forces a render of children
-            this.setState(store.getState());
+            this.forceRenderChildren();
           }
 
           return {
@@ -467,7 +487,7 @@ export default function connect(opts?: ConnectOptions) {
             if (this.hasMounted) {
               // update state to latest of redux store
               // this forces a render of children
-              this.setState(store.getState());
+              this.forceRenderChildren();
             }
 
             resolve();
@@ -487,12 +507,18 @@ export default function connect(opts?: ConnectOptions) {
           hasOwnStateChanged,
           hasQueryDataChanged,
           hasMutationDataChanged,
+          childRenderError,
           renderedElement,
           mutations,
           props,
           data,
         } = this;
 
+        this.childRenderError = null;
+        if (childRenderError) {
+          throw childRenderError;
+        }
+
         this.haveOwnPropsChanged = false;
         this.hasOwnStateChanged = false;
         this.hasQueryDataChanged = false;

test/client/connect/queries.tsx

@@ -1930,4 +1930,62 @@ describe('queries', () => {
       done();
     }, 50);
   });
+  it('should not swallow errors', (done) => {
+    const query = gql`
+      query sample {
+        viewer {
+          name
+        }
+      }
+    `;
+
+    const data = {
+      viewer: { name: 'James' },
+    };
+
+    const networkInterface = mockNetworkInterface({
+      request: { query },
+      result: { data },
+      delay: 10,
+    });
+
+    const client = new ApolloClient({
+      networkInterface,
+    });
+
+    let count = 0;
+    function BadComponent(props) {
+      count++;
+      if (props.data.loading) {
+        return null;
+      }
+
+      if (props.data.errors) {
+        done(props.data.errors);
+        return null;
+      } else if (count === 2) {
+        done();
+        return null;
+      }
+
+      const name = props.data.typo.name;
+      return <p>Hi {name}</p>;
+    }
+
+    function mapQueriesToProps() {
+      return {
+        data: { query },
+      };
+    }
+
+    const BadContainer = connect({
+      mapQueriesToProps,
+    })(BadComponent);
+
+    mount(
+      <ProviderMock client={client}>
+        <BadContainer />
+      </ProviderMock>
+    );
+  });
 });