react-relay 14.1.0 → 16.0.0

package/lib/ReactRelayRefetchContainer.js

@@ -1,85 +1,46 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- * @format
- */
 '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;
-
   var containerName = getContainerName(Component);
   return _class = /*#__PURE__*/function (_React$Component) {
     (0, _inheritsLoose2["default"])(_class, _React$Component);
-
     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.
-            // Otherwise we should ignore it.
-            resolverFromThisUpdate === updatedState.resolver ? {
-              data: updatedState.resolver.resolve()
-            } : null
-          );
+          return resolverFromThisUpdate === updatedState.resolver ? {
+            data: updatedState.resolver.resolve()
+          } : null;
         });
       });
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_refetch", function (refetchVariables, renderVariables, observerOrCallback, options) {
@@ -89,10 +50,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);
@@ -100,32 +59,21 @@ 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
           next: observerOrCallback,
           error: observerOrCallback
         } : observerOrCallback || {};
         var query = getRequest(taggedNode);
-        var operation = createOperationDescriptor(query, fetchVariables, cacheConfig); // TODO: T26288752 find a better way
-
-        _this.state.localVariables = fetchVariables; // Cancel any previously running refetch.
-
-        _this._refetchSubscription && _this._refetchSubscription.unsubscribe(); // Declare refetchSubscription before assigning it in .start(), since
-        // synchronous completion may call callbacks .subscribe() returns.
-
+        var operation = createOperationDescriptor(query, fetchVariables, cacheConfig);
+        _this.state.localVariables = fetchVariables;
+        _this._refetchSubscription && _this._refetchSubscription.unsubscribe();
         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(),
@@ -137,20 +85,16 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
             observer.next && observer.next();
             observer.complete && observer.complete();
           });
-
           return {
             dispose: function dispose() {}
           };
         }
-
         _this._getQueryFetcher().execute({
           environment: environment,
           operation: operation,
-          // TODO (T26430099): Cleanup old references
           preservePreviousReferences: true
         }).mergeMap(function (response) {
           _this.state.resolver.setVariables(fragmentVariables, operation.request.node);
-
           return Observable.create(function (sink) {
             return _this.setState(function (latestState) {
               return {
@@ -165,8 +109,6 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
             });
           });
         })["finally"](function () {
-          // Finalizing a refetch should only clear this._refetchSubscription
-          // if the finizing subscription is the most recent call.
           if (_this._refetchSubscription === refetchSubscription) {
             _this._refetchSubscription = null;
           }
@@ -176,7 +118,6 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
             observer.start && observer.start(subscription);
           }
         }));
-
         return {
           dispose: function dispose() {
             refetchSubscription && refetchSubscription.unsubscribe();
@@ -185,11 +126,7 @@ 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.
-      // 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().
-
+      _this._refetchSubscription = null;
       var resolver = createFragmentSpecResolver(relayContext, containerName, fragments, props, rootIsQueryRenderer);
       _this.state = {
         data: resolver.resolve(),
@@ -203,42 +140,23 @@ 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:
-      // - Existing references are on the old environment.
-      // - Existing references are based on old variables.
-      // - Pending fetches are for the previous records.
       if (this.state.resolver !== prevState.resolver) {
         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;
       var relayContext = assertRelayContext(nextProps.__relayContext);
       var rootIsQueryRenderer = (_nextProps$__rootIsQu = nextProps.__rootIsQueryRenderer) !== null && _nextProps$__rootIsQu !== void 0 ? _nextProps$__rootIsQu : false;
@@ -246,17 +164,8 @@ 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
-      // 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.
-
+      var resolver = prevState.resolver;
       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,
-        // In which case the subscription would cause a leak.
-        // We will add the subscription in componentDidUpdate().
         resolver = createFragmentSpecResolver(relayContext, containerName, fragments, nextProps, rootIsQueryRenderer);
         return {
           data: resolver.resolve(),
@@ -270,39 +179,28 @@ 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
-      // are scalar and equal
-
-
+      }
       var keys = Object.keys(nextProps);
-
       for (var ii = 0; ii < keys.length; ii++) {
         var key = keys[ii];
-
         if (key === '__relayContext') {
           if (this.state.prevPropsContext.environment !== nextState.prevPropsContext.environment) {
             return true;
@@ -313,67 +211,49 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
           }
         }
       }
-
       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.
-      // Check for this case, even though it requires an extra store read.
-
+        data = _this$state.data,
+        resolver = _this$state.resolver;
       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,
-      // So they won't leak if render is interrupted or errors.
-
-      resolver.setCallback(this.props, this._handleFragmentDataUpdate); // External values could change between render and commit.
-      // Check for this case, even though it requires an extra store read.
-
+        data = _this$state2.data,
+        resolver = _this$state2.resolver;
+      var maybeNewData = resolver.resolve();
+      resolver.setCallback(this.props, this._handleFragmentDataUpdate);
       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;
     };
-
     _proto.render = function render() {
       var _this$props = this.props,
-          componentRef = _this$props.componentRef,
-          __relayContext = _this$props.__relayContext,
-          __rootIsQueryRenderer = _this$props.__rootIsQueryRenderer,
-          props = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, _excluded);
+        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, {
@@ -381,33 +261,20 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
         relay: relayProp
       })));
     };
-
     return _class;
   }(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
- * extraction of the environment-specific version of fragments in the
- * `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
 };