react-relay 12.0.0 → 13.0.0-rc.0

package/lib/buildReactRelayContainer.js

@@ -14,21 +14,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var React = require('react');
+var assertFragmentMap = require('./assertFragmentMap');
+
+var _require = require('./ReactRelayContainerUtils'),
+    getComponentName = _require.getComponentName,
+    getContainerName = _require.getContainerName;
 
 var ReactRelayContext = require('./ReactRelayContext');
 
 var ReactRelayQueryRendererContext = require('./ReactRelayQueryRendererContext');
 
-var assertFragmentMap = require('./assertFragmentMap');
+var readContext = require('./readContext');
 
 var invariant = require('invariant');
 
-var readContext = require('./readContext');
-
-var _require = require('./ReactRelayContainerUtils'),
-    getComponentName = _require.getComponentName,
-    getContainerName = _require.getContainerName;
+var React = require('react');
 
 var _require2 = require('relay-runtime'),
     getFragment = _require2.getFragment;

package/lib/getRootVariablesForFragments.js

@@ -28,8 +28,7 @@ function getRootVariablesForFragments(fragments, props) {
     var fragmentNode = fragments[key];
     var fragmentRef = props[key];
     var selector = getSelector(fragmentNode, fragmentRef);
-    var fragmentOwnerVariables = selector != null && selector.kind === 'PluralReaderSelector' ? (_selector$selectors$ = (_selector$selectors$2 = selector.selectors[0]) === null || _selector$selectors$2 === void 0 ? void 0 : _selector$selectors$2.owner.variables) !== null && _selector$selectors$ !== void 0 ? _selector$selectors$ : {} : (_selector$owner$varia = selector === null || selector === void 0 ? void 0 : selector.owner.variables) !== null && _selector$owner$varia !== void 0 ? _selector$owner$varia : {}; // $FlowFixMe[cannot-spread-interface]
-
+    var fragmentOwnerVariables = selector != null && selector.kind === 'PluralReaderSelector' ? (_selector$selectors$ = (_selector$selectors$2 = selector.selectors[0]) === null || _selector$selectors$2 === void 0 ? void 0 : _selector$selectors$2.owner.variables) !== null && _selector$selectors$ !== void 0 ? _selector$selectors$ : {} : (_selector$owner$varia = selector === null || selector === void 0 ? void 0 : selector.owner.variables) !== null && _selector$owner$varia !== void 0 ? _selector$owner$varia : {};
     rootVariables = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, rootVariables), fragmentOwnerVariables);
   });
   return rootVariables;

package/lib/hooks.js

@@ -12,11 +12,12 @@
 
 var EntryPointContainer = require('./relay-hooks/EntryPointContainer.react');
 
-var RelayEnvironmentProvider = require('./relay-hooks/RelayEnvironmentProvider');
+var loadEntryPoint = require('./relay-hooks/loadEntryPoint');
 
-var RelayRuntime = require('relay-runtime');
+var _require = require('./relay-hooks/loadQuery'),
+    loadQuery = _require.loadQuery;
 
-var loadEntryPoint = require('./relay-hooks/loadEntryPoint');
+var RelayEnvironmentProvider = require('./relay-hooks/RelayEnvironmentProvider');
 
 var useEntryPointLoader = require('./relay-hooks/useEntryPointLoader');
 
@@ -40,8 +41,7 @@ var useSubscribeToInvalidationState = require('./relay-hooks/useSubscribeToInval
 
 var useSubscription = require('./relay-hooks/useSubscription');
 
-var _require = require('./relay-hooks/loadQuery'),
-    loadQuery = _require.loadQuery;
+var RelayRuntime = require('relay-runtime');
 
 /**
  * The public interface for Relay Hooks.

package/lib/index.js

@@ -10,8 +10,6 @@
 // flowlint ambiguous-object-type:error
 'use strict';
 
-var EntryPointContainer = require('./relay-hooks/EntryPointContainer.react');
-
 var ReactRelayContext = require('./ReactRelayContext');
 
 var ReactRelayFragmentContainer = require('./ReactRelayFragmentContainer');
@@ -24,12 +22,15 @@ var ReactRelayQueryRenderer = require('./ReactRelayQueryRenderer');
 
 var ReactRelayRefetchContainer = require('./ReactRelayRefetchContainer');
 
-var RelayEnvironmentProvider = require('./relay-hooks/RelayEnvironmentProvider');
-
-var RelayRuntime = require('relay-runtime');
+var EntryPointContainer = require('./relay-hooks/EntryPointContainer.react');
 
 var loadEntryPoint = require('./relay-hooks/loadEntryPoint');
 
+var _require = require('./relay-hooks/loadQuery'),
+    loadQuery = _require.loadQuery;
+
+var RelayEnvironmentProvider = require('./relay-hooks/RelayEnvironmentProvider');
+
 var useEntryPointLoader = require('./relay-hooks/useEntryPointLoader');
 
 var useFragment = require('./relay-hooks/useFragment');
@@ -52,8 +53,7 @@ var useSubscribeToInvalidationState = require('./relay-hooks/useSubscribeToInval
 
 var useSubscription = require('./relay-hooks/useSubscription');
 
-var _require = require('./relay-hooks/loadQuery'),
-    loadQuery = _require.loadQuery;
+var RelayRuntime = require('relay-runtime');
 
 /**
  * The public interface to react-relay.

package/lib/jest-react/internalAct.js

@@ -19,9 +19,9 @@
 // building an app with React.
 'use strict';
 
-var Scheduler = require('scheduler/unstable_mock');
+var enqueueTask = require('./enqueueTask');
 
-var enqueueTask = require('./enqueueTask'); // The subset of a Promise that React APIs rely on. This resolves a value.
+var Scheduler = require('scheduler/unstable_mock'); // The subset of a Promise that React APIs rely on. This resolves a value.
 // This doesn't require a return value neither from the handler nor the
 // then function.
 

package/lib/multi-actor/ActorChange.js

@@ -10,12 +10,12 @@
  */
 'use strict';
 
-var React = require('react');
-
 var RelayEnvironmentProvider = require('../relay-hooks/RelayEnvironmentProvider');
 
 var useRelayActorEnvironment = require('./useRelayActorEnvironment');
 
+var React = require('react');
+
 function ActorChange(props) {
   var actorEnvironment = useRelayActorEnvironment(props.actorChangePoint.__viewer);
   var getEnvironmentForActor = React.useCallback(function (actorIdentifier) {

package/lib/multi-actor/useRelayActorEnvironment.js

@@ -11,13 +11,13 @@
 // flowlint ambiguous-object-type:error
 'use strict';
 
-var ReactRelayContext = require('react-relay/ReactRelayContext');
-
 var invariant = require('invariant');
 
 var _require = require('react'),
     useContext = _require.useContext;
 
+var ReactRelayContext = require('react-relay/ReactRelayContext');
+
 function useRelayActorEnvironment(actorIdentifier) {
   var context = useContext(ReactRelayContext);
   !(context != null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'useRelayActorEnvironment: Expected to have found a Relay environment provided by ' + 'a `RelayEnvironmentProvider` component. ' + 'This usually means that useRelayActorEnvironment was used in a ' + 'component that is not a descendant of a `RelayEnvironmentProvider`. ' + 'Please make sure a `RelayEnvironmentProvider` has been rendered somewhere ' + 'as a parent or ancestor of your component.') : invariant(false) : void 0;

package/lib/relay-hooks/EntryPointContainer.react.js

@@ -13,16 +13,16 @@
 
 var ProfilerContext = require('./ProfilerContext');
 
-var React = require('react');
-
 var useRelayEnvironment = require('./useRelayEnvironment');
 
-var warning = require("fbjs/lib/warning");
+var React = require('react');
 
 var _require = require('react'),
     useContext = _require.useContext,
     useEffect = _require.useEffect;
 
+var warning = require("fbjs/lib/warning");
+
 function EntryPointContainer(_ref) {
   var entryPointReference = _ref.entryPointReference,
       props = _ref.props;

package/lib/relay-hooks/FragmentResource.js

@@ -15,19 +15,32 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var LRUCache = require('./LRUCache');
 
+var _require = require('./QueryResource'),
+    getQueryResourceForEnvironment = _require.getQueryResourceForEnvironment;
+
+var SuspenseResource = require('./SuspenseResource');
+
 var invariant = require('invariant');
 
-var _require = require('relay-runtime'),
-    getFragmentIdentifier = _require.getFragmentIdentifier,
-    getPendingOperationsForFragment = _require.getPendingOperationsForFragment,
-    getSelector = _require.getSelector,
-    isPromise = _require.isPromise,
-    recycleNodesInto = _require.recycleNodesInto,
-    reportMissingRequiredFields = _require.reportMissingRequiredFields;
+var _require2 = require('relay-runtime'),
+    RelayFeatureFlags = _require2.RelayFeatureFlags,
+    _require2$__internal = _require2.__internal,
+    fetchQuery = _require2$__internal.fetchQuery,
+    getPromiseForActiveRequest = _require2$__internal.getPromiseForActiveRequest,
+    createOperationDescriptor = _require2.createOperationDescriptor,
+    getFragmentIdentifier = _require2.getFragmentIdentifier,
+    getPendingOperationsForFragment = _require2.getPendingOperationsForFragment,
+    getSelector = _require2.getSelector,
+    getVariablesFromFragment = _require2.getVariablesFromFragment,
+    isPromise = _require2.isPromise,
+    recycleNodesInto = _require2.recycleNodesInto,
+    reportMissingRequiredFields = _require2.reportMissingRequiredFields;
 
 var WEAKMAP_SUPPORTED = typeof WeakMap === 'function';
 // TODO: Fix to not rely on LRU. If the number of active fragments exceeds this
@@ -47,6 +60,28 @@ function isMissingData(snapshot) {
   return snapshot.isMissingData;
 }
 
+function hasMissingClientEdges(snapshot) {
+  var _snapshot$missingClie, _snapshot$missingClie2;
+
+  if (Array.isArray(snapshot)) {
+    return snapshot.some(function (s) {
+      var _s$missingClientEdges, _s$missingClientEdges2;
+
+      return ((_s$missingClientEdges = (_s$missingClientEdges2 = s.missingClientEdges) === null || _s$missingClientEdges2 === void 0 ? void 0 : _s$missingClientEdges2.length) !== null && _s$missingClientEdges !== void 0 ? _s$missingClientEdges : 0) > 0;
+    });
+  }
+
+  return ((_snapshot$missingClie = (_snapshot$missingClie2 = snapshot.missingClientEdges) === null || _snapshot$missingClie2 === void 0 ? void 0 : _snapshot$missingClie2.length) !== null && _snapshot$missingClie !== void 0 ? _snapshot$missingClie : 0) > 0;
+}
+
+function singularOrPluralForEach(snapshot, f) {
+  if (Array.isArray(snapshot)) {
+    snapshot.forEach(f);
+  } else {
+    f(snapshot);
+  }
+}
+
 function getFragmentResult(cacheKey, snapshot, storeEpoch) {
   if (Array.isArray(snapshot)) {
     return {
@@ -68,11 +103,90 @@ function getFragmentResult(cacheKey, snapshot, storeEpoch) {
     storeEpoch: storeEpoch
   };
 }
+/**
+ * The purpose of this cache is to allow information to be passed from an
+ * initial read which suspends through to the commit that follows a subsequent
+ * successful read. Specifically, the QueryResource result for the data fetch
+ * is passed through so that that query can be retained on commit.
+ */
+
+
+var ClientEdgeQueryResultsCache = /*#__PURE__*/function () {
+  function ClientEdgeQueryResultsCache(environment) {
+    (0, _defineProperty2["default"])(this, "_cache", new Map());
+    (0, _defineProperty2["default"])(this, "_retainCounts", new Map());
+    this._environment = environment;
+  }
+
+  var _proto = ClientEdgeQueryResultsCache.prototype;
+
+  _proto.get = function get(fragmentIdentifier) {
+    var _this$_cache$get$, _this$_cache$get;
+
+    return (_this$_cache$get$ = (_this$_cache$get = this._cache.get(fragmentIdentifier)) === null || _this$_cache$get === void 0 ? void 0 : _this$_cache$get[0]) !== null && _this$_cache$get$ !== void 0 ? _this$_cache$get$ : undefined;
+  };
+
+  _proto.recordQueryResults = function recordQueryResults(fragmentIdentifier, value) {
+    var _this = this;
+
+    var existing = this._cache.get(fragmentIdentifier);
+
+    if (!existing) {
+      var suspenseResource = new SuspenseResource(function () {
+        return _this._retain(fragmentIdentifier);
+      });
+
+      this._cache.set(fragmentIdentifier, [value, suspenseResource]);
+
+      suspenseResource.temporaryRetain(this._environment);
+    } else {
+      var existingResults = existing[0],
+          _suspenseResource = existing[1];
+      value.forEach(function (queryResult) {
+        existingResults.push(queryResult);
+      });
+
+      _suspenseResource.temporaryRetain(this._environment);
+    }
+  };
+
+  _proto._retain = function _retain(id) {
+    var _this2 = this;
+
+    var _this$_retainCounts$g;
+
+    var retainCount = ((_this$_retainCounts$g = this._retainCounts.get(id)) !== null && _this$_retainCounts$g !== void 0 ? _this$_retainCounts$g : 0) + 1;
+
+    this._retainCounts.set(id, retainCount);
+
+    return {
+      dispose: function dispose() {
+        var _this$_retainCounts$g2;
+
+        var newRetainCount = ((_this$_retainCounts$g2 = _this2._retainCounts.get(id)) !== null && _this$_retainCounts$g2 !== void 0 ? _this$_retainCounts$g2 : 0) - 1;
+
+        if (newRetainCount > 0) {
+          _this2._retainCounts.set(id, newRetainCount);
+        } else {
+          _this2._retainCounts["delete"](id);
+
+          _this2._cache["delete"](id);
+        }
+      }
+    };
+  };
+
+  return ClientEdgeQueryResultsCache;
+}();
 
 var FragmentResourceImpl = /*#__PURE__*/function () {
   function FragmentResourceImpl(environment) {
     this._environment = environment;
     this._cache = LRUCache.create(CACHE_CAPACITY);
+
+    if (RelayFeatureFlags.ENABLE_CLIENT_EDGES) {
+      this._clientEdgeQueryResultsCache = new ClientEdgeQueryResultsCache(environment);
+    }
   }
   /**
    * This function should be called during a Component's render function,
@@ -81,9 +195,9 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
    */
 
 
-  var _proto = FragmentResourceImpl.prototype;
+  var _proto2 = FragmentResourceImpl.prototype;
 
-  _proto.read = function read(fragmentNode, fragmentRef, componentDisplayName, fragmentKey) {
+  _proto2.read = function read(fragmentNode, fragmentRef, componentDisplayName, fragmentKey) {
     return this.readWithIdentifier(fragmentNode, fragmentRef, getFragmentIdentifier(fragmentNode, fragmentRef), componentDisplayName, fragmentKey);
   }
   /**
@@ -93,8 +207,10 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
    */
   ;
 
-  _proto.readWithIdentifier = function readWithIdentifier(fragmentNode, fragmentRef, fragmentIdentifier, componentDisplayName, fragmentKey) {
-    var _fragmentNode$metadat;
+  _proto2.readWithIdentifier = function readWithIdentifier(fragmentNode, fragmentRef, fragmentIdentifier, componentDisplayName, fragmentKey) {
+    var _this3 = this;
+
+    var _fragmentNode$metadat, _clientEdgePromises;
 
     var environment = this._environment; // If fragmentRef is null or undefined, pass it directly through.
     // This is a convenience when consuming fragments via a HOC API, when the
@@ -171,18 +287,67 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
       });
 
       return fragmentResult;
-    } // 3. If we don't have data in the store, check if a request is in
-    // flight for the fragment's parent query, or for another operation
-    // that may affect the parent's query data, such as a mutation
-    // or subscription. If a promise exists, cache the promise and use it
-    // to suspend.
+    } // 3. If we don't have data in the store, there's two cases where we should
+    // suspend to await the data: First if any client edges were traversed where
+    // the destination record was missing data; in that case we initiate a query
+    // here to fetch the missing data. Second, there may already be a request
+    // in flight for the fragment's parent query, or for another operation that
+    //  may affect the parent's query data, such as a mutation or subscription.
+    // For any of these cases we can get a promise, which we will cache and
+    // suspend on.
+    // First, initiate a query for any client edges that were missing data:
+
+
+    var clientEdgeRequests = null;
+
+    if (RelayFeatureFlags.ENABLE_CLIENT_EDGES && hasMissingClientEdges(snapshot)) {
+      clientEdgeRequests = [];
+      var queryResource = getQueryResourceForEnvironment(this._environment);
+      var queryResults = [];
+      singularOrPluralForEach(snapshot, function (snap) {
+        var _snap$missingClientEd;
+
+        (_snap$missingClientEd = snap.missingClientEdges) === null || _snap$missingClientEd === void 0 ? void 0 : _snap$missingClientEd.forEach(function (_ref) {
+          var _clientEdgeRequests;
+
+          var request = _ref.request,
+              clientEdgeDestinationID = _ref.clientEdgeDestinationID;
+
+          var _this3$_performClient = _this3._performClientEdgeQuery(queryResource, fragmentNode, fragmentRef, request, clientEdgeDestinationID),
+              queryResult = _this3$_performClient.queryResult,
+              requestDescriptor = _this3$_performClient.requestDescriptor;
+
+          queryResults.push(queryResult);
+          (_clientEdgeRequests = clientEdgeRequests) === null || _clientEdgeRequests === void 0 ? void 0 : _clientEdgeRequests.push(requestDescriptor);
+        });
+      }); // Store the query so that it can be retained when our own fragment is
+      // subscribed to. This merges with any existing query results:
+
+      !(this._clientEdgeQueryResultsCache != null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Client edge query result cache should exist when ENABLE_CLIENT_EDGES is on.') : invariant(false) : void 0;
+
+      this._clientEdgeQueryResultsCache.recordQueryResults(fragmentIdentifier, queryResults);
+    }
+
+    var clientEdgePromises = null;
+
+    if (RelayFeatureFlags.ENABLE_CLIENT_EDGES && clientEdgeRequests) {
+      clientEdgePromises = clientEdgeRequests.map(function (request) {
+        return getPromiseForActiveRequest(_this3._environment, request);
+      }).filter(function (p) {
+        return p != null;
+      });
+    } // Finally look for operations in flight for our parent query:
 
 
     var fragmentOwner = fragmentSelector.kind === 'PluralReaderSelector' ? fragmentSelector.selectors[0].owner : fragmentSelector.owner;
 
-    var networkPromiseResult = this._getAndSavePromiseForFragmentRequestInFlight(fragmentIdentifier, fragmentNode, fragmentOwner, fragmentResult);
+    var parentQueryPromiseResult = this._getAndSavePromiseForFragmentRequestInFlight(fragmentIdentifier, fragmentNode, fragmentOwner, fragmentResult);
+
+    var parentQueryPromiseResultPromise = parentQueryPromiseResult === null || parentQueryPromiseResult === void 0 ? void 0 : parentQueryPromiseResult.promise; // for refinement
+
+    if (((_clientEdgePromises = clientEdgePromises) === null || _clientEdgePromises === void 0 ? void 0 : _clientEdgePromises.length) || isPromise(parentQueryPromiseResultPromise)) {
+      var _parentQueryPromiseRe, _clientEdgeRequests2, _clientEdgePromises2;
 
-    if (networkPromiseResult != null && isPromise(networkPromiseResult.promise)) {
       environment.__log({
         name: 'suspense.fragment',
         data: fragmentResult.data,
@@ -190,10 +355,10 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
         isRelayHooks: true,
         isPromiseCached: false,
         isMissingData: fragmentResult.isMissingData,
-        pendingOperations: networkPromiseResult.pendingOperations
+        pendingOperations: [].concat((0, _toConsumableArray2["default"])((_parentQueryPromiseRe = parentQueryPromiseResult === null || parentQueryPromiseResult === void 0 ? void 0 : parentQueryPromiseResult.pendingOperations) !== null && _parentQueryPromiseRe !== void 0 ? _parentQueryPromiseRe : []), (0, _toConsumableArray2["default"])((_clientEdgeRequests2 = clientEdgeRequests) !== null && _clientEdgeRequests2 !== void 0 ? _clientEdgeRequests2 : []))
       });
 
-      throw networkPromiseResult.promise;
+      throw ((_clientEdgePromises2 = clientEdgePromises) === null || _clientEdgePromises2 === void 0 ? void 0 : _clientEdgePromises2.length) ? Promise.all([parentQueryPromiseResultPromise].concat((0, _toConsumableArray2["default"])(clientEdgePromises))) : parentQueryPromiseResultPromise;
     }
 
     this._reportMissingRequiredFieldsInSnapshot(snapshot);
@@ -201,13 +366,30 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
     return getFragmentResult(fragmentIdentifier, snapshot, storeEpoch);
   };
 
-  _proto._reportMissingRequiredFieldsInSnapshot = function _reportMissingRequiredFieldsInSnapshot(snapshot) {
-    var _this = this;
+  _proto2._performClientEdgeQuery = function _performClientEdgeQuery(queryResource, fragmentNode, fragmentRef, request, clientEdgeDestinationID) {
+    var originalVariables = getVariablesFromFragment(fragmentNode, fragmentRef);
+    var variables = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, originalVariables), {}, {
+      id: clientEdgeDestinationID // TODO should be a reserved name
+
+    });
+    var operation = createOperationDescriptor(request, variables, {} //  TODO cacheConfig should probably inherent from parent operation
+    );
+    var fetchObservable = fetchQuery(this._environment, operation);
+    var queryResult = queryResource.prepare(operation, fetchObservable // TODO should inherent render policy etc. from parent operation
+    );
+    return {
+      requestDescriptor: operation.request,
+      queryResult: queryResult
+    };
+  };
+
+  _proto2._reportMissingRequiredFieldsInSnapshot = function _reportMissingRequiredFieldsInSnapshot(snapshot) {
+    var _this4 = this;
 
     if (Array.isArray(snapshot)) {
       snapshot.forEach(function (s) {
         if (s.missingRequiredFields != null) {
-          reportMissingRequiredFields(_this._environment, s.missingRequiredFields);
+          reportMissingRequiredFields(_this4._environment, s.missingRequiredFields);
         }
       });
     } else {
@@ -217,7 +399,7 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
     }
   };
 
-  _proto.readSpec = function readSpec(fragmentNodes, fragmentRefs, componentDisplayName) {
+  _proto2.readSpec = function readSpec(fragmentNodes, fragmentRefs, componentDisplayName) {
     var result = {};
 
     for (var _key in fragmentNodes) {
@@ -227,8 +409,8 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
     return result;
   };
 
-  _proto.subscribe = function subscribe(fragmentResult, callback) {
-    var _this2 = this;
+  _proto2.subscribe = function subscribe(fragmentResult, callback) {
+    var _this5 = this;
 
     var environment = this._environment;
     var cacheKey = fragmentResult.cacheKey;
@@ -253,25 +435,25 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
     } // 3. Establish subscriptions on the snapshot(s)
 
 
-    var dataSubscriptions = [];
+    var disposables = [];
 
     if (Array.isArray(renderedSnapshot)) {
       !Array.isArray(currentSnapshot) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: Expected snapshots to be plural. ' + "If you're seeing this, this is likely a bug in Relay.") : invariant(false) : void 0;
       currentSnapshot.forEach(function (snapshot, idx) {
-        dataSubscriptions.push(environment.subscribe(snapshot, function (latestSnapshot) {
+        disposables.push(environment.subscribe(snapshot, function (latestSnapshot) {
           var storeEpoch = environment.getStore().getEpoch();
 
-          _this2._updatePluralSnapshot(cacheKey, currentSnapshot, latestSnapshot, idx, storeEpoch);
+          _this5._updatePluralSnapshot(cacheKey, currentSnapshot, latestSnapshot, idx, storeEpoch);
 
           callback();
         }));
       });
     } else {
       !(currentSnapshot != null && !Array.isArray(currentSnapshot)) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: Expected snapshot to be singular. ' + "If you're seeing this, this is likely a bug in Relay.") : invariant(false) : void 0;
-      dataSubscriptions.push(environment.subscribe(currentSnapshot, function (latestSnapshot) {
+      disposables.push(environment.subscribe(currentSnapshot, function (latestSnapshot) {
         var storeEpoch = environment.getStore().getEpoch();
 
-        _this2._cache.set(cacheKey, {
+        _this5._cache.set(cacheKey, {
           kind: 'done',
           result: getFragmentResult(cacheKey, latestSnapshot, storeEpoch)
         });
@@ -280,22 +462,35 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
       }));
     }
 
+    if (RelayFeatureFlags.ENABLE_CLIENT_EDGES) {
+      var _this$_clientEdgeQuer, _this$_clientEdgeQuer2;
+
+      var clientEdgeQueryResults = (_this$_clientEdgeQuer = (_this$_clientEdgeQuer2 = this._clientEdgeQueryResultsCache) === null || _this$_clientEdgeQuer2 === void 0 ? void 0 : _this$_clientEdgeQuer2.get(cacheKey)) !== null && _this$_clientEdgeQuer !== void 0 ? _this$_clientEdgeQuer : undefined;
+
+      if (clientEdgeQueryResults === null || clientEdgeQueryResults === void 0 ? void 0 : clientEdgeQueryResults.length) {
+        var queryResource = getQueryResourceForEnvironment(this._environment);
+        clientEdgeQueryResults.forEach(function (queryResult) {
+          disposables.push(queryResource.retain(queryResult));
+        });
+      }
+    }
+
     return {
       dispose: function dispose() {
-        dataSubscriptions.map(function (s) {
+        disposables.forEach(function (s) {
           return s.dispose();
         });
 
-        _this2._cache["delete"](cacheKey);
+        _this5._cache["delete"](cacheKey);
       }
     };
   };
 
-  _proto.subscribeSpec = function subscribeSpec(fragmentResults, callback) {
-    var _this3 = this;
+  _proto2.subscribeSpec = function subscribeSpec(fragmentResults, callback) {
+    var _this6 = this;
 
     var disposables = Object.keys(fragmentResults).map(function (key) {
-      return _this3.subscribe(fragmentResults[key], callback);
+      return _this6.subscribe(fragmentResults[key], callback);
     });
     return {
       dispose: function dispose() {
@@ -306,7 +501,7 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
     };
   };
 
-  _proto.checkMissedUpdates = function checkMissedUpdates(fragmentResult) {
+  _proto2.checkMissedUpdates = function checkMissedUpdates(fragmentResult) {
     var environment = this._environment;
     var renderedSnapshot = fragmentResult.snapshot;
 
@@ -361,6 +556,7 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
     var updatedCurrentSnapshot = {
       data: updatedData,
       isMissingData: currentSnapshot.isMissingData,
+      missingClientEdges: currentSnapshot.missingClientEdges,
       seenRecords: currentSnapshot.seenRecords,
       selector: currentSnapshot.selector,
       missingRequiredFields: currentSnapshot.missingRequiredFields
@@ -376,16 +572,16 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
     return [updatedData !== renderData, updatedCurrentSnapshot];
   };
 
-  _proto.checkMissedUpdatesSpec = function checkMissedUpdatesSpec(fragmentResults) {
-    var _this4 = this;
+  _proto2.checkMissedUpdatesSpec = function checkMissedUpdatesSpec(fragmentResults) {
+    var _this7 = this;
 
     return Object.keys(fragmentResults).some(function (key) {
-      return _this4.checkMissedUpdates(fragmentResults[key])[0];
+      return _this7.checkMissedUpdates(fragmentResults[key])[0];
     });
   };
 
-  _proto._getAndSavePromiseForFragmentRequestInFlight = function _getAndSavePromiseForFragmentRequestInFlight(cacheKey, fragmentNode, fragmentOwner, fragmentResult) {
-    var _this5 = this;
+  _proto2._getAndSavePromiseForFragmentRequestInFlight = function _getAndSavePromiseForFragmentRequestInFlight(cacheKey, fragmentNode, fragmentOwner, fragmentResult) {
+    var _this8 = this;
 
     var pendingOperationsResult = getPendingOperationsForFragment(this._environment, fragmentNode, fragmentOwner);
 
@@ -399,9 +595,9 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
     var networkPromise = pendingOperationsResult.promise;
     var pendingOperations = pendingOperationsResult.pendingOperations;
     var promise = networkPromise.then(function () {
-      _this5._cache["delete"](cacheKey);
+      _this8._cache["delete"](cacheKey);
     })["catch"](function (error) {
-      _this5._cache["delete"](cacheKey);
+      _this8._cache["delete"](cacheKey);
     }); // $FlowExpectedError[prop-missing] Expando to annotate Promises.
 
     promise.displayName = networkPromise.displayName;
@@ -419,7 +615,7 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
     };
   };
 
-  _proto._updatePluralSnapshot = function _updatePluralSnapshot(cacheKey, baseSnapshots, latestSnapshot, idx, storeEpoch) {
+  _proto2._updatePluralSnapshot = function _updatePluralSnapshot(cacheKey, baseSnapshots, latestSnapshot, idx, storeEpoch) {
     var _currentFragmentResul;
 
     var currentFragmentResult = this._cache.get(cacheKey);

package/lib/relay-hooks/LazyLoadEntryPointContainer_DEPRECATED.react.js

@@ -11,14 +11,14 @@
 // flowlint ambiguous-object-type:error
 'use strict';
 
-var ProfilerContext = require('./ProfilerContext');
-
-var React = require('react');
-
 var preloadQuery_DEPRECATED = require('./preloadQuery_DEPRECATED');
 
+var ProfilerContext = require('./ProfilerContext');
+
 var useRelayEnvironment = require('./useRelayEnvironment');
 
+var React = require('react');
+
 var _require = require('react'),
     useContext = _require.useContext,
     useEffect = _require.useEffect,

package/lib/relay-hooks/MatchContainer.js

@@ -98,7 +98,7 @@ function MatchContainer(_ref2) {
 
   if (match != null && typeof match !== 'object') {
     throw new Error('MatchContainer: Expected `match` value to be an object or null/undefined.');
-  } // NOTE: the MatchPointer type has a $fragmentRefs field to ensure that only
+  } // NOTE: the MatchPointer type has a $fragmentSpreads field to ensure that only
   // an object that contains a FragmentSpread can be passed. If the fragment
   // spread matches, then the metadata fields below (__id, __fragments, etc.)
   // will be present. But they can be missing if all the fragment spreads use