react-relay 14.0.0 → 14.1.0

package/lib/relay-hooks/react-cache/useFragmentInternal_REACT_CACHE.js

@@ -8,10 +8,9 @@
  * @emails oncall+relay
  * @format
  */
-// flowlint ambiguous-object-type:error
 'use strict';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
@@ -19,27 +18,29 @@ var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var useRelayEnvironment = require('../useRelayEnvironment');
+var _require = require('../QueryResource'),
+    getQueryResourceForEnvironment = _require.getQueryResourceForEnvironment;
 
-var getQueryResultOrFetchQuery = require('./getQueryResultOrFetchQuery_REACT_CACHE');
+var useRelayEnvironment = require('../useRelayEnvironment');
 
 var invariant = require('invariant');
 
-var _require = require('react'),
-    useDebugValue = _require.useDebugValue,
-    useEffect = _require.useEffect,
-    useMemo = _require.useMemo,
-    useRef = _require.useRef,
-    useState = _require.useState;
-
-var _require2 = require('relay-runtime'),
-    areEqualSelectors = _require2.areEqualSelectors,
-    createOperationDescriptor = _require2.createOperationDescriptor,
-    getPendingOperationsForFragment = _require2.getPendingOperationsForFragment,
-    getSelector = _require2.getSelector,
-    getVariablesFromFragment = _require2.getVariablesFromFragment,
-    handlePotentialSnapshotErrors = _require2.handlePotentialSnapshotErrors,
-    recycleNodesInto = _require2.recycleNodesInto;
+var _require2 = require('react'),
+    useDebugValue = _require2.useDebugValue,
+    useEffect = _require2.useEffect,
+    useMemo = _require2.useMemo,
+    useRef = _require2.useRef,
+    useState = _require2.useState;
+
+var _require3 = require('relay-runtime'),
+    fetchQueryInternal = _require3.__internal.fetchQuery,
+    areEqualSelectors = _require3.areEqualSelectors,
+    createOperationDescriptor = _require3.createOperationDescriptor,
+    getPendingOperationsForFragment = _require3.getPendingOperationsForFragment,
+    getSelector = _require3.getSelector,
+    getVariablesFromFragment = _require3.getVariablesFromFragment,
+    handlePotentialSnapshotErrors = _require3.handlePotentialSnapshotErrors,
+    recycleNodesInto = _require3.recycleNodesInto;
 
 var warning = require("fbjs/lib/warning");
 
@@ -102,23 +103,70 @@ function getMissingClientEdges(state) {
   }
 }
 
-function handlePotentialSnapshotErrorsForState(environment, state) {
-  if (state.kind === 'singular') {
-    handlePotentialSnapshotErrors(environment, state.snapshot.missingRequiredFields, state.snapshot.relayResolverErrors);
-  } else if (state.kind === 'plural') {
+function getSuspendingLiveResolver(state) {
+  if (state.kind === 'bailout') {
+    return null;
+  } else if (state.kind === 'singular') {
+    var _state$snapshot$missi2;
+
+    return (_state$snapshot$missi2 = state.snapshot.missingLiveResolverFields) !== null && _state$snapshot$missi2 !== void 0 ? _state$snapshot$missi2 : null;
+  } else {
+    var missingFields = null;
+
     var _iterator3 = (0, _createForOfIteratorHelper2["default"])(state.snapshots),
         _step3;
 
     try {
       for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
         var snapshot = _step3.value;
-        handlePotentialSnapshotErrors(environment, snapshot.missingRequiredFields, snapshot.relayResolverErrors);
+
+        if (snapshot.missingLiveResolverFields) {
+          var _missingFields;
+
+          missingFields = (_missingFields = missingFields) !== null && _missingFields !== void 0 ? _missingFields : [];
+
+          var _iterator4 = (0, _createForOfIteratorHelper2["default"])(snapshot.missingLiveResolverFields),
+              _step4;
+
+          try {
+            for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+              var edge = _step4.value;
+              missingFields.push(edge);
+            }
+          } catch (err) {
+            _iterator4.e(err);
+          } finally {
+            _iterator4.f();
+          }
+        }
       }
     } catch (err) {
       _iterator3.e(err);
     } finally {
       _iterator3.f();
     }
+
+    return missingFields;
+  }
+}
+
+function handlePotentialSnapshotErrorsForState(environment, state) {
+  if (state.kind === 'singular') {
+    handlePotentialSnapshotErrors(environment, state.snapshot.missingRequiredFields, state.snapshot.relayResolverErrors);
+  } else if (state.kind === 'plural') {
+    var _iterator5 = (0, _createForOfIteratorHelper2["default"])(state.snapshots),
+        _step5;
+
+    try {
+      for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+        var snapshot = _step5.value;
+        handlePotentialSnapshotErrors(environment, snapshot.missingRequiredFields, snapshot.relayResolverErrors);
+      }
+    } catch (err) {
+      _iterator5.e(err);
+    } finally {
+      _iterator5.f();
+    }
   }
 }
 /**
@@ -205,16 +253,11 @@ function handleMissingClientEdge(environment, parentFragmentNode, parentFragment
   });
   var queryOperationDescriptor = createOperationDescriptor(missingClientEdgeRequestInfo.request, variables, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.networkCacheConfig); // This may suspend. We don't need to do anything with the results; all we're
   // doing here is started the query if needed and retaining and releasing it
-  // according to the component mount/suspense cycle; getQueryResultOrFetchQuery
+  // according to the component mount/suspense cycle; QueryResource
   // already handles this by itself.
 
-  var _getQueryResultOrFetc = getQueryResultOrFetchQuery(environment, queryOperationDescriptor, {
-    fetchPolicy: queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.fetchPolicy
-  }),
-      _ = _getQueryResultOrFetc[0],
-      effect = _getQueryResultOrFetc[1];
-
-  return effect;
+  var QueryResource = getQueryResourceForEnvironment(environment);
+  return QueryResource.prepare(queryOperationDescriptor, fetchQueryInternal(environment, queryOperationDescriptor), queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.fetchPolicy);
 }
 
 function subscribeToSnapshot(environment, state, setState) {
@@ -222,7 +265,14 @@ function subscribeToSnapshot(environment, state, setState) {
     return function () {};
   } else if (state.kind === 'singular') {
     var disposable = environment.subscribe(state.snapshot, function (latestSnapshot) {
-      setState(function (_) {
+      setState(function (prevState) {
+        // In theory a setState from a subscription could be batched together
+        // with a setState to change the fragment selector. Guard against this
+        // by bailing out of the state update if the selector has changed.
+        if (prevState.kind !== 'singular' || prevState.snapshot.selector !== latestSnapshot.selector) {
+          return prevState;
+        }
+
         return {
           kind: 'singular',
           snapshot: latestSnapshot,
@@ -236,9 +286,17 @@ function subscribeToSnapshot(environment, state, setState) {
   } else {
     var disposables = state.snapshots.map(function (snapshot, index) {
       return environment.subscribe(snapshot, function (latestSnapshot) {
-        setState(function (existing) {
-          !(existing.kind === 'plural') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot go from singular to plural or from bailout to plural.') : invariant(false) : void 0;
-          var updated = (0, _toConsumableArray2["default"])(existing.snapshots);
+        setState(function (prevState) {
+          var _prevState$snapshots$;
+
+          // In theory a setState from a subscription could be batched together
+          // with a setState to change the fragment selector. Guard against this
+          // by bailing out of the state update if the selector has changed.
+          if (prevState.kind !== 'plural' || ((_prevState$snapshots$ = prevState.snapshots[index]) === null || _prevState$snapshots$ === void 0 ? void 0 : _prevState$snapshots$.selector) !== latestSnapshot.selector) {
+            return prevState;
+          }
+
+          var updated = (0, _toConsumableArray2["default"])(prevState.snapshots);
           updated[index] = latestSnapshot;
           return {
             kind: 'plural',
@@ -249,29 +307,31 @@ function subscribeToSnapshot(environment, state, setState) {
       });
     });
     return function () {
-      var _iterator4 = (0, _createForOfIteratorHelper2["default"])(disposables),
-          _step4;
+      var _iterator6 = (0, _createForOfIteratorHelper2["default"])(disposables),
+          _step6;
 
       try {
-        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-          var d = _step4.value;
+        for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+          var d = _step6.value;
           d.dispose();
         }
       } catch (err) {
-        _iterator4.e(err);
+        _iterator6.e(err);
       } finally {
-        _iterator4.f();
+        _iterator6.f();
       }
     };
   }
 }
 
-function getFragmentState(environment, fragmentSelector, isPlural) {
+function getFragmentState(environment, fragmentSelector) {
   if (fragmentSelector == null) {
     return {
       kind: 'bailout'
     };
   } else if (fragmentSelector.kind === 'PluralReaderSelector') {
+    // Note that if fragmentRef is an empty array, fragmentSelector will be null so we'll hit the above case.
+    // Null is returned by getSelector if fragmentRef has no non-null items.
     return {
       kind: 'plural',
       snapshots: fragmentSelector.selectors.map(function (s) {
@@ -307,38 +367,21 @@ function useFragmentInternal_REACT_CACHE(fragmentNode, fragmentRef, hookDisplayN
   var environment = useRelayEnvironment();
 
   var _useState = useState(function () {
-    return getFragmentState(environment, fragmentSelector, isPlural);
+    return getFragmentState(environment, fragmentSelector);
   }),
-      rawState = _useState[0],
-      setState = _useState[1]; // On second look this separate rawState may not be needed at all, it can just be
-  // put into getFragmentState. Exception: can we properly handle the case where the
-  // fragmentRef goes from non-null to null?
-
+      _state = _useState[0],
+      setState = _useState[1];
 
-  var stateFromRawState = function stateFromRawState(state) {
-    if (fragmentRef == null) {
-      return {
-        kind: 'bailout'
-      };
-    } else if (state.kind === 'plural' && state.snapshots.length === 0) {
-      return {
-        kind: 'bailout'
-      };
-    } else {
-      return state;
-    }
-  };
-
-  var state = stateFromRawState(rawState); // This copy of the state we only update when something requires us to
+  var state = _state; // This copy of the state we only update when something requires us to
   // unsubscribe and re-subscribe, namely a changed environment or
   // fragment selector.
 
   var _useState2 = useState(state),
-      rawSubscribedState = _useState2[0],
+      _subscribedState = _useState2[0],
       setSubscribedState = _useState2[1]; // FIXME since this is used as an effect dependency, it needs to be memoized.
 
 
-  var subscribedState = stateFromRawState(rawSubscribedState);
+  var subscribedState = _subscribedState;
 
   var _useState3 = useState(fragmentSelector),
       previousFragmentSelector = _useState3[0],
@@ -352,7 +395,7 @@ function useFragmentInternal_REACT_CACHE(fragmentNode, fragmentRef, hookDisplayN
     // Enqueue setState to record the new selector and state
     setPreviousFragmentSelector(fragmentSelector);
     setPreviousEnvironment(environment);
-    var newState = stateFromRawState(getFragmentState(environment, fragmentSelector, isPlural));
+    var newState = getFragmentState(environment, fragmentSelector);
     setState(newState);
     setSubscribedState(newState); // This causes us to form a new subscription
     // But render with the latest state w/o waiting for the setState. Otherwise
@@ -361,88 +404,115 @@ function useFragmentInternal_REACT_CACHE(fragmentNode, fragmentRef, hookDisplayN
 
     state = newState;
     subscribedState = newState;
-  } // Handle the queries for any missing client edges; this may suspend.
-  // FIXME handle client edges in parallel.
+  } // The purpose of this is to detect whether we have ever committed, because we
+  // don't suspend on store updates, only when the component either is first trying
+  // to mount or when the our selector changes. The selector change in particular is
+  // how we suspend for pagination and refetech. Also, fragment selector can be null
+  // or undefined, so we use false as a special value to distinguish from all fragment
+  // selectors; false means that the component hasn't mounted yet.
+
 
+  var committedFragmentSelectorRef = useRef(false);
+  useEffect(function () {
+    committedFragmentSelectorRef.current = fragmentSelector;
+  }, [fragmentSelector]); // Handle the queries for any missing client edges; this may suspend.
+  // FIXME handle client edges in parallel.
 
   if (((_fragmentNode$metadat2 = fragmentNode.metadata) === null || _fragmentNode$metadat2 === void 0 ? void 0 : _fragmentNode$metadat2.hasClientEdges) === true) {
     // The fragment is validated to be static (in useFragment) and hasClientEdges is
     // a static (constant) property of the fragment. In practice, this effect will
     // always or never run for a given invocation of this hook.
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    var effects = useMemo(function () {
+    var clientEdgeQueries = useMemo(function () {
       var missingClientEdges = getMissingClientEdges(state); // eslint-disable-next-line no-shadow
 
-      var effects;
+      var clientEdgeQueries;
 
-      if (missingClientEdges === null || missingClientEdges === void 0 ? void 0 : missingClientEdges.length) {
-        effects = [];
+      if (missingClientEdges !== null && missingClientEdges !== void 0 && missingClientEdges.length) {
+        clientEdgeQueries = [];
 
-        var _iterator5 = (0, _createForOfIteratorHelper2["default"])(missingClientEdges),
-            _step5;
+        var _iterator7 = (0, _createForOfIteratorHelper2["default"])(missingClientEdges),
+            _step7;
 
         try {
-          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-            var edge = _step5.value;
-            effects.push(handleMissingClientEdge(environment, fragmentNode, fragmentRef, edge, queryOptions));
+          for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+            var edge = _step7.value;
+            clientEdgeQueries.push(handleMissingClientEdge(environment, fragmentNode, fragmentRef, edge, queryOptions));
           }
         } catch (err) {
-          _iterator5.e(err);
+          _iterator7.e(err);
         } finally {
-          _iterator5.f();
+          _iterator7.f();
         }
       }
 
-      return effects;
+      return clientEdgeQueries;
     }, [state, environment, fragmentNode, fragmentRef, queryOptions]); // See above note
     // eslint-disable-next-line react-hooks/rules-of-hooks
 
     useEffect(function () {
-      if (effects === null || effects === void 0 ? void 0 : effects.length) {
-        var cleanups = [];
+      var QueryResource = getQueryResourceForEnvironment(environment);
+
+      if (clientEdgeQueries !== null && clientEdgeQueries !== void 0 && clientEdgeQueries.length) {
+        var disposables = [];
 
-        var _iterator6 = (0, _createForOfIteratorHelper2["default"])(effects),
-            _step6;
+        var _iterator8 = (0, _createForOfIteratorHelper2["default"])(clientEdgeQueries),
+            _step8;
 
         try {
-          for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-            var effect = _step6.value;
-            cleanups.push(effect());
+          for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
+            var query = _step8.value;
+            disposables.push(QueryResource.retain(query));
           }
         } catch (err) {
-          _iterator6.e(err);
+          _iterator8.e(err);
         } finally {
-          _iterator6.f();
+          _iterator8.f();
         }
 
         return function () {
-          var _iterator7 = (0, _createForOfIteratorHelper2["default"])(cleanups),
-              _step7;
+          var _iterator9 = (0, _createForOfIteratorHelper2["default"])(disposables),
+              _step9;
 
           try {
-            for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
-              var cleanup = _step7.value;
-              cleanup();
+            for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
+              var disposable = _step9.value;
+              disposable.dispose();
             }
           } catch (err) {
-            _iterator7.e(err);
+            _iterator9.e(err);
           } finally {
-            _iterator7.f();
+            _iterator9.f();
           }
         };
       }
-    }, [effects]);
+    }, [environment, clientEdgeQueries]);
   }
 
   if (isMissingData(state)) {
-    // Suspend if an active operation bears on this fragment, either the
-    // fragment's owner or some other mutation etc. that could affect it:
-    !(fragmentSelector != null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'refinement, see invariants above') : invariant(false) : void 0;
-    var fragmentOwner = fragmentSelector.kind === 'PluralReaderSelector' ? fragmentSelector.selectors[0].owner : fragmentSelector.owner;
-    var pendingOperationsResult = getPendingOperationsForFragment(environment, fragmentNode, fragmentOwner);
-
-    if (pendingOperationsResult) {
-      throw pendingOperationsResult.promise;
+    // Suspend if a Live Resolver within this fragment is in a suspended state:
+    var suspendingLiveResolvers = getSuspendingLiveResolver(state);
+
+    if (suspendingLiveResolvers != null && suspendingLiveResolvers.length > 0) {
+      throw Promise.all(suspendingLiveResolvers.map(function (_ref) {
+        var liveStateID = _ref.liveStateID;
+        // $FlowFixMe[prop-missing] This is expected to be a LiveResolverStore
+        return environment.getStore().getLiveResolverPromise(liveStateID);
+      }));
+    } // Suspend if an active operation bears on this fragment, either the
+    // fragment's owner or some other mutation etc. that could affect it.
+    // We only suspend when the component is first trying to mount or changing
+    // selectors, not if data becomes missing later:
+
+
+    if (!committedFragmentSelectorRef.current || !areEqualSelectors(committedFragmentSelectorRef.current, fragmentSelector)) {
+      !(fragmentSelector != null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'refinement, see invariants above') : invariant(false) : void 0;
+      var fragmentOwner = fragmentSelector.kind === 'PluralReaderSelector' ? fragmentSelector.selectors[0].owner : fragmentSelector.owner;
+      var pendingOperationsResult = getPendingOperationsForFragment(environment, fragmentNode, fragmentOwner);
+
+      if (pendingOperationsResult) {
+        throw pendingOperationsResult.promise;
+      }
     } // Report required fields only if we're not suspending, since that means
     // they're missing even though we are out of options for possibly fetching them:
 
@@ -472,23 +542,7 @@ function useFragmentInternal_REACT_CACHE(fragmentNode, fragmentRef, hookDisplayN
       currentState = updatedState;
     }
 
-    return subscribeToSnapshot(environment, currentState, function (updater) {
-      setState(function (latestState) {
-        var _latestState$snapshot, _currentState$snapsho;
-
-        if (((_latestState$snapshot = latestState.snapshot) === null || _latestState$snapshot === void 0 ? void 0 : _latestState$snapshot.selector) !== ((_currentState$snapsho = currentState.snapshot) === null || _currentState$snapsho === void 0 ? void 0 : _currentState$snapsho.selector)) {
-          // Ignore updates to the subscription if it's for a previous fragment selector
-          // than the latest one to be rendered. This can happen if the store is updated
-          // after we re-render with a new fragmentRef prop but before the effect fires
-          // in which we unsubscribe to the old one and subscribe to the new one.
-          // (NB: it's safe to compare the selectors by reference because the selector
-          // is recycled into new snapshots.)
-          return latestState;
-        } else {
-          return updater(latestState);
-        }
-      });
-    });
+    return subscribeToSnapshot(environment, currentState, setState);
   }, [environment, subscribedState]);
   var data;
 
@@ -498,17 +552,21 @@ function useFragmentInternal_REACT_CACHE(fragmentNode, fragmentRef, hookDisplayN
     //
     // Note that isPlural is a constant property of the fragment and does not change
     // for a particular useFragment invocation site
+    var fragmentRefIsNullish = fragmentRef == null; // for less sensitive memoization
     // eslint-disable-next-line react-hooks/rules-of-hooks
+
     data = useMemo(function () {
       if (state.kind === 'bailout') {
-        return [];
+        // Bailout state can happen if the fragmentRef is a plural array that is empty or has no
+        // non-null entries. In that case, the compatible behavior is to return [] instead of null.
+        return fragmentRefIsNullish ? null : [];
       } else {
         !(state.kind === 'plural') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Expected state to be plural because fragment is plural') : invariant(false) : void 0;
         return state.snapshots.map(function (s) {
           return s.data;
         });
       }
-    }, [state]);
+    }, [state, fragmentRefIsNullish]);
   } else if (state.kind === 'bailout') {
     // This case doesn't allocate a new object so it doesn't have to be memoized
     data = null;

package/lib/relay-hooks/react-cache/useFragment_REACT_CACHE.js

@@ -8,7 +8,6 @@
  * 
  * @format
  */
-// flowlint ambiguous-object-type:error
 'use strict';
 
 var _require = require('../loadQuery'),

package/lib/relay-hooks/react-cache/useLazyLoadQuery_REACT_CACHE.js

@@ -8,7 +8,6 @@
  * @emails oncall+relay
  * @format
  */
-// flowlint ambiguous-object-type:error
 'use strict';
 
 var _require = require('../loadQuery'),

package/lib/relay-hooks/react-cache/usePaginationFragment_REACT_CACHE.js

@@ -0,0 +1,150 @@
+/**
+ * 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.
+ *
+ * @emails oncall+relay
+ * 
+ * @format
+ */
+'use strict';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var useLoadMoreFunction = require('../useLoadMoreFunction');
+
+var useStaticFragmentNodeWarning = require('../useStaticFragmentNodeWarning');
+
+var useRefetchableFragmentInternal = require('./useRefetchableFragmentInternal_REACT_CACHE');
+
+var _require = require('react'),
+    useCallback = _require.useCallback,
+    useDebugValue = _require.useDebugValue,
+    useState = _require.useState;
+
+var _require2 = require('relay-runtime'),
+    getFragment = _require2.getFragment,
+    getFragmentIdentifier = _require2.getFragmentIdentifier,
+    getPaginationMetadata = _require2.getPaginationMetadata;
+
+function usePaginationFragment(fragmentInput, parentFragmentRef) {
+  var fragmentNode = getFragment(fragmentInput);
+  useStaticFragmentNodeWarning(fragmentNode, 'first argument of usePaginationFragment()');
+  var componentDisplayName = 'usePaginationFragment()';
+
+  var _getPaginationMetadat = getPaginationMetadata(fragmentNode, componentDisplayName),
+      connectionPathInFragmentData = _getPaginationMetadat.connectionPathInFragmentData,
+      paginationRequest = _getPaginationMetadat.paginationRequest,
+      paginationMetadata = _getPaginationMetadat.paginationMetadata,
+      identifierField = _getPaginationMetadat.identifierField;
+
+  var _useRefetchableFragme = useRefetchableFragmentInternal(fragmentNode, parentFragmentRef, componentDisplayName),
+      fragmentData = _useRefetchableFragme.fragmentData,
+      fragmentRef = _useRefetchableFragme.fragmentRef,
+      refetch = _useRefetchableFragme.refetch;
+
+  var fragmentIdentifier = getFragmentIdentifier(fragmentNode, fragmentRef); // Backward pagination
+
+  var _useLoadMore = useLoadMore({
+    componentDisplayName: componentDisplayName,
+    connectionPathInFragmentData: connectionPathInFragmentData,
+    direction: 'backward',
+    fragmentData: fragmentData,
+    fragmentIdentifier: fragmentIdentifier,
+    fragmentNode: fragmentNode,
+    fragmentRef: fragmentRef,
+    identifierField: identifierField,
+    paginationMetadata: paginationMetadata,
+    paginationRequest: paginationRequest
+  }),
+      loadPrevious = _useLoadMore[0],
+      hasPrevious = _useLoadMore[1],
+      isLoadingPrevious = _useLoadMore[2],
+      disposeFetchPrevious = _useLoadMore[3]; // Forward pagination
+
+
+  var _useLoadMore2 = useLoadMore({
+    componentDisplayName: componentDisplayName,
+    connectionPathInFragmentData: connectionPathInFragmentData,
+    direction: 'forward',
+    fragmentData: fragmentData,
+    fragmentIdentifier: fragmentIdentifier,
+    fragmentNode: fragmentNode,
+    fragmentRef: fragmentRef,
+    identifierField: identifierField,
+    paginationMetadata: paginationMetadata,
+    paginationRequest: paginationRequest
+  }),
+      loadNext = _useLoadMore2[0],
+      hasNext = _useLoadMore2[1],
+      isLoadingNext = _useLoadMore2[2],
+      disposeFetchNext = _useLoadMore2[3];
+
+  var refetchPagination = useCallback(function (variables, options) {
+    disposeFetchNext();
+    disposeFetchPrevious();
+    return refetch(variables, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, options), {}, {
+      __environment: undefined
+    }));
+  }, [disposeFetchNext, disposeFetchPrevious, refetch]);
+
+  if (process.env.NODE_ENV !== "production") {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useDebugValue({
+      fragment: fragmentNode.name,
+      data: fragmentData,
+      hasNext: hasNext,
+      isLoadingNext: isLoadingNext,
+      hasPrevious: hasPrevious,
+      isLoadingPrevious: isLoadingPrevious
+    });
+  }
+
+  return {
+    data: fragmentData,
+    loadNext: loadNext,
+    loadPrevious: loadPrevious,
+    hasNext: hasNext,
+    hasPrevious: hasPrevious,
+    isLoadingNext: isLoadingNext,
+    isLoadingPrevious: isLoadingPrevious,
+    refetch: refetchPagination
+  };
+}
+
+function useLoadMore(args) {
+  var _useState = useState(false),
+      isLoadingMore = _useState[0],
+      setIsLoadingMore = _useState[1];
+
+  var observer = {
+    start: function start() {
+      return setIsLoadingMore(true);
+    },
+    complete: function complete() {
+      return setIsLoadingMore(false);
+    },
+    error: function error() {
+      return setIsLoadingMore(false);
+    }
+  };
+
+  var handleReset = function handleReset() {
+    return setIsLoadingMore(false);
+  };
+
+  var _useLoadMoreFunction = useLoadMoreFunction((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, args), {}, {
+    observer: observer,
+    onReset: handleReset
+  })),
+      loadMore = _useLoadMoreFunction[0],
+      hasMore = _useLoadMoreFunction[1],
+      disposeFetch = _useLoadMoreFunction[2];
+
+  return [loadMore, hasMore, isLoadingMore, disposeFetch];
+}
+
+module.exports = usePaginationFragment;

package/lib/relay-hooks/react-cache/usePreloadedQuery_REACT_CACHE.js

@@ -8,7 +8,6 @@
  * @emails oncall+relay
  * @format
  */
-// flowlint ambiguous-object-type:error
 'use strict';
 
 var _require = require('../loadQuery'),