react-relay 11.0.1 → 13.0.0-rc.1

package/lib/relay-hooks/FragmentResource.js

@@ -15,21 +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 invariant = require("fbjs/lib/invariant");
+var _require = require('./QueryResource'),
+    getQueryResourceForEnvironment = _require.getQueryResourceForEnvironment;
+
+var SuspenseResource = require('./SuspenseResource');
 
-var mapObject = require("fbjs/lib/mapObject");
+var invariant = require('invariant');
 
-var _require = require('relay-runtime'),
-    getPromiseForActiveRequest = _require.__internal.getPromiseForActiveRequest,
-    getFragmentIdentifier = _require.getFragmentIdentifier,
-    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
@@ -49,32 +60,133 @@ function isMissingData(snapshot) {
   return snapshot.isMissingData;
 }
 
-function getFragmentResult(cacheKey, snapshot) {
+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 {
       cacheKey: cacheKey,
       snapshot: snapshot,
       data: snapshot.map(function (s) {
         return s.data;
-      })
+      }),
+      isMissingData: isMissingData(snapshot),
+      storeEpoch: storeEpoch
     };
   }
 
   return {
     cacheKey: cacheKey,
     snapshot: snapshot,
-    data: snapshot.data
+    data: snapshot.data,
+    isMissingData: isMissingData(snapshot),
+    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.
+ */
 
-function getPromiseForPendingOperationAffectingOwner(environment, request) {
-  return environment.getOperationTracker().getPromiseForPendingOperationsAffectingOwner(request);
-}
+
+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,
@@ -83,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);
   }
   /**
@@ -95,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
@@ -106,11 +220,14 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
       return {
         cacheKey: fragmentIdentifier,
         data: null,
-        snapshot: null
+        isMissingData: false,
+        snapshot: null,
+        storeEpoch: 0
       };
-    } // If fragmentRef is plural, ensure that it is an array.
-    // If it's empty, return the empty array directly before doing any more work.
+    }
 
+    var storeEpoch = environment.getStore().getEpoch(); // If fragmentRef is plural, ensure that it is an array.
+    // If it's empty, return the empty array directly before doing any more work.
 
     if ((fragmentNode === null || fragmentNode === void 0 ? void 0 : (_fragmentNode$metadat = fragmentNode.metadata) === null || _fragmentNode$metadat === void 0 ? void 0 : _fragmentNode$metadat.plural) === true) {
       !Array.isArray(fragmentRef) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: Expected fragment pointer%s for fragment `%s` to be ' + 'an array, instead got `%s`. Remove `@relay(plural: true)` ' + 'from fragment `%s` to allow the prop to be an object.', fragmentKey != null ? " for key `".concat(fragmentKey, "`") : '', fragmentNode.name, typeof fragmentRef, fragmentNode.name) : invariant(false) : void 0;
@@ -119,7 +236,9 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
         return {
           cacheKey: fragmentIdentifier,
           data: CONSTANT_READONLY_EMPTY_ARRAY,
-          snapshot: CONSTANT_READONLY_EMPTY_ARRAY
+          isMissingData: false,
+          snapshot: CONSTANT_READONLY_EMPTY_ARRAY,
+          storeEpoch: storeEpoch
         };
       }
     } // Now we actually attempt to read the fragment:
@@ -129,14 +248,24 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
     var cachedValue = this._cache.get(fragmentIdentifier);
 
     if (cachedValue != null) {
-      if (isPromise(cachedValue)) {
-        throw cachedValue;
+      if (cachedValue.kind === 'pending' && isPromise(cachedValue.promise)) {
+        environment.__log({
+          name: 'suspense.fragment',
+          data: cachedValue.result.data,
+          fragment: fragmentNode,
+          isRelayHooks: true,
+          isMissingData: cachedValue.result.isMissingData,
+          isPromiseCached: true,
+          pendingOperations: cachedValue.pendingOperations
+        });
+
+        throw cachedValue.promise;
       }
 
-      if (cachedValue.snapshot) {
-        this._reportMissingRequiredFieldsInSnapshot(cachedValue.snapshot);
+      if (cachedValue.kind === 'done' && cachedValue.result.snapshot) {
+        this._reportMissingRequiredFieldsInSnapshot(cachedValue.result.snapshot);
 
-        return cachedValue;
+        return cachedValue.result;
       }
     } // 2. If not, try reading the fragment from the Relay store.
     // If the snapshot has data, return it and save it in cache
@@ -147,41 +276,120 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
     var snapshot = fragmentSelector.kind === 'PluralReaderSelector' ? fragmentSelector.selectors.map(function (s) {
       return environment.lookup(s);
     }) : environment.lookup(fragmentSelector);
-    var fragmentOwner = fragmentSelector.kind === 'PluralReaderSelector' ? fragmentSelector.selectors[0].owner : fragmentSelector.owner;
+    var fragmentResult = getFragmentResult(fragmentIdentifier, snapshot, storeEpoch);
 
-    if (!isMissingData(snapshot)) {
+    if (!fragmentResult.isMissingData) {
       this._reportMissingRequiredFieldsInSnapshot(snapshot);
 
-      var fragmentResult = getFragmentResult(fragmentIdentifier, snapshot);
-
-      this._cache.set(fragmentIdentifier, fragmentResult);
+      this._cache.set(fragmentIdentifier, {
+        kind: 'done',
+        result: fragmentResult
+      });
 
       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;
 
-    var networkPromise = this._getAndSavePromiseForFragmentRequestInFlight(fragmentIdentifier, fragmentOwner);
+    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;
 
-    if (networkPromise != null) {
-      throw networkPromise;
+    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;
+
+      environment.__log({
+        name: 'suspense.fragment',
+        data: fragmentResult.data,
+        fragment: fragmentNode,
+        isRelayHooks: true,
+        isPromiseCached: false,
+        isMissingData: fragmentResult.isMissingData,
+        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 ((_clientEdgePromises2 = clientEdgePromises) === null || _clientEdgePromises2 === void 0 ? void 0 : _clientEdgePromises2.length) ? Promise.all([parentQueryPromiseResultPromise].concat((0, _toConsumableArray2["default"])(clientEdgePromises))) : parentQueryPromiseResultPromise;
     }
 
     this._reportMissingRequiredFieldsInSnapshot(snapshot);
 
-    return getFragmentResult(fragmentIdentifier, snapshot);
+    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 {
@@ -191,17 +399,18 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
     }
   };
 
-  _proto.readSpec = function readSpec(fragmentNodes, fragmentRefs, componentDisplayName) {
-    var _this2 = this;
+  _proto2.readSpec = function readSpec(fragmentNodes, fragmentRefs, componentDisplayName) {
+    var result = {};
 
-    return mapObject(fragmentNodes, function (fragmentNode, fragmentKey) {
-      var fragmentRef = fragmentRefs[fragmentKey];
-      return _this2.read(fragmentNode, fragmentRef, componentDisplayName, fragmentKey);
-    });
+    for (var _key in fragmentNodes) {
+      result[_key] = this.read(fragmentNodes[_key], fragmentRefs[_key], componentDisplayName, _key);
+    }
+
+    return result;
   };
 
-  _proto.subscribe = function subscribe(fragmentResult, callback) {
-    var _this3 = this;
+  _proto2.subscribe = function subscribe(fragmentResult, callback) {
+    var _this5 = this;
 
     var environment = this._environment;
     var cacheKey = fragmentResult.cacheKey;
@@ -226,42 +435,62 @@ 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) {
-          _this3._updatePluralSnapshot(cacheKey, currentSnapshot, latestSnapshot, idx);
+        disposables.push(environment.subscribe(snapshot, function (latestSnapshot) {
+          var storeEpoch = environment.getStore().getEpoch();
+
+          _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) {
-        _this3._cache.set(cacheKey, getFragmentResult(cacheKey, latestSnapshot));
+      disposables.push(environment.subscribe(currentSnapshot, function (latestSnapshot) {
+        var storeEpoch = environment.getStore().getEpoch();
+
+        _this5._cache.set(cacheKey, {
+          kind: 'done',
+          result: getFragmentResult(cacheKey, latestSnapshot, storeEpoch)
+        });
 
         callback();
       }));
     }
 
+    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();
         });
 
-        _this3._cache["delete"](cacheKey);
+        _this5._cache["delete"](cacheKey);
       }
     };
   };
 
-  _proto.subscribeSpec = function subscribeSpec(fragmentResults, callback) {
-    var _this4 = this;
+  _proto2.subscribeSpec = function subscribeSpec(fragmentResults, callback) {
+    var _this6 = this;
 
     var disposables = Object.keys(fragmentResults).map(function (key) {
-      return _this4.subscribe(fragmentResults[key], callback);
+      return _this6.subscribe(fragmentResults[key], callback);
     });
     return {
       dispose: function dispose() {
@@ -272,18 +501,26 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
     };
   };
 
-  _proto.checkMissedUpdates = function checkMissedUpdates(fragmentResult) {
+  _proto2.checkMissedUpdates = function checkMissedUpdates(fragmentResult) {
     var environment = this._environment;
-    var cacheKey = fragmentResult.cacheKey;
     var renderedSnapshot = fragmentResult.snapshot;
 
     if (!renderedSnapshot) {
       return [false, null];
     }
 
-    var didMissUpdates = false;
+    var storeEpoch = null; // Bail out if the store hasn't been written since last read
+
+    storeEpoch = environment.getStore().getEpoch();
+
+    if (fragmentResult.storeEpoch === storeEpoch) {
+      return [false, fragmentResult.snapshot];
+    }
+
+    var cacheKey = fragmentResult.cacheKey;
 
     if (Array.isArray(renderedSnapshot)) {
+      var didMissUpdates = false;
       var currentSnapshots = [];
       renderedSnapshot.forEach(function (snapshot, idx) {
         var currentSnapshot = environment.lookup(snapshot.selector);
@@ -299,10 +536,14 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
         }
 
         currentSnapshots[idx] = currentSnapshot;
-      });
+      }); // Only update the cache when the data is changed to avoid
+      // returning different `data` instances
 
       if (didMissUpdates) {
-        this._cache.set(cacheKey, getFragmentResult(cacheKey, currentSnapshots));
+        this._cache.set(cacheKey, {
+          kind: 'done',
+          result: getFragmentResult(cacheKey, currentSnapshots, storeEpoch)
+        });
       }
 
       return [didMissUpdates, currentSnapshots];
@@ -312,60 +553,71 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
     var renderData = renderedSnapshot.data;
     var currentData = currentSnapshot.data;
     var updatedData = recycleNodesInto(renderData, currentData);
-    currentSnapshot = {
+    var updatedCurrentSnapshot = {
       data: updatedData,
       isMissingData: currentSnapshot.isMissingData,
+      missingClientEdges: currentSnapshot.missingClientEdges,
       seenRecords: currentSnapshot.seenRecords,
       selector: currentSnapshot.selector,
       missingRequiredFields: currentSnapshot.missingRequiredFields
     };
 
     if (updatedData !== renderData) {
-      this._cache.set(cacheKey, getFragmentResult(cacheKey, currentSnapshot));
-
-      didMissUpdates = true;
+      this._cache.set(cacheKey, {
+        kind: 'done',
+        result: getFragmentResult(cacheKey, updatedCurrentSnapshot, storeEpoch)
+      });
     }
 
-    return [didMissUpdates, currentSnapshot];
+    return [updatedData !== renderData, updatedCurrentSnapshot];
   };
 
-  _proto.checkMissedUpdatesSpec = function checkMissedUpdatesSpec(fragmentResults) {
-    var _this5 = this;
+  _proto2.checkMissedUpdatesSpec = function checkMissedUpdatesSpec(fragmentResults) {
+    var _this7 = this;
 
     return Object.keys(fragmentResults).some(function (key) {
-      return _this5.checkMissedUpdates(fragmentResults[key])[0];
+      return _this7.checkMissedUpdates(fragmentResults[key])[0];
     });
   };
 
-  _proto._getAndSavePromiseForFragmentRequestInFlight = function _getAndSavePromiseForFragmentRequestInFlight(cacheKey, fragmentOwner) {
-    var _this6 = this;
+  _proto2._getAndSavePromiseForFragmentRequestInFlight = function _getAndSavePromiseForFragmentRequestInFlight(cacheKey, fragmentNode, fragmentOwner, fragmentResult) {
+    var _this8 = this;
 
-    var _getPromiseForActiveR;
+    var pendingOperationsResult = getPendingOperationsForFragment(this._environment, fragmentNode, fragmentOwner);
 
-    var environment = this._environment;
-    var networkPromise = (_getPromiseForActiveR = getPromiseForActiveRequest(environment, fragmentOwner)) !== null && _getPromiseForActiveR !== void 0 ? _getPromiseForActiveR : getPromiseForPendingOperationAffectingOwner(environment, fragmentOwner);
-
-    if (!networkPromise) {
+    if (pendingOperationsResult == null) {
       return null;
     } // When the Promise for the request resolves, we need to make sure to
     // update the cache with the latest data available in the store before
     // resolving the Promise
 
 
+    var networkPromise = pendingOperationsResult.promise;
+    var pendingOperations = pendingOperationsResult.pendingOperations;
     var promise = networkPromise.then(function () {
-      _this6._cache["delete"](cacheKey);
+      _this8._cache["delete"](cacheKey);
     })["catch"](function (error) {
-      _this6._cache["delete"](cacheKey);
-    });
+      _this8._cache["delete"](cacheKey);
+    }); // $FlowExpectedError[prop-missing] Expando to annotate Promises.
 
-    this._cache.set(cacheKey, promise); // $FlowExpectedError[prop-missing] Expando to annotate Promises.
+    promise.displayName = networkPromise.displayName;
 
+    this._cache.set(cacheKey, {
+      kind: 'pending',
+      pendingOperations: pendingOperations,
+      promise: promise,
+      result: fragmentResult
+    });
 
-    promise.displayName = 'Relay(' + fragmentOwner.node.params.name + ')';
-    return promise;
+    return {
+      promise: promise,
+      pendingOperations: pendingOperations
+    };
   };
 
-  _proto._updatePluralSnapshot = function _updatePluralSnapshot(cacheKey, baseSnapshots, latestSnapshot, idx) {
+  _proto2._updatePluralSnapshot = function _updatePluralSnapshot(cacheKey, baseSnapshots, latestSnapshot, idx, storeEpoch) {
+    var _currentFragmentResul;
+
     var currentFragmentResult = this._cache.get(cacheKey);
 
     if (isPromise(currentFragmentResult)) {
@@ -373,7 +625,7 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
       return;
     }
 
-    var currentSnapshot = currentFragmentResult === null || currentFragmentResult === void 0 ? void 0 : currentFragmentResult.snapshot;
+    var currentSnapshot = currentFragmentResult === null || currentFragmentResult === void 0 ? void 0 : (_currentFragmentResul = currentFragmentResult.result) === null || _currentFragmentResul === void 0 ? void 0 : _currentFragmentResul.snapshot;
 
     if (currentSnapshot && !Array.isArray(currentSnapshot)) {
       reportInvalidCachedData(latestSnapshot.selector.node.name);
@@ -383,7 +635,10 @@ var FragmentResourceImpl = /*#__PURE__*/function () {
     var nextSnapshots = currentSnapshot ? (0, _toConsumableArray2["default"])(currentSnapshot) : (0, _toConsumableArray2["default"])(baseSnapshots);
     nextSnapshots[idx] = latestSnapshot;
 
-    this._cache.set(cacheKey, getFragmentResult(cacheKey, nextSnapshots));
+    this._cache.set(cacheKey, {
+      kind: 'done',
+      result: getFragmentResult(cacheKey, nextSnapshots, storeEpoch)
+    });
   };
 
   return FragmentResourceImpl;

package/lib/relay-hooks/LRUCache.js

@@ -11,7 +11,7 @@
 // flowlint ambiguous-object-type:error
 'use strict';
 
-var invariant = require("fbjs/lib/invariant");
+var invariant = require('invariant');
 
 /**
  * JS maps (both plain objects and Map) maintain key insertion