react-relay 14.1.0 → 16.0.0

package/lib/ReactRelayQueryRenderer.js

@@ -1,88 +1,39 @@
-/**
- * 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 _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;
-
-/**
- * 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
- * constructor, just reuse the query fetcher and wait for the response.
- */
+  createOperationDescriptor = _require.createOperationDescriptor,
+  deepFreeze = _require.deepFreeze,
+  getRequest = _require.getRequest;
 var requestCache = {};
 var queryRendererContext = {
   rootIsQueryRenderer: true
 };
-
-/**
- * @public
- *
- * Orchestrates fetching and rendering data for a single view or view hierarchy:
- * - Fetches the query/variables using the given network implementation.
- * - Normalizes the response(s) to that query, publishing them to the given
- *   store.
- * - Renders the pending/fail/success states with the provided render function.
- * - Subscribes for updates to the root data and re-renders with any changes.
- */
 var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
   (0, _inheritsLoose2["default"])(ReactRelayQueryRenderer, _React$Component);
-
   function ReactRelayQueryRenderer(props) {
     var _this;
-
-    _this = _React$Component.call(this, props) || this; // 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.
-
+    _this = _React$Component.call(this, props) || this;
     (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,
@@ -96,7 +47,6 @@ var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
     };
     var queryFetcher;
     var requestCacheKey;
-
     if (props.query) {
       var query = props.query;
       var request = getRequest(query);
@@ -105,7 +55,6 @@ var ReactRelayQueryRenderer = /*#__PURE__*/function (_React$Component) {
     } else {
       queryFetcher = new ReactRelayQueryFetcher();
     }
-
     _this._maybeHiddenOrFastRefresh = false;
     _this.state = (0, _objectSpread2["default"])({
       prevPropsEnvironment: props.environment,
@@ -116,166 +65,127 @@ 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.
-      // 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._maybeHiddenOrFastRefresh = false;
       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) {
+          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;
     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.
-
-
+    };
     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];
       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
-    // frozen by the store; this call is to freeze the renderProps object and
-    // error property if set.
-
+      renderProps = _this$state3.renderProps,
+      relayContext = _this$state3.relayContext;
     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,
     props: null,
-    // `props: null` indicates that the data is being fetched (i.e. loading)
     retry: null
   };
 }
-
 function getEmptyRenderProps() {
   return {
     error: null,
     props: {},
-    // `props: {}` indicates no data available
     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
         });
       } else if (error && typeof retryCallbacks.handleRetryAfterError === 'function') {
-        // If retrying after an error and no synchronous result available,
-        // reset the render props
         retryCallbacks.handleRetryAfterError(error);
       }
     }
   };
 }
-
 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);
@@ -283,37 +193,28 @@ 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
-  // and we want the updated requestCacheKey, since variables may have changed
-  ));
+  }, fetchQueryAndComputeStateFromProps(props, queryFetcher, prevState.retryCallbacks));
 }
-
 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;
-
       if (snapshot) {
-        // Use the cached response
         return {
           error: null,
           relayContext: relayContext,
@@ -322,7 +223,6 @@ function fetchQueryAndComputeStateFromProps(props, queryFetcher, retryCallbacks,
           requestCacheKey: requestCacheKey
         };
       } else {
-        // Render loading state
         return {
           error: null,
           relayContext: relayContext,
@@ -332,24 +232,19 @@ 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
-
-
+      });
+      var _snapshot = querySnapshot || storeSnapshot;
       requestCacheKey = requestCacheKey || getRequestCacheKey(request.params, props.variables);
       requestCache[requestCacheKey] = {
         queryFetcher: queryFetcher,
         snapshot: _snapshot
       };
-
       if (!_snapshot) {
         return {
           error: null,
@@ -359,7 +254,6 @@ function fetchQueryAndComputeStateFromProps(props, queryFetcher, retryCallbacks,
           requestCacheKey: requestCacheKey
         };
       }
-
       return {
         error: null,
         relayContext: relayContext,
@@ -385,10 +279,8 @@ function fetchQueryAndComputeStateFromProps(props, queryFetcher, retryCallbacks,
       error: null,
       relayContext: _relayContext,
       renderProps: getEmptyRenderProps(),
-      requestCacheKey: null // if there is an error, don't cache request
-
+      requestCacheKey: null
     };
   }
 }
-
 module.exports = ReactRelayQueryRenderer;

package/lib/ReactRelayQueryRendererContext.js

@@ -1,16 +1,6 @@
-/**
- * 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 React = require('react');
-
 module.exports = React.createContext({
   rootIsQueryRenderer: false
 });