react-relay 14.0.0 → 15.0.0

package/lib/relay-hooks/useLoadMoreFunction.js

@@ -4,89 +4,72 @@
  * 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
+ * @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 useFetchTrackingRef = require('./useFetchTrackingRef');
-
 var useIsMountedRef = require('./useIsMountedRef');
-
 var useIsOperationNodeActive = require('./useIsOperationNodeActive');
-
 var useRelayEnvironment = require('./useRelayEnvironment');
-
 var invariant = require('invariant');
-
 var _require = require('react'),
-    useCallback = _require.useCallback,
-    useEffect = _require.useEffect,
-    useState = _require.useState;
-
+  useCallback = _require.useCallback,
+  useEffect = _require.useEffect,
+  useState = _require.useState;
 var _require2 = require('relay-runtime'),
-    ConnectionInterface = _require2.ConnectionInterface,
-    fetchQuery = _require2.__internal.fetchQuery,
-    createOperationDescriptor = _require2.createOperationDescriptor,
-    getPaginationVariables = _require2.getPaginationVariables,
-    getSelector = _require2.getSelector,
-    getValueAtPath = _require2.getValueAtPath;
-
+  fetchQuery = _require2.__internal.fetchQuery,
+  ConnectionInterface = _require2.ConnectionInterface,
+  createOperationDescriptor = _require2.createOperationDescriptor,
+  getPaginationVariables = _require2.getPaginationVariables,
+  getSelector = _require2.getSelector,
+  getValueAtPath = _require2.getValueAtPath;
 var warning = require("fbjs/lib/warning");
-
 function useLoadMoreFunction(args) {
   var direction = args.direction,
-      fragmentNode = args.fragmentNode,
-      fragmentRef = args.fragmentRef,
-      fragmentIdentifier = args.fragmentIdentifier,
-      fragmentData = args.fragmentData,
-      connectionPathInFragmentData = args.connectionPathInFragmentData,
-      paginationRequest = args.paginationRequest,
-      paginationMetadata = args.paginationMetadata,
-      componentDisplayName = args.componentDisplayName,
-      observer = args.observer,
-      onReset = args.onReset,
-      identifierField = args.identifierField;
+    fragmentNode = args.fragmentNode,
+    fragmentRef = args.fragmentRef,
+    fragmentIdentifier = args.fragmentIdentifier,
+    fragmentData = args.fragmentData,
+    connectionPathInFragmentData = args.connectionPathInFragmentData,
+    paginationRequest = args.paginationRequest,
+    paginationMetadata = args.paginationMetadata,
+    componentDisplayName = args.componentDisplayName,
+    observer = args.observer,
+    onReset = args.onReset,
+    identifierField = args.identifierField;
   var environment = useRelayEnvironment();
-
   var _useFetchTrackingRef = useFetchTrackingRef(),
-      isFetchingRef = _useFetchTrackingRef.isFetchingRef,
-      startFetch = _useFetchTrackingRef.startFetch,
-      disposeFetch = _useFetchTrackingRef.disposeFetch,
-      completeFetch = _useFetchTrackingRef.completeFetch;
-
+    isFetchingRef = _useFetchTrackingRef.isFetchingRef,
+    startFetch = _useFetchTrackingRef.startFetch,
+    disposeFetch = _useFetchTrackingRef.disposeFetch,
+    completeFetch = _useFetchTrackingRef.completeFetch;
   var identifierValue = identifierField != null && fragmentData != null && typeof fragmentData === 'object' ? fragmentData[identifierField] : null;
   var isMountedRef = useIsMountedRef();
-
   var _useState = useState(environment),
-      mirroredEnvironment = _useState[0],
-      setMirroredEnvironment = _useState[1];
-
+    mirroredEnvironment = _useState[0],
+    setMirroredEnvironment = _useState[1];
   var _useState2 = useState(fragmentIdentifier),
-      mirroredFragmentIdentifier = _useState2[0],
-      setMirroredFragmentIdentifier = _useState2[1];
-
+    mirroredFragmentIdentifier = _useState2[0],
+    setMirroredFragmentIdentifier = _useState2[1];
   var isParentQueryActive = useIsOperationNodeActive(fragmentNode, fragmentRef);
   var shouldReset = environment !== mirroredEnvironment || fragmentIdentifier !== mirroredFragmentIdentifier;
-
   if (shouldReset) {
     disposeFetch();
     onReset();
     setMirroredEnvironment(environment);
     setMirroredFragmentIdentifier(fragmentIdentifier);
   }
-
   var _getConnectionState = getConnectionState(direction, fragmentNode, fragmentData, connectionPathInFragmentData),
-      cursor = _getConnectionState.cursor,
-      hasMore = _getConnectionState.hasMore; // Dispose of pagination requests in flight when unmounting
-
+    cursor = _getConnectionState.cursor,
+    hasMore = _getConnectionState.hasMore;
 
+  // Dispose of pagination requests in flight when unmounting
   useEffect(function () {
     return function () {
       disposeFetch();
@@ -94,8 +77,8 @@ function useLoadMoreFunction(args) {
   }, [disposeFetch]);
   var loadMore = useCallback(function (count, options) {
     // TODO(T41131846): Fetch/Caching policies for loadMore
-    var onComplete = options === null || options === void 0 ? void 0 : options.onComplete;
 
+    var onComplete = options === null || options === void 0 ? void 0 : options.onComplete;
     if (isMountedRef.current !== true) {
       // Bail out and warn if we're trying to paginate after the component
       // has unmounted
@@ -104,31 +87,27 @@ function useLoadMoreFunction(args) {
         dispose: function dispose() {}
       };
     }
-
     var fragmentSelector = getSelector(fragmentNode, fragmentRef);
-
     if (isFetchingRef.current === true || fragmentData == null || isParentQueryActive) {
       if (fragmentSelector == null) {
         process.env.NODE_ENV !== "production" ? warning(false, 'Relay: Unexpected fetch while using a null fragment ref ' + 'for fragment `%s` in `%s`. When fetching more items, we expect ' + "initial fragment data to be non-null. Please make sure you're " + 'passing a valid fragment ref to `%s` before paginating.', fragmentNode.name, componentDisplayName, componentDisplayName) : void 0;
       }
-
       if (onComplete) {
         onComplete(null);
       }
-
       return {
         dispose: function dispose() {}
       };
     }
-
     !(fragmentSelector != null && fragmentSelector.kind !== 'PluralReaderSelector') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: Expected to be able to find a non-plural fragment owner for ' + "fragment `%s` when using `%s`. If you're seeing this, " + 'this is likely a bug in Relay.', fragmentNode.name, componentDisplayName) : invariant(false) : void 0;
     var parentVariables = fragmentSelector.owner.variables;
     var fragmentVariables = fragmentSelector.variables;
     var extraVariables = options === null || options === void 0 ? void 0 : options.UNSTABLE_extraVariables;
     var baseVariables = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, parentVariables), fragmentVariables);
-    var paginationVariables = getPaginationVariables(direction, count, cursor, baseVariables, (0, _objectSpread2["default"])({}, extraVariables), paginationMetadata); // If the query needs an identifier value ('id' or similar) and one
-    // was not explicitly provided, read it from the fragment data.
+    var paginationVariables = getPaginationVariables(direction, count, cursor, baseVariables, (0, _objectSpread2["default"])({}, extraVariables), paginationMetadata);
 
+    // If the query needs an identifier value ('id' or similar) and one
+    // was not explicitly provided, read it from the fragment data.
     if (identifierField != null) {
       // @refetchable fragments are guaranteed to have an `id` selection
       // if the type is Node, implements Node, or is @fetchable. Double-check
@@ -136,10 +115,8 @@ function useLoadMoreFunction(args) {
       if (typeof identifierValue !== 'string') {
         process.env.NODE_ENV !== "production" ? warning(false, 'Relay: Expected result to have a string  ' + '`%s` in order to refetch, got `%s`.', identifierField, identifierValue) : void 0;
       }
-
       paginationVariables.id = identifierValue;
     }
-
     var paginationQuery = createOperationDescriptor(paginationRequest, paginationVariables, {
       force: true
     });
@@ -162,60 +139,51 @@ function useLoadMoreFunction(args) {
     return {
       dispose: disposeFetch
     };
-  }, // NOTE: We disable react-hooks-deps warning because all values
+  },
+  // NOTE: We disable react-hooks-deps warning because all values
   // inside paginationMetadata are static
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [environment, identifierValue, direction, cursor, startFetch, disposeFetch, completeFetch, isFetchingRef, isParentQueryActive, fragmentData, fragmentNode.name, fragmentRef, componentDisplayName]);
   return [loadMore, hasMore, disposeFetch];
 }
-
 function getConnectionState(direction, fragmentNode, fragmentData, connectionPathInFragmentData) {
   var _pageInfo$END_CURSOR, _pageInfo$START_CURSO;
-
   var _ConnectionInterface$ = ConnectionInterface.get(),
-      EDGES = _ConnectionInterface$.EDGES,
-      PAGE_INFO = _ConnectionInterface$.PAGE_INFO,
-      HAS_NEXT_PAGE = _ConnectionInterface$.HAS_NEXT_PAGE,
-      HAS_PREV_PAGE = _ConnectionInterface$.HAS_PREV_PAGE,
-      END_CURSOR = _ConnectionInterface$.END_CURSOR,
-      START_CURSOR = _ConnectionInterface$.START_CURSOR;
-
+    EDGES = _ConnectionInterface$.EDGES,
+    PAGE_INFO = _ConnectionInterface$.PAGE_INFO,
+    HAS_NEXT_PAGE = _ConnectionInterface$.HAS_NEXT_PAGE,
+    HAS_PREV_PAGE = _ConnectionInterface$.HAS_PREV_PAGE,
+    END_CURSOR = _ConnectionInterface$.END_CURSOR,
+    START_CURSOR = _ConnectionInterface$.START_CURSOR;
   var connection = getValueAtPath(fragmentData, connectionPathInFragmentData);
-
   if (connection == null) {
     return {
       cursor: null,
       hasMore: false
     };
   }
-
   !(typeof connection === 'object') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: Expected connection in fragment `%s` to have been `null`, or ' + 'a plain object with %s and %s properties. Instead got `%s`.', fragmentNode.name, EDGES, PAGE_INFO, connection) : invariant(false) : void 0;
   var edges = connection[EDGES];
   var pageInfo = connection[PAGE_INFO];
-
   if (edges == null || pageInfo == null) {
     return {
       cursor: null,
       hasMore: false
     };
   }
-
   !Array.isArray(edges) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: Expected connection in fragment `%s` to have a plural `%s` field. ' + 'Instead got `%s`.', fragmentNode.name, EDGES, edges) : invariant(false) : void 0;
   !(typeof pageInfo === 'object') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: Expected connection in fragment `%s` to have a `%s` field. ' + 'Instead got `%s`.', fragmentNode.name, PAGE_INFO, pageInfo) : invariant(false) : void 0;
   var cursor = direction === 'forward' ? (_pageInfo$END_CURSOR = pageInfo[END_CURSOR]) !== null && _pageInfo$END_CURSOR !== void 0 ? _pageInfo$END_CURSOR : null : (_pageInfo$START_CURSO = pageInfo[START_CURSOR]) !== null && _pageInfo$START_CURSO !== void 0 ? _pageInfo$START_CURSO : null;
   !(cursor === null || typeof cursor === 'string') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: Expected page info for connection in fragment `%s` to have a ' + 'valid `%s`. Instead got `%s`.', fragmentNode.name, START_CURSOR, cursor) : invariant(false) : void 0;
   var hasMore;
-
   if (direction === 'forward') {
     hasMore = cursor != null && pageInfo[HAS_NEXT_PAGE] === true;
   } else {
     hasMore = cursor != null && pageInfo[HAS_PREV_PAGE] === true;
   }
-
   return {
     cursor: cursor,
     hasMore: hasMore
   };
 }
-
 module.exports = useLoadMoreFunction;

package/lib/relay-hooks/useMemoOperationDescriptor.js

@@ -4,33 +4,24 @@
  * 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
+ * @oncall relay
  */
-// flowlint ambiguous-object-type:error
+
 'use strict';
 
 var useMemoVariables = require('./useMemoVariables');
-
 var React = require('react');
-
 var _require = require('relay-runtime'),
-    createOperationDescriptor = _require.createOperationDescriptor,
-    getRequest = _require.getRequest;
-
+  createOperationDescriptor = _require.createOperationDescriptor,
+  getRequest = _require.getRequest;
 var useMemo = React.useMemo;
-
 function useMemoOperationDescriptor(gqlQuery, variables, cacheConfig) {
-  var _useMemoVariables = useMemoVariables(variables),
-      memoVariables = _useMemoVariables[0];
-
-  var _useMemoVariables2 = useMemoVariables(cacheConfig || {}),
-      memoCacheConfig = _useMemoVariables2[0];
-
+  var memoVariables = useMemoVariables(variables);
+  var memoCacheConfig = useMemoVariables(cacheConfig || {});
   return useMemo(function () {
     return createOperationDescriptor(getRequest(gqlQuery), memoVariables, memoCacheConfig);
   }, [gqlQuery, memoVariables, memoCacheConfig]);
 }
-
 module.exports = useMemoOperationDescriptor;

package/lib/relay-hooks/useMemoVariables.js

@@ -4,50 +4,31 @@
  * 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
+ * @oncall relay
  */
-// flowlint ambiguous-object-type:error
+
 'use strict';
 
 var areEqual = require("fbjs/lib/areEqual");
+var _require = require('react'),
+  useState = _require.useState;
 
-var React = require('react');
-
-var useMemo = React.useMemo,
-    useRef = React.useRef,
-    useState = React.useState;
-
+/**
+ * Memoizes the passed in `variables` object based on `areEqual` equality.
+ * This is useful when a `variables` object is used as a value in a depencency
+ * array as it might often be constructed during render.
+ */
 function useMemoVariables(variables) {
-  var _variablesChangedGene2;
-
-  // The value of this ref is a counter that should be incremented when
-  // variables change. This allows us to use the counter as a
-  // memoization value to indicate if the computation for useMemo
-  // should be re-executed.
-  var variablesChangedGenerationRef = useRef(0); // We mirror the variables to check if they have changed between renders
-
   var _useState = useState(variables),
-      mirroredVariables = _useState[0],
-      setMirroredVariables = _useState[1];
-
-  var variablesChanged = !areEqual(variables, mirroredVariables);
-
-  if (variablesChanged) {
-    var _variablesChangedGene;
-
-    variablesChangedGenerationRef.current = ((_variablesChangedGene = variablesChangedGenerationRef.current) !== null && _variablesChangedGene !== void 0 ? _variablesChangedGene : 0) + 1;
+    mirroredVariables = _useState[0],
+    setMirroredVariables = _useState[1];
+  if (areEqual(variables, mirroredVariables)) {
+    return mirroredVariables;
+  } else {
     setMirroredVariables(variables);
-  } // NOTE: We disable react-hooks-deps warning because we explicitly
-  // don't want to memoize on object identity
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-
-
-  var memoVariables = useMemo(function () {
     return variables;
-  }, [variablesChangedGenerationRef.current]);
-  return [memoVariables, (_variablesChangedGene2 = variablesChangedGenerationRef.current) !== null && _variablesChangedGene2 !== void 0 ? _variablesChangedGene2 : 0];
+  }
 }
-
 module.exports = useMemoVariables;

package/lib/relay-hooks/useMutation.js

@@ -4,31 +4,24 @@
  * 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
+ * @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 useIsMountedRef = require('./useIsMountedRef');
-
 var useRelayEnvironment = require('./useRelayEnvironment');
-
 var React = require('react');
-
 var _require = require('relay-runtime'),
-    defaultCommitMutation = _require.commitMutation;
-
+  defaultCommitMutation = _require.commitMutation;
 var useState = React.useState,
-    useEffect = React.useEffect,
-    useRef = React.useRef,
-    useCallback = React.useCallback;
-
+  useEffect = React.useEffect,
+  useRef = React.useRef,
+  useCallback = React.useCallback;
 function useMutation(mutation) {
   var commitMutationFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultCommitMutation;
   var environment = useRelayEnvironment();
@@ -36,15 +29,12 @@ function useMutation(mutation) {
   var environmentRef = useRef(environment);
   var mutationRef = useRef(mutation);
   var inFlightMutationsRef = useRef(new Set());
-
   var _useState = useState(false),
-      isMutationInFlight = _useState[0],
-      setMutationInFlight = _useState[1];
-
+    isMutationInFlight = _useState[0],
+    setMutationInFlight = _useState[1];
   var cleanup = useCallback(function (disposable) {
     if (environmentRef.current === environment && mutationRef.current === mutation) {
       inFlightMutationsRef.current["delete"](disposable);
-
       if (isMountedRef.current) {
         setMutationInFlight(inFlightMutationsRef.current.size > 0);
       }
@@ -53,11 +43,9 @@ function useMutation(mutation) {
   useEffect(function () {
     if (environmentRef.current !== environment || mutationRef.current !== mutation) {
       inFlightMutationsRef.current = new Set();
-
       if (isMountedRef.current) {
         setMutationInFlight(false);
       }
-
       environmentRef.current = environment;
       mutationRef.current = mutation;
     }
@@ -66,30 +54,25 @@ function useMutation(mutation) {
     if (isMountedRef.current) {
       setMutationInFlight(true);
     }
-
     var disposable = commitMutationFn(environment, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, config), {}, {
       mutation: mutation,
       onCompleted: function onCompleted(response, errors) {
         var _config$onCompleted;
-
         cleanup(disposable);
         (_config$onCompleted = config.onCompleted) === null || _config$onCompleted === void 0 ? void 0 : _config$onCompleted.call(config, response, errors);
       },
       onError: function onError(error) {
         var _config$onError;
-
         cleanup(disposable);
         (_config$onError = config.onError) === null || _config$onError === void 0 ? void 0 : _config$onError.call(config, error);
       },
       onUnsubscribe: function onUnsubscribe() {
         var _config$onUnsubscribe;
-
         cleanup(disposable);
         (_config$onUnsubscribe = config.onUnsubscribe) === null || _config$onUnsubscribe === void 0 ? void 0 : _config$onUnsubscribe.call(config);
       },
       onNext: function onNext() {
         var _config$onNext;
-
         (_config$onNext = config.onNext) === null || _config$onNext === void 0 ? void 0 : _config$onNext.call(config);
       }
     }));
@@ -98,5 +81,4 @@ function useMutation(mutation) {
   }, [cleanup, commitMutationFn, environment, isMountedRef, mutation]);
   return [commit, isMutationInFlight];
 }
-
 module.exports = useMutation;

package/lib/relay-hooks/usePaginationFragment.js

@@ -4,86 +4,82 @@
  * 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
+ * @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 HooksImplementation = require('./HooksImplementation');
 var useLoadMoreFunction = require('./useLoadMoreFunction');
-
 var useRefetchableFragmentNode = require('./useRefetchableFragmentNode');
-
 var useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
-
 var _require = require('react'),
-    useCallback = _require.useCallback,
-    useDebugValue = _require.useDebugValue,
-    useState = _require.useState;
-
+  useCallback = _require.useCallback,
+  useDebugValue = _require.useDebugValue,
+  useState = _require.useState;
 var _require2 = require('relay-runtime'),
-    getFragment = _require2.getFragment,
-    getFragmentIdentifier = _require2.getFragmentIdentifier,
-    getPaginationMetadata = _require2.getPaginationMetadata;
+  getFragment = _require2.getFragment,
+  getFragmentIdentifier = _require2.getFragmentIdentifier,
+  getPaginationMetadata = _require2.getPaginationMetadata;
 
-function usePaginationFragment(fragmentInput, parentFragmentRef) {
+// This separate type export is only needed as long as we are injecting
+// a separate hooks implementation in ./HooksImplementation -- it can
+// be removed after we stop doing that.
+
+function usePaginationFragment_LEGACY(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;
-
+    connectionPathInFragmentData = _getPaginationMetadat.connectionPathInFragmentData,
+    paginationRequest = _getPaginationMetadat.paginationRequest,
+    paginationMetadata = _getPaginationMetadat.paginationMetadata,
+    identifierField = _getPaginationMetadat.identifierField;
   var _useRefetchableFragme = useRefetchableFragmentNode(fragmentNode, parentFragmentRef, componentDisplayName),
-      fragmentData = _useRefetchableFragme.fragmentData,
-      fragmentRef = _useRefetchableFragme.fragmentRef,
-      refetch = _useRefetchableFragme.refetch;
-
-  var fragmentIdentifier = getFragmentIdentifier(fragmentNode, fragmentRef); // Backward pagination
+    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
-
-
+      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];
-
+      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();
@@ -91,7 +87,6 @@ function usePaginationFragment(fragmentInput, parentFragmentRef) {
       __environment: undefined
     }));
   }, [disposeFetchNext, disposeFetchPrevious, refetch]);
-
   if (process.env.NODE_ENV !== "production") {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useDebugValue({
@@ -103,7 +98,6 @@ function usePaginationFragment(fragmentInput, parentFragmentRef) {
       isLoadingPrevious: isLoadingPrevious
     });
   }
-
   return {
     data: fragmentData,
     loadNext: loadNext,
@@ -115,12 +109,10 @@ function usePaginationFragment(fragmentInput, parentFragmentRef) {
     refetch: refetchPagination
   };
 }
-
 function useLoadMore(args) {
   var _useState = useState(false),
-      isLoadingMore = _useState[0],
-      setIsLoadingMore = _useState[1];
-
+    isLoadingMore = _useState[0],
+    setIsLoadingMore = _useState[1];
   var observer = {
     start: function start() {
       return setIsLoadingMore(true);
@@ -132,20 +124,25 @@ function useLoadMore(args) {
       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];
-
+      observer: observer,
+      onReset: handleReset
+    })),
+    loadMore = _useLoadMoreFunction[0],
+    hasMore = _useLoadMoreFunction[1],
+    disposeFetch = _useLoadMoreFunction[2];
   return [loadMore, hasMore, isLoadingMore, disposeFetch];
 }
-
+function usePaginationFragment(fragmentInput, parentFragmentRef) {
+  var impl = HooksImplementation.get();
+  if (impl) {
+    return impl.usePaginationFragment(fragmentInput, parentFragmentRef);
+  } else {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return usePaginationFragment_LEGACY(fragmentInput, parentFragmentRef);
+  }
+}
 module.exports = usePaginationFragment;