handle sync error result in QueryRenderer

Summary: In case the network returns synchronously with an error we should also synchronously set the `readyState`.

Reviewed By: leebyron

Differential Revision: D5822405

fbshipit-source-id: 10336cb3849778e7c1020c3ecf2e007f31ec15d2

packages/react-relay/modern/ReactRelayQueryRenderer.js

@@ -193,8 +193,8 @@ class ReactRelayQueryRenderer extends React.Component<Props, State> {
 
     let readyState = getDefaultState();
     let snapshot: ?Snapshot; // results of the root fragment
-    let isOnNextCalled = false;
-    let isFunctionReturned = false;
+    let hasSyncResult = false;
+    let hasFunctionReturned = false;
 
     if (this._pendingFetch) {
       this._pendingFetch.dispose();
@@ -234,8 +234,8 @@ class ReactRelayQueryRenderer extends React.Component<Props, State> {
           );
           this._selectionReference = nextReference;
           // This line should be called only once.
-          isOnNextCalled = true;
-          if (isFunctionReturned) {
+          hasSyncResult = true;
+          if (hasFunctionReturned) {
             this.setState({readyState});
           }
         },
@@ -251,7 +251,10 @@ class ReactRelayQueryRenderer extends React.Component<Props, State> {
             this._selectionReference.dispose();
           }
           this._selectionReference = nextReference;
-          this.setState({readyState});
+          hasSyncResult = true;
+          if (hasFunctionReturned) {
+            this.setState({readyState});
+          }
         },
       });
 
@@ -261,8 +264,8 @@ class ReactRelayQueryRenderer extends React.Component<Props, State> {
         nextReference.dispose();
       },
     };
-    isFunctionReturned = true;
-    return isOnNextCalled ? readyState : null;
+    hasFunctionReturned = true;
+    return hasSyncResult ? readyState : null;
   }
 
   _onChange = (snapshot: Snapshot): void => {

packages/react-relay/modern/__tests__/ReactRelayQueryRenderer-test.js

@@ -191,6 +191,30 @@ describe('ReactRelayQueryRenderer', () => {
         retry: jasmine.any(Function),
       }).toBeRendered();
     });
+
+    it('skip loading state when request failed synchronously', () => {
+      const error = new Error('Mock Network Error');
+      const fetch = () => error;
+      store = new RelayMarkSweepStore(new RelayInMemoryRecordSource());
+      environment = new RelayModernEnvironment({
+        network: RelayNetwork.create(fetch),
+        store,
+      });
+      ReactTestRenderer.create(
+        <ReactRelayQueryRenderer
+          query={TestQuery}
+          cacheConfig={cacheConfig}
+          environment={environment}
+          render={render}
+          variables={variables}
+        />,
+      );
+      expect({
+        error: error,
+        props: null,
+        retry: jasmine.any(Function),
+      }).toBeRendered();
+    });
   });
 
   describe('context', () => {