react-relay 11.0.0 → 13.0.0-rc.0

package/lib/relay-hooks/LRUCache.js

@@ -11,7 +11,7 @@
 // flowlint ambiguous-object-type:error
 'use strict';
 
-var invariant = require("fbjs/lib/invariant");
+var invariant = require('invariant');
 
 /**
  * JS maps (both plain objects and Map) maintain key insertion

package/lib/relay-hooks/LazyLoadEntryPointContainer_DEPRECATED.react.js

@@ -11,14 +11,14 @@
 // flowlint ambiguous-object-type:error
 'use strict';
 
-var ProfilerContext = require('./ProfilerContext');
-
-var React = require('react');
-
 var preloadQuery_DEPRECATED = require('./preloadQuery_DEPRECATED');
 
+var ProfilerContext = require('./ProfilerContext');
+
 var useRelayEnvironment = require('./useRelayEnvironment');
 
+var React = require('react');
+
 var _require = require('react'),
     useContext = _require.useContext,
     useEffect = _require.useEffect,

package/lib/relay-hooks/MatchContainer.js

@@ -98,7 +98,7 @@ function MatchContainer(_ref2) {
 
   if (match != null && typeof match !== 'object') {
     throw new Error('MatchContainer: Expected `match` value to be an object or null/undefined.');
-  } // NOTE: the MatchPointer type has a $fragmentRefs field to ensure that only
+  } // NOTE: the MatchPointer type has a $fragmentSpreads field to ensure that only
   // an object that contains a FragmentSpread can be passed. If the fragment
   // spread matches, then the metadata fields below (__id, __fragments, etc.)
   // will be present. But they can be missing if all the fragment spreads use

package/lib/relay-hooks/QueryResource.js

@@ -19,16 +19,24 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var LRUCache = require('./LRUCache');
 
-var invariant = require("fbjs/lib/invariant");
+var SuspenseResource = require('./SuspenseResource');
+
+var invariant = require('invariant');
 
 var _require = require('relay-runtime'),
+    RelayFeatureFlags = _require.RelayFeatureFlags,
     isPromise = _require.isPromise;
 
+var warning = require("fbjs/lib/warning");
+
 var CACHE_CAPACITY = 1000;
 var DEFAULT_FETCH_POLICY = 'store-or-network';
-var DATA_RETENTION_TIMEOUT = 5 * 60 * 1000;
 var WEAKMAP_SUPPORTED = typeof WeakMap === 'function';
 
+function operationIsLiveQuery(operation) {
+  return operation.request.node.params.metadata.live !== undefined;
+}
+
 function getQueryCacheIdentifier(environment, operation, maybeFetchPolicy, maybeRenderPolicy, cacheBreaker) {
   var fetchPolicy = maybeFetchPolicy !== null && maybeFetchPolicy !== void 0 ? maybeFetchPolicy : DEFAULT_FETCH_POLICY;
   var renderPolicy = maybeRenderPolicy !== null && maybeRenderPolicy !== void 0 ? maybeRenderPolicy : environment.UNSTABLE_getDefaultRenderPolicy();
@@ -57,11 +65,83 @@ function getQueryResult(operation, cacheIdentifier) {
 
 var nextID = 200000;
 
-function createCacheEntry(cacheIdentifier, operation, value, networkSubscription, onDispose) {
+function createCacheEntry(cacheIdentifier, operation, operationAvailability, value, networkSubscription, onDispose) {
+  // There should be no behavior difference between createCacheEntry_new and
+  // createCacheEntry_old, and it doesn't directly relate to Client Edges.
+  // It was just a refactoring that was needed for Client Edges but that
+  // is behind the feature flag just in case there is any accidental breakage.
+  if (RelayFeatureFlags.REFACTOR_SUSPENSE_RESOURCE) {
+    return createCacheEntry_new(cacheIdentifier, operation, operationAvailability, value, networkSubscription, onDispose);
+  } else {
+    return createCacheEntry_old(cacheIdentifier, operation, operationAvailability, value, networkSubscription, onDispose);
+  }
+}
+
+function createCacheEntry_new(cacheIdentifier, operation, operationAvailability, value, networkSubscription, onDispose) {
+  var isLiveQuery = operationIsLiveQuery(operation);
+  var currentValue = value;
+  var currentNetworkSubscription = networkSubscription;
+  var suspenseResource = new SuspenseResource(function (environment) {
+    var retention = environment.retain(operation);
+    return {
+      dispose: function dispose() {
+        // Normally if this entry never commits, the request would've ended by the
+        // time this timeout expires and the temporary retain is released. However,
+        // we need to do this for live queries which remain open indefinitely.
+        if (isLiveQuery && currentNetworkSubscription != null) {
+          currentNetworkSubscription.unsubscribe();
+        }
+
+        retention.dispose();
+        onDispose(cacheEntry);
+      }
+    };
+  });
+  var cacheEntry = {
+    cacheIdentifier: cacheIdentifier,
+    id: nextID++,
+    processedPayloadsCount: 0,
+    operationAvailability: operationAvailability,
+    getValue: function getValue() {
+      return currentValue;
+    },
+    setValue: function setValue(val) {
+      currentValue = val;
+    },
+    getRetainCount: function getRetainCount() {
+      return suspenseResource.getRetainCount();
+    },
+    getNetworkSubscription: function getNetworkSubscription() {
+      return currentNetworkSubscription;
+    },
+    setNetworkSubscription: function setNetworkSubscription(subscription) {
+      if (isLiveQuery && currentNetworkSubscription != null) {
+        currentNetworkSubscription.unsubscribe();
+      }
+
+      currentNetworkSubscription = subscription;
+    },
+    temporaryRetain: function temporaryRetain(environment) {
+      return suspenseResource.temporaryRetain(environment);
+    },
+    permanentRetain: function permanentRetain(environment) {
+      return suspenseResource.permanentRetain(environment);
+    },
+    releaseTemporaryRetain: function releaseTemporaryRetain() {
+      suspenseResource.releaseTemporaryRetain();
+    }
+  };
+  return cacheEntry;
+}
+
+var DATA_RETENTION_TIMEOUT = 5 * 60 * 1000;
+
+function createCacheEntry_old(cacheIdentifier, operation, operationAvailability, value, networkSubscription, onDispose) {
+  var isLiveQuery = operationIsLiveQuery(operation);
   var currentValue = value;
   var retainCount = 0;
   var retainDisposable = null;
-  var releaseTemporaryRetain = null;
+  var _releaseTemporaryRetain = null;
   var currentNetworkSubscription = networkSubscription;
 
   var retain = function retain(environment) {
@@ -89,6 +169,8 @@ function createCacheEntry(cacheIdentifier, operation, value, networkSubscription
   var cacheEntry = {
     cacheIdentifier: cacheIdentifier,
     id: nextID++,
+    processedPayloadsCount: 0,
+    operationAvailability: operationAvailability,
     getValue: function getValue() {
       return currentValue;
     },
@@ -102,7 +184,7 @@ function createCacheEntry(cacheIdentifier, operation, value, networkSubscription
       return currentNetworkSubscription;
     },
     setNetworkSubscription: function setNetworkSubscription(subscription) {
-      if (currentNetworkSubscription != null) {
+      if (isLiveQuery && currentNetworkSubscription != null) {
         currentNetworkSubscription.unsubscribe();
       }
 
@@ -129,12 +211,12 @@ function createCacheEntry(cacheIdentifier, operation, value, networkSubscription
       var localReleaseTemporaryRetain = function localReleaseTemporaryRetain() {
         clearTimeout(releaseQueryTimeout);
         releaseQueryTimeout = null;
-        releaseTemporaryRetain = null;
+        _releaseTemporaryRetain = null;
         disposable.dispose(); // Normally if this entry never commits, the request would've ended by the
         // time this timeout expires and the temporary retain is released. However,
         // we need to do this for live queries which remain open indefinitely.
 
-        if (retainCount <= 0 && currentNetworkSubscription != null) {
+        if (isLiveQuery && retainCount <= 0 && currentNetworkSubscription != null) {
           currentNetworkSubscription.unsubscribe();
         }
       };
@@ -147,34 +229,42 @@ function createCacheEntry(cacheIdentifier, operation, value, networkSubscription
       // phase, as well as multiple times by other query components that are
       // rendering the same query/variables.
 
-      if (releaseTemporaryRetain != null) {
-        releaseTemporaryRetain();
+      if (_releaseTemporaryRetain != null) {
+        _releaseTemporaryRetain();
       }
 
-      releaseTemporaryRetain = localReleaseTemporaryRetain;
+      _releaseTemporaryRetain = localReleaseTemporaryRetain;
       return {
         dispose: function dispose() {
-          releaseTemporaryRetain && releaseTemporaryRetain();
+          _releaseTemporaryRetain && _releaseTemporaryRetain();
         }
       };
     },
     permanentRetain: function permanentRetain(environment) {
       var disposable = retain(environment);
 
-      if (releaseTemporaryRetain != null) {
-        releaseTemporaryRetain();
-        releaseTemporaryRetain = null;
+      if (_releaseTemporaryRetain != null) {
+        _releaseTemporaryRetain();
+
+        _releaseTemporaryRetain = null;
       }
 
       return {
         dispose: function dispose() {
           disposable.dispose();
 
-          if (retainCount <= 0 && currentNetworkSubscription != null) {
+          if (isLiveQuery && retainCount <= 0 && currentNetworkSubscription != null) {
             currentNetworkSubscription.unsubscribe();
           }
         }
       };
+    },
+    releaseTemporaryRetain: function releaseTemporaryRetain() {
+      if (_releaseTemporaryRetain != null) {
+        _releaseTemporaryRetain();
+
+        _releaseTemporaryRetain = null;
+      }
     }
   };
   return cacheEntry;
@@ -185,8 +275,14 @@ var QueryResourceImpl = /*#__PURE__*/function () {
     var _this = this;
 
     (0, _defineProperty2["default"])(this, "_clearCacheEntry", function (cacheEntry) {
-      if (cacheEntry.getRetainCount() <= 0) {
+      // The new code does this retainCount <= 0 check within SuspenseResource
+      // before calling _clearCacheEntry, whereas with the old code we do it here.
+      if (RelayFeatureFlags.REFACTOR_SUSPENSE_RESOURCE) {
         _this._cache["delete"](cacheEntry.cacheIdentifier);
+      } else {
+        if (cacheEntry.getRetainCount() <= 0) {
+          _this._cache["delete"](cacheEntry.cacheIdentifier);
+        }
       }
     });
     this._environment = environment;
@@ -215,6 +311,7 @@ var QueryResourceImpl = /*#__PURE__*/function () {
     var cacheEntry = this._cache.get(cacheIdentifier);
 
     var temporaryRetainDisposable = null;
+    var entryWasCached = cacheEntry != null;
 
     if (cacheEntry == null) {
       // 2. If a cached value isn't available, try fetching the operation.
@@ -245,7 +342,20 @@ var QueryResourceImpl = /*#__PURE__*/function () {
     temporaryRetainDisposable = cacheEntry.temporaryRetain(environment);
     var cachedValue = cacheEntry.getValue();
 
-    if (isPromise(cachedValue) || cachedValue instanceof Error) {
+    if (isPromise(cachedValue)) {
+      environment.__log({
+        name: 'suspense.query',
+        fetchPolicy: fetchPolicy,
+        isPromiseCached: entryWasCached,
+        operation: operation,
+        queryAvailability: cacheEntry.operationAvailability,
+        renderPolicy: renderPolicy
+      });
+
+      throw cachedValue;
+    }
+
+    if (cachedValue instanceof Error) {
       throw cachedValue;
     }
 
@@ -263,7 +373,7 @@ var QueryResourceImpl = /*#__PURE__*/function () {
     var cacheIdentifier = queryResult.cacheIdentifier,
         operation = queryResult.operation;
 
-    var cacheEntry = this._getOrCreateCacheEntry(cacheIdentifier, operation, queryResult, null);
+    var cacheEntry = this._getOrCreateCacheEntry(cacheIdentifier, operation, null, queryResult, null);
 
     var disposable = cacheEntry.permanentRetain(environment);
 
@@ -280,17 +390,25 @@ var QueryResourceImpl = /*#__PURE__*/function () {
     };
   };
 
+  _proto.releaseTemporaryRetain = function releaseTemporaryRetain(queryResult) {
+    var cacheEntry = this._cache.get(queryResult.cacheIdentifier);
+
+    if (cacheEntry != null) {
+      cacheEntry.releaseTemporaryRetain();
+    }
+  };
+
   _proto.TESTS_ONLY__getCacheEntry = function TESTS_ONLY__getCacheEntry(operation, maybeFetchPolicy, maybeRenderPolicy, cacheBreaker) {
     var environment = this._environment;
     var cacheIdentifier = getQueryCacheIdentifier(environment, operation, maybeFetchPolicy, maybeRenderPolicy, cacheBreaker);
     return this._cache.get(cacheIdentifier);
   };
 
-  _proto._getOrCreateCacheEntry = function _getOrCreateCacheEntry(cacheIdentifier, operation, value, networkSubscription) {
+  _proto._getOrCreateCacheEntry = function _getOrCreateCacheEntry(cacheIdentifier, operation, operationAvailability, value, networkSubscription) {
     var cacheEntry = this._cache.get(cacheIdentifier);
 
     if (cacheEntry == null) {
-      cacheEntry = createCacheEntry(cacheIdentifier, operation, value, networkSubscription, this._clearCacheEntry);
+      cacheEntry = createCacheEntry(cacheIdentifier, operation, operationAvailability, value, networkSubscription, this._clearCacheEntry);
 
       this._cache.set(cacheIdentifier, cacheEntry);
     }
@@ -353,7 +471,7 @@ var QueryResourceImpl = /*#__PURE__*/function () {
     if (shouldAllowRender) {
       var queryResult = getQueryResult(operation, cacheIdentifier);
 
-      var _cacheEntry = createCacheEntry(cacheIdentifier, operation, queryResult, null, this._clearCacheEntry);
+      var _cacheEntry = createCacheEntry(cacheIdentifier, operation, queryAvailability, queryResult, null, this._clearCacheEntry);
 
       this._cache.set(cacheIdentifier, _cacheEntry);
     }
@@ -373,22 +491,47 @@ var QueryResourceImpl = /*#__PURE__*/function () {
           }
 
           var observerStart = observer === null || observer === void 0 ? void 0 : observer.start;
-          observerStart && observerStart(subscription);
+
+          if (observerStart) {
+            var subscriptionWithConditionalCancelation = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, subscription), {}, {
+              unsubscribe: function unsubscribe() {
+                // Only live queries should have their network requests canceled.
+                if (operationIsLiveQuery(operation)) {
+                  subscription.unsubscribe();
+                }
+              }
+            });
+            observerStart(subscriptionWithConditionalCancelation);
+          }
         },
         next: function next() {
-          var snapshot = environment.lookup(operation.fragment);
-
-          var cacheEntry = _this2._getOrCreateCacheEntry(cacheIdentifier, operation, _queryResult, networkSubscription);
+          var cacheEntry = _this2._getOrCreateCacheEntry(cacheIdentifier, operation, queryAvailability, _queryResult, networkSubscription);
 
+          cacheEntry.processedPayloadsCount += 1;
           cacheEntry.setValue(_queryResult);
           resolveNetworkPromise();
           var observerNext = observer === null || observer === void 0 ? void 0 : observer.next;
-          observerNext && observerNext(snapshot);
+
+          if (observerNext != null) {
+            var snapshot = environment.lookup(operation.fragment);
+            observerNext(snapshot);
+          }
         },
         error: function error(_error) {
-          var cacheEntry = _this2._getOrCreateCacheEntry(cacheIdentifier, operation, _error, networkSubscription);
+          var cacheEntry = _this2._getOrCreateCacheEntry(cacheIdentifier, operation, queryAvailability, _error, networkSubscription); // If, this is the first thing we receive for the query,
+          // before any other payload handled is error, we will cache and
+          // re-throw that error later.
+          // We will ignore errors for any incremental payloads we receive.
+
+
+          if (cacheEntry.processedPayloadsCount === 0) {
+            cacheEntry.setValue(_error);
+          } else {
+            // TODO:T92030819 Remove this warning and actually throw the network error
+            // To complete this task we need to have a way of precisely tracking suspendable points
+            process.env.NODE_ENV !== "production" ? warning(false, 'QueryResource: An incremental payload for query `%` returned an error: `%`:`%`.', operation.fragment.node.name, _error.message, _error.stack) : void 0;
+          }
 
-          cacheEntry.setValue(_error);
           resolveNetworkPromise();
           networkSubscription = null;
           cacheEntry.setNetworkSubscription(null);
@@ -419,7 +562,7 @@ var QueryResourceImpl = /*#__PURE__*/function () {
         }); // $FlowExpectedError[prop-missing] Expando to annotate Promises.
 
         networkPromise.displayName = 'Relay(' + operation.fragment.node.name + ')';
-        _cacheEntry2 = createCacheEntry(cacheIdentifier, operation, networkPromise, networkSubscription, this._clearCacheEntry);
+        _cacheEntry2 = createCacheEntry(cacheIdentifier, operation, queryAvailability, networkPromise, networkSubscription, this._clearCacheEntry);
 
         this._cache.set(cacheIdentifier, _cacheEntry2);
       }

package/lib/relay-hooks/RelayEnvironmentProvider.js

@@ -19,12 +19,14 @@ var useMemo = React.useMemo;
 
 function RelayEnvironmentProvider(props) {
   var children = props.children,
-      environment = props.environment;
+      environment = props.environment,
+      getEnvironmentForActor = props.getEnvironmentForActor;
   var context = useMemo(function () {
     return {
-      environment: environment
+      environment: environment,
+      getEnvironmentForActor: getEnvironmentForActor
     };
-  }, [environment]);
+  }, [environment, getEnvironmentForActor]);
   return /*#__PURE__*/React.createElement(ReactRelayContext.Provider, {
     value: context
   }, children);

package/lib/relay-hooks/SuspenseResource.js

@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ * @emails oncall+relay
+ * @format
+ */
+// flowlint ambiguous-object-type:error
+'use strict';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var invariant = require('invariant');
+
+var TEMPORARY_RETAIN_DURATION_MS = 5 * 60 * 1000;
+/**
+ * Allows you to retain a resource as part of a component lifecycle accounting
+ * for Suspense. You temporarily retain the resource during render, then
+ * permanently retain it during commit and release it during unmount.
+ */
+
+var SuspenseResource = /*#__PURE__*/function () {
+  function SuspenseResource(retain) {
+    var _this = this;
+
+    (0, _defineProperty2["default"])(this, "_retainCount", 0);
+    (0, _defineProperty2["default"])(this, "_retainDisposable", null);
+    (0, _defineProperty2["default"])(this, "_releaseTemporaryRetain", null);
+
+    this._retain = function (environment) {
+      _this._retainCount++;
+
+      if (_this._retainCount === 1) {
+        _this._retainDisposable = retain(environment);
+      }
+
+      return {
+        dispose: function dispose() {
+          _this._retainCount = Math.max(0, _this._retainCount - 1);
+
+          if (_this._retainCount === 0) {
+            !(_this._retainDisposable != null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: Expected disposable to release query to be defined.' + "If you're seeing this, this is likely a bug in Relay.") : invariant(false) : void 0;
+
+            _this._retainDisposable.dispose();
+
+            _this._retainDisposable = null;
+          }
+        }
+      };
+    };
+  }
+
+  var _proto = SuspenseResource.prototype;
+
+  _proto.temporaryRetain = function temporaryRetain(environment) {
+    var _this2 = this;
+
+    var _this$_releaseTempora;
+
+    // If we're executing in a server environment, there's no need
+    // to create temporary retains, since the component will never commit.
+    if (environment.isServer()) {
+      return {
+        dispose: function dispose() {}
+      };
+    } // temporaryRetain is called during the render phase. However,
+    // given that we can't tell if this render will eventually commit or not,
+    // we create a timer to autodispose of this retain in case the associated
+    // component never commits.
+    // If the component /does/ commit, permanentRetain will clear this timeout
+    // and permanently retain the data.
+
+
+    var retention = this._retain(environment);
+
+    var releaseQueryTimeout = null;
+
+    var releaseTemporaryRetain = function releaseTemporaryRetain() {
+      clearTimeout(releaseQueryTimeout);
+      releaseQueryTimeout = null;
+      _this2._releaseTemporaryRetain = null;
+      retention.dispose();
+    };
+
+    releaseQueryTimeout = setTimeout(releaseTemporaryRetain, TEMPORARY_RETAIN_DURATION_MS); // NOTE: Since temporaryRetain can be called multiple times, we release
+    // the previous temporary retain after we re-establish a new one, since
+    // we only ever need a single temporary retain until the permanent retain is
+    // established.
+    // temporaryRetain may be called multiple times by React during the render
+    // phase, as well as multiple times by other query components that are
+    // rendering the same query/variables.
+
+    (_this$_releaseTempora = this._releaseTemporaryRetain) === null || _this$_releaseTempora === void 0 ? void 0 : _this$_releaseTempora.call(this);
+    this._releaseTemporaryRetain = releaseTemporaryRetain;
+    return {
+      dispose: function dispose() {
+        var _this$_releaseTempora2;
+
+        (_this$_releaseTempora2 = _this2._releaseTemporaryRetain) === null || _this$_releaseTempora2 === void 0 ? void 0 : _this$_releaseTempora2.call(_this2);
+      }
+    };
+  };
+
+  _proto.permanentRetain = function permanentRetain(environment) {
+    var disposable = this._retain(environment);
+
+    this.releaseTemporaryRetain();
+    return disposable;
+  };
+
+  _proto.releaseTemporaryRetain = function releaseTemporaryRetain() {
+    var _this$_releaseTempora3;
+
+    (_this$_releaseTempora3 = this._releaseTemporaryRetain) === null || _this$_releaseTempora3 === void 0 ? void 0 : _this$_releaseTempora3.call(this);
+    this._releaseTemporaryRetain = null;
+  };
+
+  _proto.getRetainCount = function getRetainCount() {
+    return this._retainCount;
+  };
+
+  return SuspenseResource;
+}();
+
+module.exports = SuspenseResource;

package/lib/relay-hooks/loadQuery.js

@@ -14,21 +14,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
-var React = require('react');
-
-var invariant = require("fbjs/lib/invariant");
+var invariant = require('invariant');
 
-var warning = require("fbjs/lib/warning");
+var React = require('react');
 
 var _require = require('relay-runtime'),
+    Observable = _require.Observable,
     PreloadableQueryRegistry = _require.PreloadableQueryRegistry,
+    RelayFeatureFlags = _require.RelayFeatureFlags,
     ReplaySubject = _require.ReplaySubject,
+    fetchQueryDeduped = _require.__internal.fetchQueryDeduped,
     createOperationDescriptor = _require.createOperationDescriptor,
     getRequest = _require.getRequest,
-    getRequestIdentifier = _require.getRequestIdentifier,
-    Observable = _require.Observable,
-    RelayFeatureFlags = _require.RelayFeatureFlags,
-    fetchQueryDeduped = _require.__internal.fetchQueryDeduped;
+    getRequestIdentifier = _require.getRequestIdentifier;
+
+var warning = require("fbjs/lib/warning");
 
 var RenderDispatcher = null;
 var fetchKey = 100001;
@@ -252,10 +252,9 @@ function loadQuery(environment, preloadableRequest, variables, options, environm
       // ast, and we know that if we don't have the query ast
       // available, then this query could've never been written to the
       // store in the first place, so it couldn't have been cached.
-      var networkObservable = fetchPolicy === 'store-only' ? null : makeNetworkRequest(params);
+      var networkObservable = fetchPolicy === 'store-only' ? null : makeNetworkRequest(params); // $FlowFixMe[method-unbinding] added when improving typing for this parameters
 
-      var _PreloadableQueryRegi = PreloadableQueryRegistry.onLoad( // $FlowFixMe[incompatible-call]
-      queryId, function (preloadedModule) {
+      var _PreloadableQueryRegi = PreloadableQueryRegistry.onLoad(queryId, function (preloadedModule) {
         cancelOnLoadCallback();
         var operation = createOperationDescriptor(preloadedModule, variables, networkCacheConfig);
         retainReference = environment.retain(operation);
@@ -278,6 +277,33 @@ function loadQuery(environment, preloadableRequest, variables, options, environm
   }
 
   var isDisposed = false;
+  var isReleased = false;
+  var isNetworkRequestCancelled = false;
+
+  var releaseQuery = function releaseQuery() {
+    if (isReleased) {
+      return;
+    }
+
+    retainReference && retainReference.dispose();
+    isReleased = true;
+  };
+
+  var cancelNetworkRequest = function cancelNetworkRequest() {
+    if (isNetworkRequestCancelled) {
+      return;
+    }
+
+    if (didExecuteNetworkSource) {
+      unsubscribeFromExecution && unsubscribeFromExecution();
+    } else {
+      unsubscribeFromNetworkRequest && unsubscribeFromNetworkRequest();
+    }
+
+    cancelOnLoadCallback && cancelOnLoadCallback();
+    isNetworkRequestCancelled = true;
+  };
+
   return {
     kind: 'PreloadedQuery',
     environment: environment,
@@ -287,22 +313,18 @@ function loadQuery(environment, preloadableRequest, variables, options, environm
         return;
       }
 
-      if (didExecuteNetworkSource) {
-        unsubscribeFromExecution && unsubscribeFromExecution();
-      } else {
-        unsubscribeFromNetworkRequest && unsubscribeFromNetworkRequest();
-      }
-
-      retainReference && retainReference.dispose();
-      cancelOnLoadCallback && cancelOnLoadCallback();
+      releaseQuery();
+      cancelNetworkRequest();
       isDisposed = true;
     },
+    releaseQuery: releaseQuery,
+    cancelNetworkRequest: cancelNetworkRequest,
     fetchKey: fetchKey,
     id: queryId,
 
     // $FlowFixMe[unsafe-getters-setters] - this has no side effects
     get isDisposed() {
-      return isDisposed;
+      return isDisposed || isReleased;
     },
 
     // $FlowFixMe[unsafe-getters-setters] - this has no side effects