react-relay 14.0.0 → 15.0.0

package/lib/ReactRelayQueryRenderer.js

@@ -6,35 +6,27 @@
  *
  * 
  * @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 _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 ReactRelayContext = require('./ReactRelayContext');
-
 var ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
-
 var ReactRelayQueryRendererContext = require('./ReactRelayQueryRendererContext');
-
 var areEqual = require("fbjs/lib/areEqual");
-
 var React = require('react');
-
 var _require = require('relay-runtime'),
-    createOperationDescriptor = _require.createOperationDescriptor,
-    deepFreeze = _require.deepFreeze,
-    getRequest = _require.getRequest;
-
+  RelayFeatureFlags = _require.RelayFeatureFlags;
+var _require2 = require('relay-runtime'),
+  createOperationDescriptor = _require2.createOperationDescriptor,
+  deepFreeze = _require2.deepFreeze,
+  getRequest = _require2.getRequest;
 /**
  * React may double-fire the constructor, and we call 'fetch' in the
  * constructor. If a request is already in flight from a previous call to the
@@ -44,7 +36,6 @@ var requestCache = {};
 var queryRendererContext = {
   rootIsQueryRenderer: true
 };
-
 /**
  * @public
  *
@@ -57,33 +48,29 @@ var queryRendererContext = {
  */
 var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
   (0, _inheritsLoose2["default"])(ReactRelayQueryRenderer, _React$Component);
-
   function ReactRelayQueryRenderer(props) {
     var _this;
+    _this = _React$Component.call(this, props) || this;
 
-    _this = _React$Component.call(this, props) || this; // Callbacks are attached to the current instance and shared with static
+    // Callbacks are attached to the current instance and shared with static
     // lifecyles by bundling with state. This is okay to do because the
     // callbacks don't change in reaction to props. However we should not
     // "leak" them before mounting (since we would be unable to clean up). For
     // 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.
-
+        }
 
+        // 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,
@@ -97,7 +84,6 @@ var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
     };
     var queryFetcher;
     var requestCacheKey;
-
     if (props.query) {
       var query = props.query;
       var request = getRequest(query);
@@ -106,7 +92,6 @@ var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
     } else {
       queryFetcher = new ReactRelayQueryFetcher();
     }
-
     _this._maybeHiddenOrFastRefresh = false;
     _this.state = (0, _objectSpread2["default"])({
       prevPropsEnvironment: props.environment,
@@ -117,20 +102,15 @@ var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
     }, fetchQueryAndComputeStateFromProps(props, queryFetcher, retryCallbacks, requestCacheKey));
     return _this;
   }
-
   ReactRelayQueryRenderer.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
     if (prevState.prevQuery !== nextProps.query || prevState.prevPropsEnvironment !== nextProps.environment || !areEqual(prevState.prevPropsVariables, nextProps.variables)) {
       return resetQueryStateForUpdate(nextProps, prevState);
     }
-
     return null;
   };
-
   var _proto = ReactRelayQueryRenderer.prototype;
-
   _proto.componentDidMount = function componentDidMount() {
     var _this2 = this;
-
     if (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.
@@ -138,94 +118,104 @@ var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
       // 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._maybeHiddenOrFastRefresh = false;
+      // eslint-disable-next-line react/no-did-mount-set-state
       this.setState(function (prevState) {
-        return resetQueryStateForUpdate(_this2.props, prevState);
+        var newState = resetQueryStateForUpdate(_this2.props, prevState);
+        var requestCacheKey = newState.requestCacheKey,
+          queryFetcher = newState.queryFetcher;
+        if (requestCacheKey != null && requestCache[requestCacheKey] != null) {
+          if (RelayFeatureFlags.ENABLE_QUERY_RENDERER_SET_STATE_PREVENTION) {
+            var fetchResult = queryFetcher.getFetchResult();
+            if (fetchResult != null) {
+              var _fetchResult$snapshot, _fetchResult$error;
+              var snapshot = (_fetchResult$snapshot = fetchResult.snapshot) !== null && _fetchResult$snapshot !== void 0 ? _fetchResult$snapshot : null;
+              var error = (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : null;
+              var prevRequestCacheKey = prevState.requestCacheKey;
+              if (prevRequestCacheKey != null) {
+                delete requestCache[prevRequestCacheKey];
+              }
+              newState.renderProps = getRenderProps(error, snapshot, queryFetcher, prevState.retryCallbacks);
+              newState.snapshot = snapshot;
+              newState.requestCacheKey = null;
+            } else {
+              queryFetcher.setOnDataChange(_this2._handleDataChange);
+            }
+          } else {
+            queryFetcher.setOnDataChange(_this2._handleDataChange);
+          }
+        }
+        return newState;
       });
       return;
     }
-
     var _this$state = this.state,
-        retryCallbacks = _this$state.retryCallbacks,
-        queryFetcher = _this$state.queryFetcher,
-        requestCacheKey = _this$state.requestCacheKey; // We don't need to cache the request after the component commits
-
+      retryCallbacks = _this$state.retryCallbacks,
+      queryFetcher = _this$state.queryFetcher,
+      requestCacheKey = _this$state.requestCacheKey;
+    // We don't need to cache the request after the component commits
     if (requestCacheKey) {
       delete requestCache[requestCacheKey];
     }
-
     retryCallbacks.handleDataChange = this._handleDataChange;
-
     retryCallbacks.handleRetryAfterError = function (error) {
       return _this2.setState(function (prevState) {
         var prevRequestCacheKey = prevState.requestCacheKey;
-
         if (prevRequestCacheKey) {
           delete requestCache[prevRequestCacheKey];
         }
-
         return {
           renderProps: getLoadingRenderProps(),
           requestCacheKey: null
         };
       });
-    }; // Re-initialize the ReactRelayQueryFetcher with callbacks.
-    // If data has changed since constructions, this will re-render.
-
+    };
 
+    // Re-initialize the ReactRelayQueryFetcher with callbacks.
+    // If data has changed since constructions, this will re-render.
     if (this.props.query) {
       queryFetcher.setOnDataChange(this._handleDataChange);
     }
   };
-
   _proto.componentDidUpdate = function componentDidUpdate(_prevProps, prevState) {
     // We don't need to cache the request after the component commits
     var _this$state2 = this.state,
-        queryFetcher = _this$state2.queryFetcher,
-        requestCacheKey = _this$state2.requestCacheKey;
-
+      queryFetcher = _this$state2.queryFetcher,
+      requestCacheKey = _this$state2.requestCacheKey;
     if (requestCacheKey) {
-      delete requestCache[requestCacheKey]; // HACK
-
+      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) {
     return nextProps.render !== this.props.render || nextState.renderProps !== this.state.renderProps;
   };
-
   _proto.render = function render() {
     var _this$state3 = this.state,
-        renderProps = _this$state3.renderProps,
-        relayContext = _this$state3.relayContext; // Note that the root fragment results in `renderProps.props` is already
+      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.
-
     if (process.env.NODE_ENV !== "production") {
       deepFreeze(renderProps);
     }
-
     return /*#__PURE__*/React.createElement(ReactRelayContext.Provider, {
       value: relayContext
     }, /*#__PURE__*/React.createElement(ReactRelayQueryRendererContext.Provider, {
       value: queryRendererContext
     }, this.props.render(renderProps)));
   };
-
   return ReactRelayQueryRenderer;
 }(React.Component);
-
 function getLoadingRenderProps() {
   return {
     error: null,
@@ -234,7 +224,6 @@ function getLoadingRenderProps() {
     retry: null
   };
 }
-
 function getEmptyRenderProps() {
   return {
     error: null,
@@ -243,14 +232,12 @@ function getEmptyRenderProps() {
     retry: null
   };
 }
-
 function getRenderProps(error, snapshot, queryFetcher, retryCallbacks) {
   return {
     error: error ? error : null,
     props: snapshot ? snapshot.data : null,
     retry: function retry(cacheConfigOverride) {
       var syncSnapshot = queryFetcher.retry(cacheConfigOverride);
-
       if (syncSnapshot && typeof retryCallbacks.handleDataChange === 'function') {
         retryCallbacks.handleDataChange({
           snapshot: syncSnapshot
@@ -263,20 +250,17 @@ function getRenderProps(error, snapshot, queryFetcher, retryCallbacks) {
     }
   };
 }
-
 function getRequestCacheKey(request, variables) {
   return JSON.stringify({
     id: request.cacheID ? request.cacheID : request.id,
     variables: 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);
@@ -284,35 +268,33 @@ function resetQueryStateForUpdate(props, prevState) {
   } 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
+  }, 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,
-      variables = props.variables,
-      cacheConfig = props.cacheConfig;
+    query = props.query,
+    variables = props.variables,
+    cacheConfig = props.cacheConfig;
   var genericEnvironment = environment;
-
   if (query) {
     var request = getRequest(query);
     var operation = createOperationDescriptor(request, variables, cacheConfig);
     var relayContext = {
       environment: genericEnvironment
     };
-
     if (typeof requestCacheKey === 'string' && requestCache[requestCacheKey]) {
       // This same request is already in flight.
-      var snapshot = requestCache[requestCacheKey].snapshot;
 
+      var snapshot = requestCache[requestCacheKey].snapshot;
       if (snapshot) {
         // Use the cached response
         return {
@@ -333,24 +315,23 @@ function fetchQueryAndComputeStateFromProps(props, queryFetcher, retryCallbacks,
         };
       }
     }
-
     try {
       var storeSnapshot = queryFetcher.lookupInStore(genericEnvironment, operation, props.fetchPolicy);
       var querySnapshot = queryFetcher.fetch({
         environment: genericEnvironment,
         onDataChange: null,
         operation: operation
-      }); // Use network data first, since it may be fresher
-
-      var _snapshot = querySnapshot || storeSnapshot; // cache the request to avoid duplicate requests
+      });
 
+      // Use network data first, since it may be fresher
+      var _snapshot = querySnapshot || storeSnapshot;
 
+      // cache the request to avoid duplicate requests
       requestCacheKey = requestCacheKey || getRequestCacheKey(request.params, props.variables);
       requestCache[requestCacheKey] = {
         queryFetcher: queryFetcher,
         snapshot: _snapshot
       };
-
       if (!_snapshot) {
         return {
           error: null,
@@ -360,7 +341,6 @@ function fetchQueryAndComputeStateFromProps(props, queryFetcher, retryCallbacks,
           requestCacheKey: requestCacheKey
         };
       }
-
       return {
         error: null,
         relayContext: relayContext,
@@ -387,7 +367,6 @@ function fetchQueryAndComputeStateFromProps(props, queryFetcher, retryCallbacks,
       relayContext: _relayContext,
       renderProps: getEmptyRenderProps(),
       requestCacheKey: null // if there is an error, don't cache request
-
     };
   }
 }

package/lib/ReactRelayQueryRendererContext.js

@@ -6,12 +6,12 @@
  *
  * 
  * @format
+ * @oncall relay
  */
-// flowlint ambiguous-object-type:error
+
 'use strict';
 
 var React = require('react');
-
 module.exports = React.createContext({
   rootIsQueryRenderer: false
 });