react-relay 11.0.1 → 13.0.0-rc.1

package/lib/ReactRelayPaginationContainer.js

@@ -24,40 +24,40 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
-var React = require('react');
-
-var ReactRelayContext = require('./ReactRelayContext');
-
-var ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
-
-var areEqual = require("fbjs/lib/areEqual");
-
 var buildReactRelayContainer = require('./buildReactRelayContainer');
 
 var getRootVariablesForFragments = require('./getRootVariablesForFragments');
 
-var invariant = require("fbjs/lib/invariant");
-
-var warning = require("fbjs/lib/warning");
-
 var _require = require('./ReactRelayContainerUtils'),
     getComponentName = _require.getComponentName,
     getContainerName = _require.getContainerName;
 
+var ReactRelayContext = require('./ReactRelayContext');
+
+var ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
+
 var _require2 = require('./RelayContext'),
     assertRelayContext = _require2.assertRelayContext;
 
+var areEqual = require("fbjs/lib/areEqual");
+
+var invariant = require('invariant');
+
+var React = require('react');
+
 var _require3 = require('relay-runtime'),
     ConnectionInterface = _require3.ConnectionInterface,
     Observable = _require3.Observable,
+    RelayFeatureFlags = _require3.RelayFeatureFlags,
     createFragmentSpecResolver = _require3.createFragmentSpecResolver,
     createOperationDescriptor = _require3.createOperationDescriptor,
     getDataIDsFromObject = _require3.getDataIDsFromObject,
     getRequest = _require3.getRequest,
-    getSelector = _require3.getSelector,
     getVariablesFromObject = _require3.getVariablesFromObject,
     isScalarAndEqual = _require3.isScalarAndEqual;
 
+var warning = require("fbjs/lib/warning");
+
 var FORWARD = 'forward';
 
 /**
@@ -211,8 +211,7 @@ function createGetConnectionFromProps(metadata) {
 
 function createGetFragmentVariables(metadata) {
   var countVariable = metadata.count;
-  !countVariable ? process.env.NODE_ENV !== "production" ? invariant(false, 'ReactRelayPaginationContainer: Unable to synthesize a ' + 'getFragmentVariables function.') : invariant(false) : void 0; // $FlowFixMe[cannot-spread-interface]
-
+  !countVariable ? process.env.NODE_ENV !== "production" ? invariant(false, 'ReactRelayPaginationContainer: Unable to synthesize a ' + 'getFragmentVariables function.') : invariant(false) : void 0;
   return function (prevVars, totalCount) {
     return (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, prevVars), {}, (0, _defineProperty2["default"])({}, countVariable, totalCount));
   };
@@ -354,12 +353,19 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
       _this._isARequestInFlight = false;
       _this._refetchSubscription = null;
       _this._refetchVariables = null;
-      _this._resolver = createFragmentSpecResolver(relayContext, containerName, fragments, props, rootIsQueryRenderer, _this._handleFragmentDataUpdate);
+
+      if (RelayFeatureFlags.ENABLE_CONTAINERS_SUBSCRIBE_ON_COMMIT === true) {
+        _this._resolver = createFragmentSpecResolver(relayContext, containerName, fragments, props, rootIsQueryRenderer);
+      } else {
+        _this._resolver = createFragmentSpecResolver(relayContext, containerName, fragments, props, rootIsQueryRenderer, _this._handleFragmentDataUpdate);
+      }
+
       _this.state = {
         data: _this._resolver.resolve(),
         prevContext: relayContext,
         contextForChildren: relayContext,
-        relayProp: _this._buildRelayProp(relayContext)
+        relayProp: _this._buildRelayProp(relayContext),
+        resolverGeneration: 0
       };
       _this._isUnmounted = false;
       _this._hasFetched = false;
@@ -370,6 +376,20 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
 
     _proto.componentDidMount = function componentDidMount() {
       this._isUnmounted = false;
+
+      if (RelayFeatureFlags.ENABLE_CONTAINERS_SUBSCRIBE_ON_COMMIT === true) {
+        this._subscribeToNewResolverAndRerenderIfStoreHasChanged();
+      }
+    };
+
+    _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+      if (RelayFeatureFlags.ENABLE_CONTAINERS_SUBSCRIBE_ON_COMMIT === true) {
+        if (prevState.resolverGeneration !== this.state.resolverGeneration) {
+          this._subscribeToNewResolverAndRerenderIfStoreHasChanged();
+        } else {
+          this._rerenderIfStoreHasChanged();
+        }
+      }
     }
     /**
      * When new props are received, read data for the new props and subscribe
@@ -379,6 +399,8 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
     ;
 
     _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
+      var _this2 = this;
+
       var _nextProps$__rootIsQu;
 
       var relayContext = assertRelayContext(nextProps.__relayContext);
@@ -396,11 +418,19 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
         this._cleanup(); // Child containers rely on context.relay being mutated (for gDSFP).
 
 
-        this._resolver = createFragmentSpecResolver(relayContext, containerName, fragments, nextProps, rootIsQueryRenderer, this._handleFragmentDataUpdate);
-        this.setState({
-          prevContext: relayContext,
-          contextForChildren: relayContext,
-          relayProp: this._buildRelayProp(relayContext)
+        if (RelayFeatureFlags.ENABLE_CONTAINERS_SUBSCRIBE_ON_COMMIT === true) {
+          this._resolver = createFragmentSpecResolver(relayContext, containerName, fragments, nextProps, rootIsQueryRenderer);
+        } else {
+          this._resolver = createFragmentSpecResolver(relayContext, containerName, fragments, nextProps, rootIsQueryRenderer, this._handleFragmentDataUpdate);
+        }
+
+        this.setState(function (prevState) {
+          return {
+            prevContext: relayContext,
+            contextForChildren: relayContext,
+            relayProp: _this2._buildRelayProp(relayContext),
+            resolverGeneration: prevState.resolverGeneration + 1
+          };
         });
       } else if (!this._hasFetched) {
         this._resolver.setProps(nextProps);
@@ -423,7 +453,7 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
 
     _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) {
+      if (nextState.data !== this.state.data || nextState.relayProp !== this.state.relayProp || nextState.resolverGeneration !== this.state.resolverGeneration) {
         return true;
       } // Otherwise, for convenience short-circuit if all non-Relay props
       // are scalar and equal
@@ -456,6 +486,37 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
         refetchConnection: this._refetchConnection,
         environment: relayContext.environment
       };
+    };
+
+    _proto._rerenderIfStoreHasChanged = function _rerenderIfStoreHasChanged() {
+      var data = this.state.data; // External values could change between render and commit.
+      // Check for this case, even though it requires an extra store read.
+
+      var maybeNewData = this._resolver.resolve();
+
+      if (data !== maybeNewData) {
+        this.setState({
+          data: maybeNewData
+        });
+      }
+    };
+
+    _proto._subscribeToNewResolverAndRerenderIfStoreHasChanged = function _subscribeToNewResolverAndRerenderIfStoreHasChanged() {
+      var data = this.state.data;
+
+      var maybeNewData = this._resolver.resolve(); // Event listeners are only safe to add during the commit phase,
+      // So they won't leak if render is interrupted or errors.
+
+
+      this._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.
+
+
+      if (data !== maybeNewData) {
+        this.setState({
+          data: maybeNewData
+        });
+      }
     }
     /**
      * Render new data for the existing props/context.
@@ -525,7 +586,7 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
     };
 
     _proto._fetchPage = function _fetchPage(paginatingVariables, observer, options) {
-      var _this2 = this;
+      var _this3 = this;
 
       var _assertRelayContext = assertRelayContext(this.props.__relayContext),
           environment = _assertRelayContext.environment;
@@ -537,17 +598,14 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
           restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props2, ["componentRef", "__relayContext", "__rootIsQueryRenderer"]);
       var props = (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, restProps), this.state.data);
       var fragmentVariables;
-      var rootVariables = getRootVariablesForFragments(fragments, restProps); // $FlowFixMe[cannot-spread-interface]
-
-      fragmentVariables = getVariablesFromObject(fragments, restProps); // $FlowFixMe[cannot-spread-interface]
-
+      var rootVariables = getRootVariablesForFragments(fragments, restProps);
+      fragmentVariables = getVariablesFromObject(fragments, restProps);
       fragmentVariables = (0, _objectSpread3["default"])((0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, rootVariables), fragmentVariables), this._refetchVariables);
       var fetchVariables = connectionConfig.getVariables(props, {
         count: paginatingVariables.count,
         cursor: paginatingVariables.cursor
       }, fragmentVariables);
-      !(typeof fetchVariables === 'object' && fetchVariables !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'ReactRelayPaginationContainer: Expected `getVariables()` to ' + 'return an object, got `%s` in `%s`.', fetchVariables, componentName) : invariant(false) : void 0; // $FlowFixMe[cannot-spread-interface]
-
+      !(typeof fetchVariables === 'object' && fetchVariables !== null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'ReactRelayPaginationContainer: Expected `getVariables()` to ' + 'return an object, got `%s` in `%s`.', fetchVariables, componentName) : invariant(false) : void 0;
       fetchVariables = (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, fetchVariables), this._refetchVariables);
       fragmentVariables = (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, fetchVariables), fragmentVariables);
       var cacheConfig = options ? {
@@ -569,11 +627,11 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
       this._hasFetched = true;
 
       var onNext = function onNext(payload, complete) {
-        var prevData = _this2._resolver.resolve();
+        var prevData = _this3._resolver.resolve();
 
-        _this2._resolver.setVariables(getFragmentVariables(fragmentVariables, paginatingVariables.totalCount), operation.request.node);
+        _this3._resolver.setVariables(getFragmentVariables(fragmentVariables, paginatingVariables.totalCount), operation.request.node);
 
-        var nextData = _this2._resolver.resolve(); // Workaround slightly different handling for connection in different
+        var nextData = _this3._resolver.resolve(); // Workaround slightly different handling for connection in different
         // core implementations:
         // - Classic core requires the count to be explicitly incremented
         // - Modern core automatically appends new items, updating the count
@@ -585,10 +643,10 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
 
 
         if (!areEqual(prevData, nextData)) {
-          _this2.setState({
+          _this3.setState({
             data: nextData,
             contextForChildren: {
-              environment: _this2.props.__relayContext.environment
+              environment: _this3.props.__relayContext.environment
             }
           }, complete);
         } else {
@@ -597,9 +655,9 @@ function createContainerWithFragments(Component, fragments, connectionConfig) {
       };
 
       var cleanup = function cleanup() {
-        if (_this2._refetchSubscription === refetchSubscription) {
-          _this2._refetchSubscription = null;
-          _this2._isARequestInFlight = false;
+        if (_this3._refetchSubscription === refetchSubscription) {
+          _this3._refetchSubscription = null;
+          _this3._isARequestInFlight = false;
         }
       };
 

package/lib/ReactRelayQueryFetcher.js

@@ -14,12 +14,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var invariant = require("fbjs/lib/invariant");
+var invariant = require('invariant');
 
 var _require = require('relay-runtime'),
+    fetchQuery = _require.__internal.fetchQuery,
     createOperationDescriptor = _require.createOperationDescriptor,
-    isRelayModernEnvironment = _require.isRelayModernEnvironment,
-    fetchQuery = _require.__internal.fetchQuery;
+    isRelayModernEnvironment = _require.isRelayModernEnvironment;
 
 var ReactRelayQueryFetcher = /*#__PURE__*/function () {
   function ReactRelayQueryFetcher(args) {

package/lib/ReactRelayQueryRenderer.js

@@ -14,9 +14,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 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 React = require('react');
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var ReactRelayContext = require('./ReactRelayContext');
 
@@ -26,7 +28,10 @@ var ReactRelayQueryRendererContext = require('./ReactRelayQueryRendererContext')
 
 var areEqual = require("fbjs/lib/areEqual");
 
+var React = require('react');
+
 var _require = require('relay-runtime'),
+    RelayFeatureFlags = _require.RelayFeatureFlags,
     createOperationDescriptor = _require.createOperationDescriptor,
     deepFreeze = _require.deepFreeze,
     getRequest = _require.getRequest;
@@ -64,6 +69,29 @@ var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
     // that reason, we define them as null initially and fill them in after
     // mounting to avoid leaking memory.
 
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_handleDataChange", function (params) {
+      var error = params.error == null ? null : params.error;
+      var snapshot = params.snapshot == null ? null : params.snapshot;
+
+      _this.setState(function (prevState) {
+        var prevRequestCacheKey = prevState.requestCacheKey;
+
+        if (prevRequestCacheKey) {
+          delete requestCache[prevRequestCacheKey];
+        } // Don't update state if nothing has changed.
+
+
+        if (snapshot === prevState.snapshot && error === prevState.error) {
+          return null;
+        }
+
+        return {
+          renderProps: getRenderProps(error, snapshot, prevState.queryFetcher, prevState.retryCallbacks),
+          snapshot: snapshot,
+          requestCacheKey: null
+        };
+      });
+    });
     var retryCallbacks = {
       handleDataChange: null,
       handleRetryAfterError: null
@@ -80,6 +108,7 @@ var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
       queryFetcher = new ReactRelayQueryFetcher();
     }
 
+    _this._maybeHiddenOrFastRefresh = false;
     _this.state = (0, _objectSpread2["default"])({
       prevPropsEnvironment: props.environment,
       prevPropsVariables: props.variables,
@@ -92,27 +121,7 @@ var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
 
   ReactRelayQueryRenderer.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
     if (prevState.prevQuery !== nextProps.query || prevState.prevPropsEnvironment !== nextProps.environment || !areEqual(prevState.prevPropsVariables, nextProps.variables)) {
-      var query = nextProps.query;
-      var prevSelectionReferences = prevState.queryFetcher.getSelectionReferences();
-      prevState.queryFetcher.disposeRequest();
-      var queryFetcher;
-
-      if (query) {
-        var request = getRequest(query);
-        var requestCacheKey = getRequestCacheKey(request.params, nextProps.variables);
-        queryFetcher = requestCache[requestCacheKey] ? requestCache[requestCacheKey].queryFetcher : new ReactRelayQueryFetcher(prevSelectionReferences);
-      } else {
-        queryFetcher = new ReactRelayQueryFetcher(prevSelectionReferences);
-      }
-
-      return (0, _objectSpread2["default"])({
-        prevQuery: nextProps.query,
-        prevPropsEnvironment: nextProps.environment,
-        prevPropsVariables: nextProps.variables,
-        queryFetcher: queryFetcher
-      }, fetchQueryAndComputeStateFromProps(nextProps, queryFetcher, prevState.retryCallbacks // passing no requestCacheKey will cause it to be recalculated internally
-      // and we want the updated requestCacheKey, since variables may have changed
-      ));
+      return resetQueryStateForUpdate(nextProps, prevState);
     }
 
     return null;
@@ -123,38 +132,31 @@ var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
   _proto.componentDidMount = function componentDidMount() {
     var _this2 = this;
 
+    if (RelayFeatureFlags.ENABLE_QUERY_RENDERER_OFFSCREEN_SUPPORT === true && this._maybeHiddenOrFastRefresh === true) {
+      // This block only runs if the component has previously "unmounted"
+      // due to it being hidden by the Offscreen API, or during fast refresh.
+      // At this point, the current cached resource will have been disposed
+      // by the previous cleanup, so instead of attempting to
+      // do our regular commit setup, so that the query is re-evaluated
+      // (and potentially cause a refetch).
+      this._maybeHiddenOrFastRefresh = false; // eslint-disable-next-line react/no-did-mount-set-state
+
+      this.setState(function (prevState) {
+        return resetQueryStateForUpdate(_this2.props, prevState);
+      });
+      return;
+    }
+
     var _this$state = this.state,
         retryCallbacks = _this$state.retryCallbacks,
         queryFetcher = _this$state.queryFetcher,
-        requestCacheKey = _this$state.requestCacheKey;
+        requestCacheKey = _this$state.requestCacheKey; // We don't need to cache the request after the component commits
 
     if (requestCacheKey) {
       delete requestCache[requestCacheKey];
     }
 
-    retryCallbacks.handleDataChange = function (params) {
-      var error = params.error == null ? null : params.error;
-      var snapshot = params.snapshot == null ? null : params.snapshot;
-
-      _this2.setState(function (prevState) {
-        var prevRequestCacheKey = prevState.requestCacheKey;
-
-        if (prevRequestCacheKey) {
-          delete requestCache[prevRequestCacheKey];
-        } // Don't update state if nothing has changed.
-
-
-        if (snapshot === prevState.snapshot && error === prevState.error) {
-          return null;
-        }
-
-        return {
-          renderProps: getRenderProps(error, snapshot, prevState.queryFetcher, prevState.retryCallbacks),
-          snapshot: snapshot,
-          requestCacheKey: null
-        };
-      });
-    };
+    retryCallbacks.handleDataChange = this._handleDataChange;
 
     retryCallbacks.handleRetryAfterError = function (error) {
       return _this2.setState(function (prevState) {
@@ -174,23 +176,30 @@ var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
 
 
     if (this.props.query) {
-      queryFetcher.setOnDataChange(retryCallbacks.handleDataChange);
+      queryFetcher.setOnDataChange(this._handleDataChange);
     }
   };
 
-  _proto.componentDidUpdate = function componentDidUpdate() {
+  _proto.componentDidUpdate = function componentDidUpdate(_prevProps, prevState) {
     // We don't need to cache the request after the component commits
-    var requestCacheKey = this.state.requestCacheKey;
+    var _this$state2 = this.state,
+        queryFetcher = _this$state2.queryFetcher,
+        requestCacheKey = _this$state2.requestCacheKey;
 
     if (requestCacheKey) {
       delete requestCache[requestCacheKey]; // HACK
 
       delete this.state.requestCacheKey;
     }
+
+    if (this.props.query && queryFetcher !== prevState.queryFetcher) {
+      queryFetcher.setOnDataChange(this._handleDataChange);
+    }
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
     this.state.queryFetcher.dispose();
+    this._maybeHiddenOrFastRefresh = true;
   };
 
   _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
@@ -198,9 +207,9 @@ var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.render = function render() {
-    var _this$state2 = this.state,
-        renderProps = _this$state2.renderProps,
-        relayContext = _this$state2.relayContext; // Note that the root fragment results in `renderProps.props` is already
+    var _this$state3 = this.state,
+        renderProps = _this$state3.renderProps,
+        relayContext = _this$state3.relayContext; // Note that the root fragment results in `renderProps.props` is already
     // frozen by the store; this call is to freeze the renderProps object and
     // error property if set.
 
@@ -263,6 +272,30 @@ function getRequestCacheKey(request, variables) {
   });
 }
 
+function resetQueryStateForUpdate(props, prevState) {
+  var query = props.query;
+  var prevSelectionReferences = prevState.queryFetcher.getSelectionReferences();
+  prevState.queryFetcher.disposeRequest();
+  var queryFetcher;
+
+  if (query) {
+    var request = getRequest(query);
+    var requestCacheKey = getRequestCacheKey(request.params, props.variables);
+    queryFetcher = requestCache[requestCacheKey] ? requestCache[requestCacheKey].queryFetcher : new ReactRelayQueryFetcher(prevSelectionReferences);
+  } else {
+    queryFetcher = new ReactRelayQueryFetcher(prevSelectionReferences);
+  }
+
+  return (0, _objectSpread2["default"])({
+    prevQuery: props.query,
+    prevPropsEnvironment: props.environment,
+    prevPropsVariables: props.variables,
+    queryFetcher: queryFetcher
+  }, fetchQueryAndComputeStateFromProps(props, queryFetcher, prevState.retryCallbacks // passing no requestCacheKey will cause it to be recalculated internally
+  // and we want the updated requestCacheKey, since variables may have changed
+  ));
+}
+
 function fetchQueryAndComputeStateFromProps(props, queryFetcher, retryCallbacks, requestCacheKey) {
   var environment = props.environment,
       query = props.query,
@@ -306,7 +339,7 @@ function fetchQueryAndComputeStateFromProps(props, queryFetcher, retryCallbacks,
       var storeSnapshot = queryFetcher.lookupInStore(genericEnvironment, operation, props.fetchPolicy);
       var querySnapshot = queryFetcher.fetch({
         environment: genericEnvironment,
-        onDataChange: retryCallbacks.handleDataChange,
+        onDataChange: null,
         operation: operation
       }); // Use network data first, since it may be fresher
 

package/lib/ReactRelayRefetchContainer.js

@@ -24,36 +24,35 @@ var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inh
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var React = require('react');
-
-var ReactRelayContext = require('./ReactRelayContext');
-
-var ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
-
-var areEqual = require("fbjs/lib/areEqual");
-
 var buildReactRelayContainer = require('./buildReactRelayContainer');
 
 var getRootVariablesForFragments = require('./getRootVariablesForFragments');
 
-var warning = require("fbjs/lib/warning");
-
 var _require = require('./ReactRelayContainerUtils'),
     getContainerName = _require.getContainerName;
 
+var ReactRelayContext = require('./ReactRelayContext');
+
+var ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
+
 var _require2 = require('./RelayContext'),
     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,
-    getSelector = _require3.getSelector,
     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
@@ -94,11 +93,9 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
             environment = _assertRelayContext.environment;
 
         var rootVariables = getRootVariablesForFragments(fragments, _this.props);
-        var fetchVariables = typeof refetchVariables === 'function' ? refetchVariables(_this._getFragmentVariables()) : refetchVariables; // $FlowFixMe[cannot-spread-interface]
-
+        var fetchVariables = typeof refetchVariables === 'function' ? refetchVariables(_this._getFragmentVariables()) : refetchVariables;
         fetchVariables = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, rootVariables), fetchVariables);
-        var fragmentVariables = renderVariables ? // $FlowFixMe[cannot-spread-interface]
-        (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, fetchVariables), renderVariables) : fetchVariables;
+        var fragmentVariables = renderVariables ? (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, fetchVariables), renderVariables) : fetchVariables;
         var cacheConfig = options ? {
           force: !!options.force
         } : undefined;
@@ -215,7 +212,7 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
     _proto.componentDidMount = function componentDidMount() {
       this._isUnmounted = false;
 
-      this._subscribeToNewResolver();
+      this._subscribeToNewResolverAndRerenderIfStoreHasChanged();
     };
 
     _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
@@ -229,7 +226,9 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
         this._queryFetcher && this._queryFetcher.dispose();
         this._refetchSubscription && this._refetchSubscription.unsubscribe();
 
-        this._subscribeToNewResolver();
+        this._subscribeToNewResolverAndRerenderIfStoreHasChanged();
+      } else {
+        this._rerenderIfStoreHasChanged();
       }
     }
     /**
@@ -321,17 +320,31 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
       return false;
     };
 
-    _proto._subscribeToNewResolver = function _subscribeToNewResolver() {
+    _proto._rerenderIfStoreHasChanged = function _rerenderIfStoreHasChanged() {
       var _this$state = this.state,
           data = _this$state.data,
-          resolver = _this$state.resolver; // 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._handleFragmentDataUpdate); // External values could change between render and commit.
+          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,
+      // 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.
+
       if (data !== maybeNewData) {
         this.setState({
           data: maybeNewData
@@ -361,9 +374,9 @@ function createContainerWithFragments(Component, fragments, taggedNode) {
           __relayContext = _this$props.__relayContext,
           __rootIsQueryRenderer = _this$props.__rootIsQueryRenderer,
           props = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["componentRef", "__relayContext", "__rootIsQueryRenderer"]);
-      var _this$state2 = this.state,
-          relayProp = _this$state2.relayProp,
-          contextForChildren = _this$state2.contextForChildren;
+      var _this$state3 = this.state,
+          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, {