react-relay 14.0.0 → 15.0.0

package/lib/ReactRelayFragmentContainer.js

@@ -6,60 +6,49 @@
  *
  * 
  * @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 _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
 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 _require = require('./ReactRelayContainerUtils'),
-    getContainerName = _require.getContainerName;
-
+  getContainerName = _require.getContainerName;
 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'),
-    createFragmentSpecResolver = _require3.createFragmentSpecResolver,
-    getDataIDsFromObject = _require3.getDataIDsFromObject,
-    isScalarAndEqual = _require3.isScalarAndEqual;
-
+  createFragmentSpecResolver = _require3.createFragmentSpecResolver,
+  getDataIDsFromObject = _require3.getDataIDsFromObject,
+  isScalarAndEqual = _require3.isScalarAndEqual;
 /**
  * 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) {
-  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(),
@@ -69,11 +58,11 @@ function createContainerWithFragments(Component, fragments) {
         });
       });
       var relayContext = assertRelayContext(props.__relayContext);
-      var rootIsQueryRenderer = (_props$__rootIsQueryR = props.__rootIsQueryRenderer) !== null && _props$__rootIsQueryR !== void 0 ? _props$__rootIsQueryR : false; // Do not provide a subscription/callback here.
+      var rootIsQueryRenderer = (_props$__rootIsQueryR = props.__rootIsQueryRenderer) !== null && _props$__rootIsQueryR !== void 0 ? _props$__rootIsQueryR : false;
+      // 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(),
@@ -84,16 +73,14 @@ function createContainerWithFragments(Component, fragments) {
       };
       return _this;
     }
+
     /**
      * When new props are received, read data for the new props and subscribe
      * for updates. Props may be the same in which case previous data and
      * subscriptions 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;
@@ -101,12 +88,13 @@ function createContainerWithFragments(Component, fragments) {
       var rootIsQueryRenderer = (_nextProps$__rootIsQu = nextProps.__rootIsQueryRenderer) !== null && _nextProps$__rootIsQu !== void 0 ? _nextProps$__rootIsQu : false;
       var prevIDs = getDataIDsFromObject(fragments, prevProps);
       var nextIDs = getDataIDsFromObject(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(prevIDs, nextIDs)) {
         // Do not provide a subscription/callback here.
         // It is possible for this render to be interrupted or aborted,
@@ -123,7 +111,6 @@ function createContainerWithFragments(Component, fragments) {
       } else {
         resolver.setProps(nextProps);
         var data = resolver.resolve();
-
         if (data !== prevState.data) {
           return {
             data: data,
@@ -133,114 +120,104 @@ function createContainerWithFragments(Component, fragments) {
           };
         }
       }
-
       return null;
     };
-
     var _proto = _class.prototype;
-
     _proto.componentDidMount = function componentDidMount() {
       this._subscribeToNewResolverAndRerenderIfStoreHasChanged();
     };
-
     _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
       if (this.state.resolver !== prevState.resolver) {
         prevState.resolver.dispose();
-
         this._subscribeToNewResolverAndRerenderIfStoreHasChanged();
       } else {
         this._rerenderIfStoreHasChanged();
       }
     };
-
     _proto.componentWillUnmount = function componentWillUnmount() {
       this.state.resolver.dispose();
     };
-
     _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
       // Short-circuit if any Relay-related data has changed
       if (nextState.data !== this.state.data) {
         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 (nextState.prevPropsContext.environment !== this.state.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;
     }
+
     /**
      * Render new data for the existing props/context.
-     */
-    ;
-
+     */;
     _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
         });
       }
-    };
+    }
 
+    // $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);
       return React.createElement(Component, (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), this.state.data), {}, {
         ref: componentRef,
         relay: this.state.relayProp
       }));
     };
-
     return _class;
-  }(React.Component), (0, _defineProperty2["default"])(_class, "displayName", containerName), _temp;
+  }(React.Component), (0, _defineProperty2["default"])(_class, "displayName", containerName), _class;
 }
-
 function getRelayProp(environment) {
   return {
     environment: environment
   };
 }
+
 /**
  * Wrap the basic `createContainer()` function with logic to adapt to the
  * `context.relay.environment` in which it is rendered. Specifically, the
@@ -248,13 +225,10 @@ function getRelayProp(environment) {
  * `fragmentSpec` is memoized once per environment, rather than once per
  * instance of the container constructed/rendered.
  */
-
-
 function createContainer(Component, fragmentSpec) {
   // $FlowFixMe[incompatible-return]
   return buildReactRelayContainer(Component, fragmentSpec, createContainerWithFragments);
 }
-
 module.exports = {
   createContainer: createContainer
 };

package/lib/ReactRelayFragmentMockRenderer.js

@@ -6,14 +6,13 @@
  *
  * 
  * @format
+ * @oncall relay
  */
-// flowlint ambiguous-object-type:error
+
 'use strict';
 
 var ReactRelayContext = require('./ReactRelayContext');
-
 var React = require('react');
-
 function ReactRelayFragmentMockRenderer(props) {
   return /*#__PURE__*/React.createElement(ReactRelayContext.Provider, {
     value: {
@@ -21,5 +20,4 @@ function ReactRelayFragmentMockRenderer(props) {
     }
   }, props.render());
 }
-
 module.exports = ReactRelayFragmentMockRenderer;

package/lib/ReactRelayLocalQueryRenderer.js

@@ -6,50 +6,41 @@
  *
  * 
  * @format
+ * @oncall relay
  */
-// flowlint ambiguous-object-type:error
+
 'use strict';
 
 var ReactRelayContext = require('./ReactRelayContext');
-
 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;
-
+  createOperationDescriptor = _require.createOperationDescriptor,
+  deepFreeze = _require.deepFreeze,
+  getRequest = _require.getRequest;
 var useLayoutEffect = React.useLayoutEffect,
-    useState = React.useState,
-    useRef = React.useRef,
-    useMemo = React.useMemo;
+  useState = React.useState,
+  useRef = React.useRef,
+  useMemo = React.useMemo;
 var queryRendererContext = {
   rootIsQueryRenderer: true
 };
-
 function useDeepCompare(value) {
   var latestValue = React.useRef(value);
-
   if (!areEqual(latestValue.current, value)) {
     if (process.env.NODE_ENV !== "production") {
       deepFreeze(value);
     }
-
     latestValue.current = value;
   }
-
   return latestValue.current;
 }
-
 function ReactRelayLocalQueryRenderer(props) {
   var environment = props.environment,
-      query = props.query,
-      variables = props.variables,
-      render = props.render;
+    query = props.query,
+    variables = props.variables,
+    render = props.render;
   var latestVariables = useDeepCompare(variables);
   var operation = useMemo(function () {
     var request = getRequest(query);
@@ -59,28 +50,27 @@ function ReactRelayLocalQueryRenderer(props) {
     return {
       environment: environment
     };
-  }, [environment]); // Use a ref to prevent rendering twice when data changes
-  // because of props change
+  }, [environment]);
 
+  // Use a ref to prevent rendering twice when data changes
+  // because of props change
   var dataRef = useRef(null);
-
   var _useState = useState(null),
-      forceUpdate = _useState[1];
-
+    forceUpdate = _useState[1];
   var cleanupFnRef = useRef(null);
   var snapshot = useMemo(function () {
     environment.check(operation);
     var res = environment.lookup(operation.fragment);
-    dataRef.current = res.data; // Run effects here so that the data can be retained
-    // and subscribed before the component commits
+    dataRef.current = res.data;
 
+    // Run effects here so that the data can be retained
+    // and subscribed before the component commits
     var retainDisposable = environment.retain(operation);
     var subscribeDisposable = environment.subscribe(res, function (newSnapshot) {
       dataRef.current = newSnapshot.data;
       forceUpdate(dataRef.current);
     });
     var disposed = false;
-
     function nextCleanupFn() {
       if (!disposed) {
         disposed = true;
@@ -89,11 +79,9 @@ function ReactRelayLocalQueryRenderer(props) {
         subscribeDisposable.dispose();
       }
     }
-
     if (cleanupFnRef.current) {
       cleanupFnRef.current();
     }
-
     cleanupFnRef.current = nextCleanupFn;
     return res;
   }, [environment, operation]);
@@ -111,5 +99,4 @@ function ReactRelayLocalQueryRenderer(props) {
     props: dataRef.current
   })));
 }
-
 module.exports = ReactRelayLocalQueryRenderer;