react-relay 14.0.0 → 15.0.0

package/lib/ReactRelayRefetchContainer.js

@@ -6,74 +6,58 @@
  *
  * 
  * @format
+ * @oncall relay
  */
-// flowlint ambiguous-object-type:error
-'use strict';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+'use strict';
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
+var _excluded = ["componentRef", "__relayContext", "__rootIsQueryRenderer"];
 var buildReactRelayContainer = require('./buildReactRelayContainer');
-
 var getRootVariablesForFragments = require('./getRootVariablesForFragments');
-
 var _require = require('./ReactRelayContainerUtils'),
-    getContainerName = _require.getContainerName;
-
+  getContainerName = _require.getContainerName;
 var ReactRelayContext = require('./ReactRelayContext');
-
 var ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
-
 var _require2 = require('./RelayContext'),
-    assertRelayContext = _require2.assertRelayContext;
-
+  assertRelayContext = _require2.assertRelayContext;
 var areEqual = require("fbjs/lib/areEqual");
-
 var React = require('react');
-
 var _require3 = require('relay-runtime'),
-    Observable = _require3.Observable,
-    createFragmentSpecResolver = _require3.createFragmentSpecResolver,
-    createOperationDescriptor = _require3.createOperationDescriptor,
-    getDataIDsFromObject = _require3.getDataIDsFromObject,
-    getRequest = _require3.getRequest,
-    getVariablesFromObject = _require3.getVariablesFromObject,
-    isScalarAndEqual = _require3.isScalarAndEqual;
-
+  Observable = _require3.Observable,
+  createFragmentSpecResolver = _require3.createFragmentSpecResolver,
+  createOperationDescriptor = _require3.createOperationDescriptor,
+  getDataIDsFromObject = _require3.getDataIDsFromObject,
+  getRequest = _require3.getRequest,
+  getVariablesFromObject = _require3.getVariablesFromObject,
+  isScalarAndEqual = _require3.isScalarAndEqual;
 var warning = require("fbjs/lib/warning");
-
 /**
  * Composes a React component class, returning a new class that intercepts
  * props, resolving them with the provided fragments and subscribing for
  * updates.
  */
 function createContainerWithFragments(Component, fragments, taggedNode) {
-  var _class, _temp;
-
+  var _class;
   var containerName = getContainerName(Component);
-  return _temp = _class = /*#__PURE__*/function (_React$Component) {
+  return _class = /*#__PURE__*/function (_React$Component) {
     (0, _inheritsLoose2["default"])(_class, _React$Component);
+    // $FlowFixMe[missing-local-annot]
 
     function _class(props) {
       var _props$__rootIsQueryR, _this;
-
       _this = _React$Component.call(this, props) || this;
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handleFragmentDataUpdate", function () {
         var resolverFromThisUpdate = _this.state.resolver;
-
         _this.setState(function (updatedState) {
-          return (// If this event belongs to the current data source, update.
+          return (
+            // If this event belongs to the current data source, update.
             // Otherwise we should ignore it.
             resolverFromThisUpdate === updatedState.resolver ? {
               data: updatedState.resolver.resolve()
@@ -88,10 +72,8 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
             dispose: function dispose() {}
           };
         }
-
         var _assertRelayContext = assertRelayContext(_this.props.__relayContext),
-            environment = _assertRelayContext.environment;
-
+          environment = _assertRelayContext.environment;
         var rootVariables = getRootVariablesForFragments(fragments, _this.props);
         var fetchVariables = typeof refetchVariables === 'function' ? refetchVariables(_this._getFragmentVariables()) : refetchVariables;
         fetchVariables = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, rootVariables), fetchVariables);
@@ -99,11 +81,9 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
         var cacheConfig = options ? {
           force: !!options.force
         } : undefined;
-
         if (cacheConfig != null && (options === null || options === void 0 ? void 0 : options.metadata) != null) {
           cacheConfig.metadata = options === null || options === void 0 ? void 0 : options.metadata;
         }
-
         var observer = typeof observerOrCallback === 'function' ? {
           // callback is not exectued on complete or unsubscribe
           // for backward compatibility
@@ -111,24 +91,20 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
           error: observerOrCallback
         } : observerOrCallback || {};
         var query = getRequest(taggedNode);
-        var operation = createOperationDescriptor(query, fetchVariables, cacheConfig); // TODO: T26288752 find a better way
-
-        /* eslint-disable lint/react-state-props-mutation */
+        var operation = createOperationDescriptor(query, fetchVariables, cacheConfig);
 
+        // TODO: T26288752 find a better way
         _this.state.localVariables = fetchVariables;
-        /* eslint-enable lint/react-state-props-mutation */
+
         // Cancel any previously running refetch.
+        _this._refetchSubscription && _this._refetchSubscription.unsubscribe();
 
-        _this._refetchSubscription && _this._refetchSubscription.unsubscribe(); // Declare refetchSubscription before assigning it in .start(), since
+        // Declare refetchSubscription before assigning it in .start(), since
         // synchronous completion may call callbacks .subscribe() returns.
-
         var refetchSubscription;
-
         var storeSnapshot = _this._getQueryFetcher().lookupInStore(environment, operation, options === null || options === void 0 ? void 0 : options.fetchPolicy);
-
         if (storeSnapshot != null) {
           _this.state.resolver.setVariables(fragmentVariables, operation.request.node);
-
           _this.setState(function (latestState) {
             return {
               data: latestState.resolver.resolve(),
@@ -140,12 +116,10 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
             observer.next && observer.next();
             observer.complete && observer.complete();
           });
-
           return {
             dispose: function dispose() {}
           };
         }
-
         _this._getQueryFetcher().execute({
           environment: environment,
           operation: operation,
@@ -153,7 +127,6 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
           preservePreviousReferences: true
         }).mergeMap(function (response) {
           _this.state.resolver.setVariables(fragmentVariables, operation.request.node);
-
           return Observable.create(function (sink) {
             return _this.setState(function (latestState) {
               return {
@@ -179,7 +152,6 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
             observer.start && observer.start(subscription);
           }
         }));
-
         return {
           dispose: function dispose() {
             refetchSubscription && refetchSubscription.unsubscribe();
@@ -188,11 +160,11 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
       });
       var relayContext = assertRelayContext(props.__relayContext);
       var rootIsQueryRenderer = (_props$__rootIsQueryR = props.__rootIsQueryRenderer) !== null && _props$__rootIsQueryR !== void 0 ? _props$__rootIsQueryR : false;
-      _this._refetchSubscription = null; // Do not provide a subscription/callback here.
+      _this._refetchSubscription = null;
+      // Do not provide a subscription/callback here.
       // It is possible for this render to be interrupted or aborted,
       // In which case the subscription would cause a leak.
       // We will add the subscription in componentDidMount().
-
       var resolver = createFragmentSpecResolver(relayContext, containerName, fragments, props, rootIsQueryRenderer);
       _this.state = {
         data: resolver.resolve(),
@@ -206,15 +178,11 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
       _this._isUnmounted = false;
       return _this;
     }
-
     var _proto = _class.prototype;
-
     _proto.componentDidMount = function componentDidMount() {
       this._isUnmounted = false;
-
       this._subscribeToNewResolverAndRerenderIfStoreHasChanged();
     };
-
     _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
       // If the environment has changed or props point to new records then
       // previously fetched data and any pending fetches no longer apply:
@@ -225,21 +193,18 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
         prevState.resolver.dispose();
         this._queryFetcher && this._queryFetcher.dispose();
         this._refetchSubscription && this._refetchSubscription.unsubscribe();
-
         this._subscribeToNewResolverAndRerenderIfStoreHasChanged();
       } else {
         this._rerenderIfStoreHasChanged();
       }
     }
+
     /**
      * When new props are received, read data for the new props and add it to
      * state. Props may be the same in which case previous data can be reused.
-     */
-    ;
-
+     */;
     _class.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
       var _nextProps$__rootIsQu;
-
       // Any props change could impact the query, so we mirror props in state.
       // This is an unusual pattern, but necessary for this container usecase.
       var prevProps = prevState.prevProps;
@@ -249,12 +214,13 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
       var nextIDs = getDataIDsFromObject(fragments, nextProps);
       var prevRootVariables = getRootVariablesForFragments(fragments, prevProps);
       var nextRootVariables = getRootVariablesForFragments(fragments, nextProps);
-      var resolver = prevState.resolver; // If the environment has changed or props point to new records then
+      var resolver = prevState.resolver;
+
+      // If the environment has changed or props point to new records then
       // previously fetched data and any pending fetches no longer apply:
       // - Existing references are on the old environment.
       // - Existing references are based on old variables.
       // - Pending fetches are for the previous records.
-
       if (prevState.prevPropsContext.environment !== relayContext.environment || !areEqual(prevRootVariables, nextRootVariables) || !areEqual(prevIDs, nextIDs)) {
         // Do not provide a subscription/callback here.
         // It is possible for this render to be interrupted or aborted,
@@ -273,110 +239,98 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
       } else if (!prevState.localVariables) {
         resolver.setProps(nextProps);
       }
-
       var data = resolver.resolve();
-
       if (data !== prevState.data) {
         return {
           data: data,
           prevProps: nextProps
         };
       }
-
       return null;
     };
-
     _proto.componentWillUnmount = function componentWillUnmount() {
       this._isUnmounted = true;
       this.state.resolver.dispose();
       this._queryFetcher && this._queryFetcher.dispose();
       this._refetchSubscription && this._refetchSubscription.unsubscribe();
     };
-
     _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
       // Short-circuit if any Relay-related data has changed
       if (nextState.data !== this.state.data || nextState.relayProp !== this.state.relayProp) {
         return true;
-      } // Otherwise, for convenience short-circuit if all non-Relay props
+      }
+      // Otherwise, for convenience short-circuit if all non-Relay props
       // are scalar and equal
-
-
       var keys = Object.keys(nextProps);
-
       for (var ii = 0; ii < keys.length; ii++) {
-        var _key = keys[ii];
-
-        if (_key === '__relayContext') {
+        var key = keys[ii];
+        if (key === '__relayContext') {
           if (this.state.prevPropsContext.environment !== nextState.prevPropsContext.environment) {
             return true;
           }
         } else {
-          if (!fragments.hasOwnProperty(_key) && !isScalarAndEqual(nextProps[_key], this.props[_key])) {
+          if (!fragments.hasOwnProperty(key) && !isScalarAndEqual(nextProps[key], this.props[key])) {
             return true;
           }
         }
       }
-
       return false;
     };
-
     _proto._rerenderIfStoreHasChanged = function _rerenderIfStoreHasChanged() {
       var _this$state = this.state,
-          data = _this$state.data,
-          resolver = _this$state.resolver; // External values could change between render and commit.
+        data = _this$state.data,
+        resolver = _this$state.resolver;
+      // External values could change between render and commit.
       // Check for this case, even though it requires an extra store read.
-
       var maybeNewData = resolver.resolve();
-
       if (data !== maybeNewData) {
         this.setState({
           data: maybeNewData
         });
       }
     };
-
     _proto._subscribeToNewResolverAndRerenderIfStoreHasChanged = function _subscribeToNewResolverAndRerenderIfStoreHasChanged() {
       var _this$state2 = this.state,
-          data = _this$state2.data,
-          resolver = _this$state2.resolver;
-      var maybeNewData = resolver.resolve(); // Event listeners are only safe to add during the commit phase,
+        data = _this$state2.data,
+        resolver = _this$state2.resolver;
+      var maybeNewData = resolver.resolve();
+
+      // Event listeners are only safe to add during the commit phase,
       // So they won't leak if render is interrupted or errors.
+      resolver.setCallback(this.props, this._handleFragmentDataUpdate);
 
-      resolver.setCallback(this.props, this._handleFragmentDataUpdate); // External values could change between render and commit.
+      // External values could change between render and commit.
       // Check for this case, even though it requires an extra store read.
-
       if (data !== maybeNewData) {
         this.setState({
           data: maybeNewData
         });
       }
     }
+
     /**
      * Render new data for the existing props/context.
-     */
-    ;
-
+     */;
     _proto._getFragmentVariables = function _getFragmentVariables() {
       return getVariablesFromObject(fragments, this.props);
     };
-
     _proto._getQueryFetcher = function _getQueryFetcher() {
       if (!this._queryFetcher) {
         this._queryFetcher = new ReactRelayQueryFetcher();
       }
-
       return this._queryFetcher;
     };
-
+    // $FlowFixMe[missing-local-annot]
     _proto.render = function render() {
+      // eslint-disable-next-line no-unused-vars
       var _this$props = this.props,
-          componentRef = _this$props.componentRef,
-          __relayContext = _this$props.__relayContext,
-          __rootIsQueryRenderer = _this$props.__rootIsQueryRenderer,
-          props = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["componentRef", "__relayContext", "__rootIsQueryRenderer"]);
+        componentRef = _this$props.componentRef,
+        __relayContext = _this$props.__relayContext,
+        __rootIsQueryRenderer = _this$props.__rootIsQueryRenderer,
+        props = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, _excluded);
       var _this$state3 = this.state,
-          relayProp = _this$state3.relayProp,
-          contextForChildren = _this$state3.contextForChildren;
+        relayProp = _this$state3.relayProp,
+        contextForChildren = _this$state3.contextForChildren;
       return /*#__PURE__*/React.createElement(ReactRelayContext.Provider, {
         value: contextForChildren
       }, /*#__PURE__*/React.createElement(Component, (0, _extends2["default"])({}, props, this.state.data, {
@@ -384,17 +338,16 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
         relay: relayProp
       })));
     };
-
     return _class;
-  }(React.Component), (0, _defineProperty2["default"])(_class, "displayName", containerName), _temp;
+  }(React.Component), (0, _defineProperty2["default"])(_class, "displayName", containerName), _class;
 }
-
 function getRelayProp(environment, refetch) {
   return {
     environment: environment,
     refetch: refetch
   };
 }
+
 /**
  * Wrap the basic `createContainer()` function with logic to adapt to the
  * `context.relay.environment` in which it is rendered. Specifically, the
@@ -402,15 +355,12 @@ function getRelayProp(environment, refetch) {
  * `fragmentSpec` is memoized once per environment, rather than once per
  * instance of the container constructed/rendered.
  */
-
-
 function createContainer(Component, fragmentSpec, taggedNode) {
   // $FlowFixMe[incompatible-return]
   return buildReactRelayContainer(Component, fragmentSpec, function (ComponentClass, fragments) {
     return createContainerWithFragments(ComponentClass, fragments, taggedNode);
   });
 }
-
 module.exports = {
   createContainer: createContainer
 };