react-relay 12.0.0 → 13.0.0-rc.0

package/lib/relay-hooks/QueryResource.js

@@ -19,16 +19,18 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var LRUCache = require('./LRUCache');
 
-var invariant = require('invariant');
+var SuspenseResource = require('./SuspenseResource');
 
-var warning = require("fbjs/lib/warning");
+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) {
@@ -64,6 +66,77 @@ function getQueryResult(operation, cacheIdentifier) {
 var nextID = 200000;
 
 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;
@@ -202,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;

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('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;
@@ -254,8 +254,7 @@ function loadQuery(environment, preloadableRequest, variables, options, environm
       // store in the first place, so it couldn't have been cached.
       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);

package/lib/relay-hooks/preloadQuery_DEPRECATED.js

@@ -16,14 +16,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
 var _require = require('relay-runtime'),
-    createOperationDescriptor = _require.createOperationDescriptor,
-    getRequest = _require.getRequest,
-    getRequestIdentifier = _require.getRequestIdentifier,
     Observable = _require.Observable,
     PreloadableQueryRegistry = _require.PreloadableQueryRegistry,
-    ReplaySubject = _require.ReplaySubject;
+    RelayFeatureFlags = _require.RelayFeatureFlags,
+    ReplaySubject = _require.ReplaySubject,
+    createOperationDescriptor = _require.createOperationDescriptor,
+    getRequest = _require.getRequest,
+    getRequestIdentifier = _require.getRequestIdentifier; // Expire results by this delay after they resolve.
+
 
-// Expire results by this delay after they resolve.
 var DEFAULT_PREFETCH_TIMEOUT = 30 * 1000; // 30 seconds
 
 var WEAKMAP_SUPPORTED = typeof WeakMap === 'function';
@@ -58,7 +59,22 @@ function preloadQuery(environment, preloadableRequest, variables, options, envir
       var _subscription;
 
       (_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.unsubscribe();
-      cleanup(pendingQueries, queryEntry);
+
+      if (environment.isServer()) {
+        return;
+      }
+
+      if (RelayFeatureFlags.DELAY_CLEANUP_OF_PENDING_PRELOAD_QUERIES === true) {
+        setTimeout(function () {
+          // Clear the cache entry after the default timeout
+          // null-check for Flow
+          if (queryEntry != null) {
+            cleanup(pendingQueries, queryEntry);
+          }
+        }, DEFAULT_PREFETCH_TIMEOUT);
+      } else {
+        cleanup(pendingQueries, queryEntry);
+      }
     };
   }) : null;
   return {
@@ -173,11 +189,9 @@ function preloadQueryDeduped(environment, pendingQueries, preloadableRequest, va
     };
   } else {
     nextQueryEntry = prevQueryEntry;
-  } // $FlowFixMe[incompatible-call]
-
-
-  pendingQueries.set(cacheKey, nextQueryEntry); // $FlowFixMe[incompatible-return]
+  }
 
+  pendingQueries.set(cacheKey, nextQueryEntry);
   return nextQueryEntry;
 }
 

package/lib/relay-hooks/useBlockingPaginationFragment.js

@@ -17,14 +17,14 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
-var invariant = require('invariant');
-
 var useLoadMoreFunction = require('./useLoadMoreFunction');
 
 var useRefetchableFragmentNode = require('./useRefetchableFragmentNode');
 
 var useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
 
+var invariant = require('invariant');
+
 var _require = require('react'),
     useCallback = _require.useCallback,
     useEffect = _require.useEffect,

package/lib/relay-hooks/useEntryPointLoader.js

@@ -17,11 +17,11 @@ var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime
 
 var loadEntryPoint = require('./loadEntryPoint');
 
-var useIsMountedRef = require('./useIsMountedRef');
-
 var _require = require('./loadQuery'),
     useTrackLoadQueryInRender = _require.useTrackLoadQueryInRender;
 
+var useIsMountedRef = require('./useIsMountedRef');
+
 var _require2 = require('react'),
     useCallback = _require2.useCallback,
     useEffect = _require2.useEffect,

package/lib/relay-hooks/useFetchTrackingRef.js

@@ -15,7 +15,6 @@ var _require = require('react'),
     useCallback = _require.useCallback,
     useEffect = _require.useEffect,
     useRef = _require.useRef;
-
 /**
  * This hook returns a mutable React ref that holds the value of whether a
  * fetch request is in flight. The reason this is a mutable ref instead of
@@ -28,6 +27,8 @@ var _require = require('react'),
  * The additional functions returned by this Hook can be used to mutate
  * the ref.
  */
+
+
 function useFetchTrackingRef() {
   var subscriptionRef = useRef(null);
   var isFetchingRef = useRef(false);

package/lib/relay-hooks/useFragment.js

@@ -11,27 +11,28 @@
 // flowlint ambiguous-object-type:error
 'use strict';
 
+var _require = require('./loadQuery'),
+    useTrackLoadQueryInRender = _require.useTrackLoadQueryInRender;
+
 var useFragmentNode = require('./useFragmentNode');
 
 var useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
 
-var _require = require('./loadQuery'),
-    useTrackLoadQueryInRender = _require.useTrackLoadQueryInRender;
-
 var _require2 = require('react'),
     useDebugValue = _require2.useDebugValue;
 
 var _require3 = require('relay-runtime'),
-    getFragment = _require3.getFragment;
+    getFragment = _require3.getFragment; // if the key is non-nullable, return non-nullable value
+
 
-function useFragment(fragmentInput, fragmentRef) {
+function useFragment(fragment, key) {
   // We need to use this hook in order to be able to track if
   // loadQuery was called during render
   useTrackLoadQueryInRender();
-  var fragmentNode = getFragment(fragmentInput);
+  var fragmentNode = getFragment(fragment);
   useStaticFragmentNodeWarning(fragmentNode, 'first argument of useFragment()');
 
-  var _useFragmentNode = useFragmentNode(fragmentNode, fragmentRef, 'useFragment()'),
+  var _useFragmentNode = useFragmentNode(fragmentNode, key, 'useFragment()'),
       data = _useFragmentNode.data;
 
   if (process.env.NODE_ENV !== "production") {

package/lib/relay-hooks/useFragmentNode.js

@@ -11,13 +11,11 @@
 // flowlint ambiguous-object-type:error
 'use strict';
 
-var useRelayEnvironment = require('./useRelayEnvironment');
-
-var warning = require("fbjs/lib/warning");
-
 var _require = require('./FragmentResource'),
     getFragmentResourceForEnvironment = _require.getFragmentResourceForEnvironment;
 
+var useRelayEnvironment = require('./useRelayEnvironment');
+
 var _require2 = require('react'),
     useEffect = _require2.useEffect,
     useRef = _require2.useRef,
@@ -26,6 +24,8 @@ var _require2 = require('react'),
 var _require3 = require('relay-runtime'),
     getFragmentIdentifier = _require3.getFragmentIdentifier;
 
+var warning = require("fbjs/lib/warning");
+
 function useFragmentNode(fragmentNode, fragmentRef, componentDisplayName) {
   var environment = useRelayEnvironment();
   var FragmentResource = getFragmentResourceForEnvironment(environment);

package/lib/relay-hooks/useIsOperationNodeActive.js

@@ -10,11 +10,11 @@
  */
 'use strict';
 
-var React = require('react');
+var useRelayEnvironment = require('./useRelayEnvironment');
 
 var invariant = require('invariant');
 
-var useRelayEnvironment = require('./useRelayEnvironment');
+var React = require('react');
 
 var _require = require('relay-runtime'),
     getObservableForActiveRequest = _require.__internal.getObservableForActiveRequest,

package/lib/relay-hooks/useLazyLoadQuery.js

@@ -11,15 +11,15 @@
 // flowlint ambiguous-object-type:error
 'use strict';
 
+var _require = require('./loadQuery'),
+    useTrackLoadQueryInRender = _require.useTrackLoadQueryInRender;
+
 var useLazyLoadQueryNode = require('./useLazyLoadQueryNode');
 
 var useMemoOperationDescriptor = require('./useMemoOperationDescriptor');
 
 var useRelayEnvironment = require('./useRelayEnvironment');
 
-var _require = require('./loadQuery'),
-    useTrackLoadQueryInRender = _require.useTrackLoadQueryInRender;
-
 var _require2 = require('relay-runtime'),
     fetchQuery = _require2.__internal.fetchQuery;
 

package/lib/relay-hooks/useLazyLoadQueryNode.js

@@ -13,7 +13,9 @@
 
 var ProfilerContext = require('./ProfilerContext');
 
-var React = require('react');
+var _require = require('./QueryResource'),
+    getQueryCacheIdentifier = _require.getQueryCacheIdentifier,
+    getQueryResourceForEnvironment = _require.getQueryResourceForEnvironment;
 
 var useFetchTrackingRef = require('./useFetchTrackingRef');
 
@@ -21,9 +23,7 @@ var useFragmentNode = require('./useFragmentNode');
 
 var useRelayEnvironment = require('./useRelayEnvironment');
 
-var _require = require('./QueryResource'),
-    getQueryResourceForEnvironment = _require.getQueryResourceForEnvironment,
-    getQueryCacheIdentifier = _require.getQueryCacheIdentifier;
+var React = require('react');
 
 var useContext = React.useContext,
     useEffect = React.useEffect,

package/lib/relay-hooks/useLoadMoreFunction.js

@@ -15,8 +15,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
-var invariant = require('invariant');
-
 var useFetchTrackingRef = require('./useFetchTrackingRef');
 
 var useIsMountedRef = require('./useIsMountedRef');
@@ -25,7 +23,7 @@ var useIsOperationNodeActive = require('./useIsOperationNodeActive');
 
 var useRelayEnvironment = require('./useRelayEnvironment');
 
-var warning = require("fbjs/lib/warning");
+var invariant = require('invariant');
 
 var _require = require('react'),
     useCallback = _require.useCallback,
@@ -37,8 +35,10 @@ var _require2 = require('relay-runtime'),
     fetchQuery = _require2.__internal.fetchQuery,
     createOperationDescriptor = _require2.createOperationDescriptor,
     getPaginationVariables = _require2.getPaginationVariables,
-    getValueAtPath = _require2.getValueAtPath,
-    getSelector = _require2.getSelector;
+    getSelector = _require2.getSelector,
+    getValueAtPath = _require2.getValueAtPath;
+
+var warning = require("fbjs/lib/warning");
 
 function useLoadMoreFunction(args) {
   var direction = args.direction,
@@ -124,11 +124,9 @@ function useLoadMoreFunction(args) {
     !(fragmentSelector != null && fragmentSelector.kind !== 'PluralReaderSelector') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: Expected to be able to find a non-plural fragment owner for ' + "fragment `%s` when using `%s`. If you're seeing this, " + 'this is likely a bug in Relay.', fragmentNode.name, componentDisplayName) : invariant(false) : void 0;
     var parentVariables = fragmentSelector.owner.variables;
     var fragmentVariables = fragmentSelector.variables;
-    var extraVariables = options === null || options === void 0 ? void 0 : options.UNSTABLE_extraVariables; // $FlowFixMe[cannot-spread-interface]
-
+    var extraVariables = options === null || options === void 0 ? void 0 : options.UNSTABLE_extraVariables;
     var baseVariables = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, parentVariables), fragmentVariables);
-    var paginationVariables = getPaginationVariables(direction, count, cursor, baseVariables, // $FlowFixMe[cannot-spread-interface]
-    (0, _objectSpread2["default"])({}, extraVariables), paginationMetadata); // If the query needs an identifier value ('id' or similar) and one
+    var paginationVariables = getPaginationVariables(direction, count, cursor, baseVariables, (0, _objectSpread2["default"])({}, extraVariables), paginationMetadata); // If the query needs an identifier value ('id' or similar) and one
     // was not explicitly provided, read it from the fragment data.
 
     if (identifierField != null) {

package/lib/relay-hooks/useMemoOperationDescriptor.js

@@ -11,10 +11,10 @@
 // flowlint ambiguous-object-type:error
 'use strict';
 
-var React = require('react');
-
 var useMemoVariables = require('./useMemoVariables');
 
+var React = require('react');
+
 var _require = require('relay-runtime'),
     createOperationDescriptor = _require.createOperationDescriptor,
     getRequest = _require.getRequest;

package/lib/relay-hooks/useMemoVariables.js

@@ -11,10 +11,10 @@
 // flowlint ambiguous-object-type:error
 'use strict';
 
-var React = require('react');
-
 var areEqual = require("fbjs/lib/areEqual");
 
+var React = require('react');
+
 var useMemo = React.useMemo,
     useRef = React.useRef,
     useState = React.useState;

package/lib/relay-hooks/useMutation.js

@@ -15,10 +15,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
-var React = require('react');
+var useIsMountedRef = require('./useIsMountedRef');
 
 var useRelayEnvironment = require('./useRelayEnvironment');
 
+var React = require('react');
+
 var _require = require('relay-runtime'),
     defaultCommitMutation = _require.commitMutation;
 
@@ -27,8 +29,6 @@ var useState = React.useState,
     useRef = React.useRef,
     useCallback = React.useCallback;
 
-var useIsMountedRef = require('./useIsMountedRef');
-
 function useMutation(mutation) {
   var commitMutationFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultCommitMutation;
   var environment = useRelayEnvironment();
@@ -66,16 +66,27 @@ function useMutation(mutation) {
     var disposable = commitMutationFn(environment, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, config), {}, {
       mutation: mutation,
       onCompleted: function onCompleted(response, errors) {
+        var _config$onCompleted;
+
         cleanup(disposable);
-        config.onCompleted && config.onCompleted(response, errors);
+        (_config$onCompleted = config.onCompleted) === null || _config$onCompleted === void 0 ? void 0 : _config$onCompleted.call(config, response, errors);
       },
       onError: function onError(error) {
+        var _config$onError;
+
         cleanup(disposable);
-        config.onError && config.onError(error);
+        (_config$onError = config.onError) === null || _config$onError === void 0 ? void 0 : _config$onError.call(config, error);
       },
       onUnsubscribe: function onUnsubscribe() {
+        var _config$onUnsubscribe;
+
         cleanup(disposable);
-        config.onUnsubscribe && config.onUnsubscribe();
+        (_config$onUnsubscribe = config.onUnsubscribe) === null || _config$onUnsubscribe === void 0 ? void 0 : _config$onUnsubscribe.call(config);
+      },
+      onNext: function onNext() {
+        var _config$onNext;
+
+        (_config$onNext = config.onNext) === null || _config$onNext === void 0 ? void 0 : _config$onNext.call(config);
       }
     }));
     inFlightMutationsRef.current.add(disposable);

package/lib/relay-hooks/usePreloadedQuery.js

@@ -11,7 +11,8 @@
 // flowlint ambiguous-object-type:error
 'use strict';
 
-var invariant = require('invariant');
+var _require = require('./loadQuery'),
+    useTrackLoadQueryInRender = _require.useTrackLoadQueryInRender;
 
 var useLazyLoadQueryNode = require('./useLazyLoadQueryNode');
 
@@ -19,10 +20,7 @@ var useMemoOperationDescriptor = require('./useMemoOperationDescriptor');
 
 var useRelayEnvironment = require('./useRelayEnvironment');
 
-var warning = require("fbjs/lib/warning");
-
-var _require = require('./loadQuery'),
-    useTrackLoadQueryInRender = _require.useTrackLoadQueryInRender;
+var invariant = require('invariant');
 
 var _require2 = require('react'),
     useDebugValue = _require2.useDebugValue;
@@ -32,6 +30,8 @@ var _require3 = require('relay-runtime'),
     fetchQueryDeduped = _require3$__internal.fetchQueryDeduped,
     fetchQuery = _require3$__internal.fetchQuery;
 
+var warning = require("fbjs/lib/warning");
+
 function usePreloadedQuery(gqlQuery, preloadedQuery, options) {
   // We need to use this hook in order to be able to track if
   // loadQuery was called during render