Merge pull request #91 from 4Catalyzer/QuerySubscription-listeners

Improve logic around QuerySubscription listeners

src/modern/QuerySubscription.js

@@ -46,18 +46,11 @@ export default class QuerySubscription {
 
               snapshot = this.environment.lookup(this.operation.fragment);
 
-              // TODO: Explicitly track whether this is the first resolution.
-              // retry is unset only for the initial request.
-              if (this.readyState.retry) {
-                // We've already fetched once. That means this isn't an initial
-                // render, so we need to trigger listeners.
-                this.onChange(snapshot);
-              } else {
-                // Don't trigger listeners on the initial fetch, because the
-                // resolver will trigger an update and make ReadyStateRenderers
-                // rerender anyway.
-                this.updateReadyState(snapshot);
-              }
+              this.updateReadyState({
+                error: null,
+                props: snapshot.data,
+                retry: this.retry,
+              });
 
               this.rootSubscription = this.environment.subscribe(
                 snapshot, this.onChange,
@@ -67,13 +60,12 @@ export default class QuerySubscription {
             },
 
             error: (error) => {
-              this.readyState = {
+              this.updateReadyState({
                 error,
                 props: null,
                 // FIXME: Use default readyState when retrying.
                 retry: this.retry,
-              };
-              // FIXME: Fire listeners on receiving error.
+              });
 
               resolve();
             },
@@ -84,19 +76,19 @@ export default class QuerySubscription {
     return this.fetchPromise;
   }
 
-  updateReadyState(snapshot) {
-    this.readyState = {
-      error: null,
-      props: snapshot.data,
-      retry: this.retry,
-    };
+  updateReadyState(readyState) {
+    this.readyState = readyState;
+
+    this.listeners.forEach((listener) => {
+      listener(readyState);
+    });
   }
 
   onChange = (snapshot) => {
-    this.updateReadyState(snapshot);
-
-    this.listeners.forEach((listener) => {
-      listener(this.readyState);
+    this.updateReadyState({
+      error: null,
+      props: snapshot.data,
+      retry: this.retry,
     });
   };
 

src/modern/ReadyStateRenderer.js

@@ -17,6 +17,7 @@ const propTypes = {
   hasComponent: PropTypes.bool.isRequired,
   element: PropTypes.element,
   querySubscription: PropTypes.instanceOf(QuerySubscription).isRequired,
+  fetched: PropTypes.bool.isRequired,
 };
 
 const childContextTypes = {
@@ -68,6 +69,12 @@ class ReadyStateRenderer extends React.Component {
   }
 
   onUpdate = (readyState) => {
+    if (!this.props.fetched) {
+      // Ignore subscription updates if our data aren't yet fetched. We'll
+      // rerender anyway once fetching finishes.
+      return;
+    }
+
     const { match, Component, isComponentResolved, hasComponent } = this.props;
 
     const element = renderElement({
@@ -91,6 +98,7 @@ class ReadyStateRenderer extends React.Component {
     delete ownProps.hasComponent;
     delete ownProps.element;
     delete ownProps.querySubscription;
+    delete ownProps.fetched;
 
     const { element } = this.state;
 

src/modern/Resolver.js

@@ -53,6 +53,7 @@ export default class Resolver {
         routeMatches,
         earlyComponents,
         querySubscriptions,
+        false,
       );
 
       yield pendingElements.every(element => element !== undefined) ?
@@ -68,6 +69,7 @@ export default class Resolver {
       routeMatches,
       fetchedComponents,
       querySubscriptions,
+      true,
     );
   }
 
@@ -128,7 +130,7 @@ export default class Resolver {
     return querySubscriptions;
   }
 
-  createElements(routeMatches, Components, querySubscriptions) {
+  createElements(routeMatches, Components, querySubscriptions, fetched) {
     return routeMatches.map((match, i) => {
       const { route } = match;
 
@@ -178,6 +180,7 @@ export default class Resolver {
           hasComponent={hasComponent}
           element={element}
           querySubscription={querySubscription}
+          fetched={fetched}
         />
       );
     });