react-relay 18.2.0 → 20.0.0

package/lib/relay-hooks/useFragmentInternal_EXPERIMENTAL.js

@@ -7,6 +7,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _require = require('./QueryResource'),
   getQueryResourceForEnvironment = _require.getQueryResourceForEnvironment;
 var useRelayEnvironment = require('./useRelayEnvironment');
+var useRelayLoggingContext = require('./useRelayLoggingContext');
 var invariant = require('invariant');
 var _require2 = require('react'),
   useDebugValue = _require2.useDebugValue,
@@ -114,16 +115,16 @@ function getSuspendingLiveResolver(state) {
     return missingFields;
   }
 }
-function handlePotentialSnapshotErrorsForState(environment, state) {
+function handlePotentialSnapshotErrorsForState(environment, state, loggingContext) {
   if (state.kind === 'singular') {
-    handlePotentialSnapshotErrors(environment, state.snapshot.errorResponseFields);
+    handlePotentialSnapshotErrors(environment, state.snapshot.fieldErrors, loggingContext);
   } 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.errorResponseFields);
+        handlePotentialSnapshotErrors(environment, snapshot.fieldErrors, loggingContext);
       }
     } catch (err) {
       _iterator5.e(err);
@@ -150,7 +151,7 @@ function handleMissedUpdates(environment, state) {
       missingLiveResolverFields: currentSnapshot.missingLiveResolverFields,
       seenRecords: currentSnapshot.seenRecords,
       selector: currentSnapshot.selector,
-      errorResponseFields: currentSnapshot.errorResponseFields
+      fieldErrors: currentSnapshot.fieldErrors
     };
     return [updatedData !== state.snapshot.data, {
       kind: 'singular',
@@ -173,7 +174,7 @@ function handleMissedUpdates(environment, state) {
         missingLiveResolverFields: _currentSnapshot.missingLiveResolverFields,
         seenRecords: _currentSnapshot.seenRecords,
         selector: _currentSnapshot.selector,
-        errorResponseFields: _currentSnapshot.errorResponseFields
+        fieldErrors: _currentSnapshot.fieldErrors
       };
       if (_updatedData !== snapshot.data) {
         didMissUpdates = true;
@@ -198,7 +199,11 @@ function handleMissingClientEdge(environment, parentFragmentNode, parentFragment
   var queryOperationDescriptor = createOperationDescriptor(missingClientEdgeRequestInfo.request, variables, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.networkCacheConfig);
   var QueryResource = getQueryResourceForEnvironment(environment);
   var queryResult = QueryResource.prepare(queryOperationDescriptor, fetchQueryInternal(environment, queryOperationDescriptor), queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.fetchPolicy);
-  return [queryResult, getPromiseForActiveRequest(environment, queryOperationDescriptor.request)];
+  var promise = getPromiseForActiveRequest(environment, queryOperationDescriptor.request);
+  if (promise != null && promise.displayName == null) {
+    promise.displayName = missingClientEdgeRequestInfo.request.params.name;
+  }
+  return [queryResult, promise];
 }
 function subscribeToSnapshot(environment, state, setState) {
   if (state.kind === 'bailout') {
@@ -324,6 +329,10 @@ function useFragmentInternal_EXPERIMENTAL(fragmentNode, fragmentRef, hookDisplay
   }
   !(fragmentRef == null || isPlural && Array.isArray(fragmentRef) && fragmentRef.length === 0 || fragmentSelector != null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Relay: Expected to receive an object where `...%s` was spread, ' + 'but the fragment reference was not found`. This is most ' + 'likely the result of:\n' + "- Forgetting to spread `%s` in `%s`'s parent's fragment.\n" + '- Conditionally fetching `%s` but unconditionally passing %s prop ' + 'to `%s`. If the parent fragment only fetches the fragment conditionally ' + '- with e.g. `@include`, `@skip`, or inside a `... on SomeType { }` ' + 'spread  - then the fragment reference will not exist. ' + 'In this case, pass `null` if the conditions for evaluating the ' + 'fragment are not met (e.g. if the `@include(if)` value is false.)', fragmentNode.name, fragmentNode.name, hookDisplayName, fragmentNode.name, hookDisplayName) : invariant(false) : void 0;
   var environment = useRelayEnvironment();
+  var loggerContext;
+  if (RelayFeatureFlags.ENABLE_UI_CONTEXT_ON_RELAY_LOGGER) {
+    loggerContext = useRelayLoggingContext();
+  }
   var _useState = useState(function () {
       return getFragmentState(environment, fragmentSelector);
     }),
@@ -340,7 +349,7 @@ function useFragmentInternal_EXPERIMENTAL(fragmentNode, fragmentRef, hookDisplay
   useEffect(function () {
     committedFragmentSelectorRef.current = fragmentSelector;
   }, [fragmentSelector]);
-  if (((_fragmentNode$metadat2 = fragmentNode.metadata) === null || _fragmentNode$metadat2 === void 0 ? void 0 : _fragmentNode$metadat2.hasClientEdges) === true) {
+  if (((_fragmentNode$metadat2 = fragmentNode.metadata) === null || _fragmentNode$metadat2 === void 0 ? void 0 : _fragmentNode$metadat2.hasClientEdges) === true || RelayFeatureFlags.CHECK_ALL_FRAGMENTS_FOR_MISSING_CLIENT_EDGES) {
     var _useMemo = useMemo(function () {
         var missingClientEdges = getMissingClientEdges(state);
         var clientEdgeQueries;
@@ -371,7 +380,11 @@ function useFragmentInternal_EXPERIMENTAL(fragmentNode, fragmentRef, hookDisplay
       clientEdgeQueries = _useMemo[0],
       activeRequestPromises = _useMemo[1];
     if (activeRequestPromises.length) {
-      throw Promise.all(activeRequestPromises);
+      var allPromises = Promise.all(activeRequestPromises);
+      allPromises.displayName = "RelayClientEdge(".concat(activeRequestPromises.map(function (promise) {
+        return promise.displayName;
+      }).join(','), ")");
+      throw allPromises;
     }
     useEffect(function () {
       var QueryResource = getQueryResourceForEnvironment(environment);
@@ -401,9 +414,11 @@ function useFragmentInternal_EXPERIMENTAL(fragmentNode, fragmentRef, hookDisplay
   if (isMissingData(state)) {
     var suspendingLiveResolvers = getSuspendingLiveResolver(state);
     if (suspendingLiveResolvers != null && suspendingLiveResolvers.length > 0) {
-      throw Promise.all(suspendingLiveResolvers.map(function (liveStateID) {
+      var promise = Promise.all(suspendingLiveResolvers.map(function (liveStateID) {
         return environment.getStore().getLiveResolverPromise(liveStateID);
       }));
+      promise.displayName = 'RelayLiveResolver(' + fragmentNode.name + ')';
+      throw promise;
     }
     if (RelayFeatureFlags.ENABLE_RELAY_OPERATION_TRACKER_SUSPENSE || environment !== previousEnvironment || !committedFragmentSelectorRef.current || !areEqualSelectors(committedFragmentSelectorRef.current, fragmentSelector)) {
       !(fragmentSelector != null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'refinement, see invariants above') : invariant(false) : void 0;
@@ -414,7 +429,7 @@ function useFragmentInternal_EXPERIMENTAL(fragmentNode, fragmentRef, hookDisplay
       }
     }
   }
-  handlePotentialSnapshotErrorsForState(environment, state);
+  handlePotentialSnapshotErrorsForState(environment, state, loggerContext);
   var storeSubscriptionRef = useRef(null);
   useEffect(function () {
     var storeSubscription = storeSubscriptionRef.current;

package/lib/relay-hooks/useLoadMoreFunction.js

@@ -71,6 +71,7 @@ function useLoadMoreFunction_CURRENT(args) {
       disposeFetch();
     };
   }, [disposeFetch]);
+  var isRequestInvalid = fragmentData == null || isParentQueryActive;
   var loadMore = useCallback(function (count, options) {
     var onComplete = options === null || options === void 0 ? void 0 : options.onComplete;
     if (isMountedRef.current !== true) {
@@ -80,7 +81,7 @@ function useLoadMoreFunction_CURRENT(args) {
       };
     }
     var fragmentSelector = getSelector(fragmentNode, fragmentRef);
-    if (isFetchingRef.current === true || fragmentData == null || isParentQueryActive) {
+    if (isFetchingRef.current === true || isRequestInvalid) {
       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;
       }
@@ -125,7 +126,7 @@ function useLoadMoreFunction_CURRENT(args) {
     return {
       dispose: disposeFetch
     };
-  }, [environment, identifierValue, direction, cursor, startFetch, disposeFetch, completeFetch, isFetchingRef, isParentQueryActive, fragmentData, fragmentNode.name, fragmentRef, componentDisplayName]);
+  }, [environment, identifierValue, direction, cursor, startFetch, disposeFetch, completeFetch, isFetchingRef, isRequestInvalid, fragmentNode.name, fragmentRef, componentDisplayName]);
   return [loadMore, hasMore, disposeFetch];
 }
 module.exports = useLoadMoreFunction;

package/lib/relay-hooks/useLoadMoreFunction_EXPERIMENTAL.js

@@ -62,6 +62,7 @@ function useLoadMoreFunction_EXPERIMENTAL(args) {
   var _getConnectionState = getConnectionState(direction, fragmentNode, fragmentData, connectionPathInFragmentData),
     cursor = _getConnectionState.cursor,
     hasMore = _getConnectionState.hasMore;
+  var isRequestInvalid = fragmentData == null || isParentQueryActive;
   var isMountedRef = useIsMountedRef();
   var loadMore = useCallback(function (count, options) {
     var onComplete = options === null || options === void 0 ? void 0 : options.onComplete;
@@ -72,7 +73,7 @@ function useLoadMoreFunction_EXPERIMENTAL(args) {
       };
     }
     var fragmentSelector = getSelector(fragmentNode, fragmentRef);
-    if (fetchStatusRef.current.kind === 'fetching' || fragmentData == null || isParentQueryActive) {
+    if (fetchStatusRef.current.kind === 'fetching' || isRequestInvalid) {
       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;
       }
@@ -124,7 +125,7 @@ function useLoadMoreFunction_EXPERIMENTAL(args) {
     return {
       dispose: function dispose() {}
     };
-  }, [environment, identifierValue, direction, cursor, isParentQueryActive, fragmentData, fragmentNode.name, fragmentRef, componentDisplayName]);
+  }, [environment, identifierValue, direction, cursor, isRequestInvalid, fragmentNode.name, fragmentRef, componentDisplayName]);
   return [loadMore, hasMore, forceDisposeFn];
 }
 module.exports = useLoadMoreFunction_EXPERIMENTAL;

package/lib/relay-hooks/usePaginationFragment.js

@@ -11,6 +11,7 @@ var _require = require('react'),
   useDebugValue = _require.useDebugValue,
   useState = _require.useState;
 var _require2 = require('relay-runtime'),
+  RelayFeatureFlags = _require2.RelayFeatureFlags,
   getFragment = _require2.getFragment,
   getFragmentIdentifier = _require2.getFragmentIdentifier,
   getPaginationMetadata = _require2.getPaginationMetadata;
@@ -110,7 +111,10 @@ function useLoadMore(args) {
     },
     error: function error() {
       return setIsLoadingMore(false);
-    }
+    },
+    unsubscribe: RelayFeatureFlags.ENABLE_USE_PAGINATION_IS_LOADING_FIX ? function () {
+      return setIsLoadingMore(false);
+    } : undefined
   };
   var handleReset = function handleReset() {
     return setIsLoadingMore(false);

package/lib/relay-hooks/usePrefetchableForwardPaginationFragment.js

@@ -0,0 +1,228 @@
+'use strict';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var useFragment = require('./useFragment');
+var useLoadMoreFunction = require('./useLoadMoreFunction');
+var useRefetchableFragmentInternal = require('./useRefetchableFragmentInternal');
+var useRelayEnvironment = require('./useRelayEnvironment');
+var useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
+var invariant = require('invariant');
+var _require = require('react'),
+  useCallback = _require.useCallback,
+  useDebugValue = _require.useDebugValue,
+  useEffect = _require.useEffect,
+  useLayoutEffect = _require.useLayoutEffect,
+  useMemo = _require.useMemo,
+  useRef = _require.useRef,
+  useState = _require.useState;
+var _require2 = require('relay-runtime'),
+  getFragment = _require2.getFragment,
+  getFragmentIdentifier = _require2.getFragmentIdentifier,
+  getPaginationMetadata = _require2.getPaginationMetadata;
+var _require3 = require('relay-runtime'),
+  ConnectionInterface = _require3.ConnectionInterface,
+  RelayFeatureFlags = _require3.RelayFeatureFlags,
+  getSelector = _require3.getSelector,
+  getValueAtPath = _require3.getValueAtPath;
+function usePrefetchableForwardPaginationFragment(fragmentInput, parentFragmentRef, bufferSize, initialSize, prefetchingLoadMoreOptions) {
+  var _fragmentInput$metada, _fragmentInput$metada2;
+  var minimalFetchSize = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
+  var disablePrefetching = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var fragmentNode = getFragment(fragmentInput);
+  useStaticFragmentNodeWarning(fragmentNode, 'first argument of usePrefetchableForwardPaginationFragment()');
+  var componentDisplayName = 'usePrefetchableForwardPaginationFragment()';
+  var _getPaginationMetadat = getPaginationMetadata(fragmentNode, componentDisplayName),
+    connectionPathInFragmentData = _getPaginationMetadat.connectionPathInFragmentData,
+    paginationRequest = _getPaginationMetadat.paginationRequest,
+    paginationMetadata = _getPaginationMetadat.paginationMetadata;
+  var _useRefetchableFragme = useRefetchableFragmentInternal(fragmentNode, parentFragmentRef, componentDisplayName),
+    fragmentData = _useRefetchableFragme.fragmentData,
+    fragmentRef = _useRefetchableFragme.fragmentRef,
+    refetch = _useRefetchableFragme.refetch;
+  var fragmentIdentifier = getFragmentIdentifier(fragmentNode, fragmentRef);
+  var edgeKeys = useMemo(function () {
+    var connection = getValueAtPath(fragmentData, connectionPathInFragmentData);
+    if (connection == null) {
+      return null;
+    }
+    var _ConnectionInterface$ = ConnectionInterface.get(),
+      EDGES = _ConnectionInterface$.EDGES;
+    return connection[EDGES];
+  }, [connectionPathInFragmentData, fragmentData]);
+  var sourceSize = edgeKeys == null ? -1 : edgeKeys.length;
+  var _useState = useState(initialSize != null ? initialSize : sourceSize),
+    _numInUse = _useState[0],
+    setNumInUse = _useState[1];
+  var numInUse = _numInUse;
+  if (_numInUse === -1 && sourceSize !== -1) {
+    numInUse = initialSize != null ? initialSize : sourceSize;
+    setNumInUse(numInUse);
+  }
+  var environment = useRelayEnvironment();
+  var _useState2 = useState(false),
+    isLoadingMore = _useState2[0],
+    reallySetIsLoadingMore = _useState2[1];
+  var _useState3 = useState(false),
+    isRefetching = _useState3[0],
+    setIsRefetching = _useState3[1];
+  var availableSizeRef = useRef(0);
+  var setIsLoadingMore = useCallback(function (value) {
+    var _environment$getSched;
+    var schedule = (_environment$getSched = environment.getScheduler()) === null || _environment$getSched === void 0 ? void 0 : _environment$getSched.schedule;
+    if (schedule) {
+      schedule(function () {
+        reallySetIsLoadingMore(value);
+      });
+    } else {
+      reallySetIsLoadingMore(value);
+    }
+  }, [environment]);
+  var isLoadingMoreRef = useRef(false);
+  var observer = useMemo(function () {
+    function setIsLoadingFalse() {
+      isLoadingMoreRef.current = false;
+      setIsLoadingMore(false);
+    }
+    return {
+      start: function start() {
+        isLoadingMoreRef.current = true;
+        reallySetIsLoadingMore(true);
+      },
+      complete: setIsLoadingFalse,
+      error: setIsLoadingFalse,
+      unsubscribe: RelayFeatureFlags.ENABLE_USE_PAGINATION_IS_LOADING_FIX ? setIsLoadingFalse : undefined
+    };
+  }, [setIsLoadingMore]);
+  var handleReset = useCallback(function () {
+    if (!isRefetching) {
+      var _environment$getSched2;
+      var schedule = (_environment$getSched2 = environment.getScheduler()) === null || _environment$getSched2 === void 0 ? void 0 : _environment$getSched2.schedule;
+      if (schedule) {
+        schedule(function () {
+          setNumInUse(-1);
+        });
+      } else {
+        setNumInUse(-1);
+      }
+    }
+    isLoadingMoreRef.current = false;
+    setIsLoadingMore(false);
+  }, [environment, isRefetching, setIsLoadingMore]);
+  var _useLoadMoreFunction = useLoadMoreFunction({
+      componentDisplayName: componentDisplayName,
+      connectionPathInFragmentData: connectionPathInFragmentData,
+      direction: 'forward',
+      fragmentData: fragmentData,
+      fragmentIdentifier: fragmentIdentifier,
+      fragmentNode: fragmentNode,
+      fragmentRef: fragmentRef,
+      paginationMetadata: paginationMetadata,
+      paginationRequest: paginationRequest,
+      observer: observer,
+      onReset: handleReset
+    }),
+    loadMore = _useLoadMoreFunction[0],
+    hasNext = _useLoadMoreFunction[1],
+    disposeFetchNext = _useLoadMoreFunction[2];
+  useLayoutEffect(function () {
+    availableSizeRef.current = sourceSize - numInUse;
+  }, [numInUse, sourceSize]);
+  var prefetchingUNSTABLE_extraVariables = prefetchingLoadMoreOptions === null || prefetchingLoadMoreOptions === void 0 ? void 0 : prefetchingLoadMoreOptions.UNSTABLE_extraVariables;
+  var prefetchingOnComplete = prefetchingLoadMoreOptions === null || prefetchingLoadMoreOptions === void 0 ? void 0 : prefetchingLoadMoreOptions.onComplete;
+  var showMore = useCallback(function (numToAdd, options) {
+    if (!isLoadingMoreRef.current || availableSizeRef.current >= 0) {
+      availableSizeRef.current -= numToAdd;
+      setNumInUse(function (lastNumInUse) {
+        return lastNumInUse + numToAdd;
+      });
+      if (!isLoadingMoreRef.current && availableSizeRef.current < 0) {
+        loadMore(Math.max(minimalFetchSize, Math.min(numToAdd, bufferSize - availableSizeRef.current)), options !== null && options !== void 0 ? options : {
+          onComplete: prefetchingOnComplete,
+          UNSTABLE_extraVariables: typeof prefetchingUNSTABLE_extraVariables === 'function' ? prefetchingUNSTABLE_extraVariables({
+            hasNext: hasNext,
+            data: fragmentData,
+            getServerEdges: function getServerEdges() {
+              var selector = getSelector(edgesFragment, edgeKeys);
+              if (selector == null) {
+                return [];
+              }
+              !(selector.kind === 'PluralReaderSelector') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Expected a plural selector') : invariant(false) : void 0;
+              return selector.selectors.map(function (sel) {
+                return environment.lookup(sel).data;
+              });
+            }
+          }) : prefetchingUNSTABLE_extraVariables
+        });
+      }
+    }
+  }, [bufferSize, loadMore, minimalFetchSize, edgeKeys, fragmentData, prefetchingUNSTABLE_extraVariables, prefetchingOnComplete]);
+  var edgesFragment = (_fragmentInput$metada = fragmentInput.metadata) === null || _fragmentInput$metada === void 0 ? void 0 : (_fragmentInput$metada2 = _fragmentInput$metada.refetch) === null || _fragmentInput$metada2 === void 0 ? void 0 : _fragmentInput$metada2.edgesFragment;
+  !(edgesFragment != null) ? process.env.NODE_ENV !== "production" ? invariant(false, 'usePrefetchableForwardPaginationFragment: Expected the edge fragment to be defined, ' + 'please make sure you have added `prefetchable_pagination: true`  to `@connection`') : invariant(false) : void 0;
+  useEffect(function () {
+    if (!isLoadingMoreRef.current && !isLoadingMore && !isRefetching && !disablePrefetching && hasNext && (sourceSize - numInUse < bufferSize || numInUse > sourceSize)) {
+      var onComplete = prefetchingOnComplete;
+      loadMore(Math.max(bufferSize - Math.max(sourceSize - numInUse, 0), numInUse - sourceSize, minimalFetchSize), {
+        onComplete: onComplete,
+        UNSTABLE_extraVariables: typeof prefetchingUNSTABLE_extraVariables === 'function' ? prefetchingUNSTABLE_extraVariables({
+          hasNext: hasNext,
+          data: fragmentData,
+          getServerEdges: function getServerEdges() {
+            var selector = getSelector(edgesFragment, edgeKeys);
+            if (selector == null) {
+              return [];
+            }
+            !(selector.kind === 'PluralReaderSelector') ? process.env.NODE_ENV !== "production" ? invariant(false, 'Expected a plural selector') : invariant(false) : void 0;
+            return selector.selectors.map(function (sel) {
+              return environment.lookup(sel).data;
+            });
+          }
+        }) : prefetchingUNSTABLE_extraVariables
+      });
+    }
+  }, [hasNext, bufferSize, isRefetching, loadMore, numInUse, prefetchingUNSTABLE_extraVariables, prefetchingOnComplete, sourceSize, edgeKeys, isLoadingMore, minimalFetchSize, environment, edgesFragment]);
+  var realNumInUse = Math.min(numInUse, sourceSize);
+  var derivedEdgeKeys = useMemo(function () {
+    var _edgeKeys$slice;
+    return (_edgeKeys$slice = edgeKeys === null || edgeKeys === void 0 ? void 0 : edgeKeys.slice(0, realNumInUse)) !== null && _edgeKeys$slice !== void 0 ? _edgeKeys$slice : [];
+  }, [edgeKeys, realNumInUse]);
+  var edges = useFragment(edgesFragment, derivedEdgeKeys);
+  var refetchPagination = useCallback(function (variables, options) {
+    disposeFetchNext();
+    setIsRefetching(true);
+    return refetch(variables, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, options), {}, {
+      onComplete: function onComplete(maybeError) {
+        var _environment$getSched3, _options$onComplete;
+        var schedule = (_environment$getSched3 = environment.getScheduler()) === null || _environment$getSched3 === void 0 ? void 0 : _environment$getSched3.schedule;
+        if (schedule) {
+          schedule(function () {
+            setIsRefetching(false);
+            setNumInUse(-1);
+          });
+        } else {
+          setIsRefetching(false);
+          setNumInUse(-1);
+        }
+        options === null || options === void 0 ? void 0 : (_options$onComplete = options.onComplete) === null || _options$onComplete === void 0 ? void 0 : _options$onComplete.call(options, maybeError);
+      },
+      __environment: undefined
+    }));
+  }, [disposeFetchNext, environment, refetch]);
+  if (process.env.NODE_ENV !== "production") {
+    useDebugValue({
+      fragment: fragmentNode.name,
+      data: fragmentData,
+      hasNext: hasNext,
+      isLoadingNext: isLoadingMore
+    });
+  }
+  return {
+    edges: edges,
+    data: fragmentData,
+    loadNext: showMore,
+    hasNext: hasNext || sourceSize > numInUse,
+    isLoadingNext: isLoadingMore && numInUse > sourceSize,
+    refetch: refetchPagination
+  };
+}
+module.exports = usePrefetchableForwardPaginationFragment;

package/lib/relay-hooks/usePrefetchableForwardPaginationFragment_EXPERIMENTAL.js

@@ -22,6 +22,7 @@ var _require2 = require('relay-runtime'),
   getPaginationMetadata = _require2.getPaginationMetadata;
 var _require3 = require('relay-runtime'),
   ConnectionInterface = _require3.ConnectionInterface,
+  RelayFeatureFlags = _require3.RelayFeatureFlags,
   getSelector = _require3.getSelector,
   getValueAtPath = _require3.getValueAtPath;
 function usePrefetchableForwardPaginationFragment_EXPERIMENTAL(fragmentInput, parentFragmentRef, bufferSize, initialSize, prefetchingLoadMoreOptions) {
@@ -78,19 +79,18 @@ function usePrefetchableForwardPaginationFragment_EXPERIMENTAL(fragmentInput, pa
   }, [environment]);
   var isLoadingMoreRef = useRef(false);
   var observer = useMemo(function () {
+    function setIsLoadingFalse() {
+      isLoadingMoreRef.current = false;
+      setIsLoadingMore(false);
+    }
     return {
       start: function start() {
         isLoadingMoreRef.current = true;
         reallySetIsLoadingMore(true);
       },
-      complete: function complete() {
-        isLoadingMoreRef.current = false;
-        setIsLoadingMore(false);
-      },
-      error: function error() {
-        isLoadingMoreRef.current = false;
-        setIsLoadingMore(false);
-      }
+      complete: setIsLoadingFalse,
+      error: setIsLoadingFalse,
+      unsubscribe: RelayFeatureFlags.ENABLE_USE_PAGINATION_IS_LOADING_FIX ? setIsLoadingFalse : undefined
     };
   }, [setIsLoadingMore]);
   var handleReset = useCallback(function () {

package/lib/relay-hooks/useRefetchableFragmentInternal.js

@@ -55,7 +55,7 @@ function reducer(state, action) {
       }
   }
 }
-function useRefetchableFragmentNode(fragmentNode, parentFragmentRef, componentDisplayName) {
+function useRefetchableFragmentInternal(fragmentNode, parentFragmentRef, componentDisplayName) {
   var parentEnvironment = useRelayEnvironment();
   var _getRefetchMetadata = getRefetchMetadata(fragmentNode, componentDisplayName),
     refetchableRequest = _getRefetchMetadata.refetchableRequest,
@@ -226,7 +226,7 @@ if (process.env.NODE_ENV !== "production") {
       }
     },
     checkSameIDAfterRefetch: function checkSameIDAfterRefetch(previousIDAndTypename, refetchedFragmentRef, fragmentNode, componentDisplayName) {
-      if (previousIDAndTypename == null) {
+      if (previousIDAndTypename == null || refetchedFragmentRef == null) {
         return;
       }
       var _require6 = require('relay-runtime'),
@@ -238,4 +238,4 @@ if (process.env.NODE_ENV !== "production") {
     }
   };
 }
-module.exports = useRefetchableFragmentNode;
+module.exports = useRefetchableFragmentInternal;

package/lib/relay-hooks/useRelayLoggingContext.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var ReactRelayLoggingContext = require('./../ReactRelayLoggingContext');
+var _require = require('react'),
+  useContext = _require.useContext;
+function useRelayLoggingContext() {
+  return useContext(ReactRelayLoggingContext);
+}
+module.exports = useRelayLoggingContext;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-relay",
   "description": "A framework for building GraphQL-driven React applications.",
-  "version": "18.2.0",
+  "version": "20.0.0",
   "keywords": [
     "graphql",
     "relay",
@@ -20,10 +20,10 @@
     "fbjs": "^3.0.2",
     "invariant": "^2.2.4",
     "nullthrows": "^1.1.1",
-    "relay-runtime": "18.2.0"
+    "relay-runtime": "20.0.0"
   },
   "peerDependencies": {
-    "react": "^16.9.0 || ^17 || ^18"
+    "react": "^16.9.0 || ^17 || ^18 || ^19"
   },
   "directories": {
     "": "./"

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

@@ -22,29 +22,25 @@ const React = require('react');
 const {useContext, useEffect} = require('react');
 const warning = require('warning');
 
-function EntryPointContainer<
+component EntryPointContainer<
   // $FlowFixMe[unsupported-variance-annotation]
-  +TPreloadedQueries: {...},
+  TRuntimeProps: {...},
+  TRenders: React.Node,
   // $FlowFixMe[unsupported-variance-annotation]
-  +TPreloadedNestedEntryPoints: {...},
-  // $FlowFixMe[unsupported-variance-annotation]
-  +TRuntimeProps: {...},
-  // $FlowFixMe[unsupported-variance-annotation]
-  +TExtraProps,
-  // $FlowFixMe[unsupported-variance-annotation]
-  +TEntryPointComponent: EntryPointComponent<
-    TPreloadedQueries,
-    TPreloadedNestedEntryPoints,
+  TEntryPointComponent: EntryPointComponent<
+    // $FlowExpectedErrors[unclear-type] Use any to accept all kinds of EntryPointComponent
+    any,
+    // $FlowExpectedErrors[unclear-type] Use any to accept all kinds of EntryPointComponent
+    any,
     TRuntimeProps,
-    TExtraProps,
+    // $FlowExpectedErrors[unclear-type] Use any to accept all kinds of EntryPointComponent
+    any,
+    TRenders,
   >,
->({
-  entryPointReference,
-  props,
-}: $ReadOnly<{
+>(
   entryPointReference: PreloadedEntryPoint<TEntryPointComponent>,
   props: TRuntimeProps,
-}>): React.MixedElement {
+) renders TRenders {
   warning(
     entryPointReference.isDisposed === false,
     '<EntryPointContainer>: Expected entryPointReference to not be disposed ' +

package/relay-hooks/EntryPointTypes.flow.js.flow

@@ -36,6 +36,8 @@ export type PreloadFetchPolicy =
 export type PreloadOptions = {
   +fetchKey?: string | number,
   +fetchPolicy?: ?PreloadFetchPolicy,
+  +includeIf?: ?boolean,
+  +prefetchExpiryInHours?: ?number,
   +networkCacheConfig?: ?CacheConfig,
 };
 
@@ -178,14 +180,15 @@ export type EntryPointComponent<
   TPreloadedEntryPoints = {},
   TRuntimeProps = {},
   TExtraProps = null,
-> = ComponentType<
-  EntryPointProps<
+  TRenders: React.Node = React.Node,
+> = component(
+  ...EntryPointProps<
     TPreloadedQueries,
     TPreloadedEntryPoints,
     TRuntimeProps,
     TExtraProps,
-  >,
->;
+  >
+) renders TRenders;
 
 // Return type of the `getPreloadProps(...)` of the entry point
 export type PreloadProps<

package/relay-hooks/MatchContainer.js.flow

@@ -95,7 +95,7 @@ export type MatchPointer = {
 
 export type MatchContainerProps<TProps: {...}, TFallback: React.Node> = {
   +fallback?: ?TFallback,
-  +loader: (module: mixed) => React.ComponentType<TProps>,
+  +loader: (module: mixed) => component(...TProps),
   +match: ?MatchPointer | ?TypenameOnlyPointer,
   +props?: TProps,
 };

package/relay-hooks/legacy/FragmentResource.js.flow

@@ -558,13 +558,10 @@ class FragmentResourceImpl {
   _throwOrLogErrorsInSnapshot(snapshot: SingularOrPluralSnapshot) {
     if (Array.isArray(snapshot)) {
       snapshot.forEach(s => {
-        handlePotentialSnapshotErrors(this._environment, s.errorResponseFields);
+        handlePotentialSnapshotErrors(this._environment, s.fieldErrors);
       });
     } else {
-      handlePotentialSnapshotErrors(
-        this._environment,
-        snapshot.errorResponseFields,
-      );
+      handlePotentialSnapshotErrors(this._environment, snapshot.fieldErrors);
     }
   }
 
@@ -763,7 +760,7 @@ class FragmentResourceImpl {
       missingLiveResolverFields: currentSnapshot.missingLiveResolverFields,
       seenRecords: currentSnapshot.seenRecords,
       selector: currentSnapshot.selector,
-      errorResponseFields: currentSnapshot.errorResponseFields,
+      fieldErrors: currentSnapshot.fieldErrors,
     };
     if (updatedData !== renderData) {
       const result = getFragmentResult(

package/relay-hooks/legacy/useBlockingPaginationFragment.js.flow

@@ -14,13 +14,7 @@
 import type {LoadMoreFn, UseLoadMoreFunctionArgs} from '../useLoadMoreFunction';
 import type {Options} from './useRefetchableFragmentNode';
 import type {RefetchableFragment} from 'relay-runtime';
-import type {
-  Disposable,
-  FragmentType,
-  GraphQLResponse,
-  Observer,
-  Variables,
-} from 'relay-runtime';
+import type {Disposable, FragmentType, Variables} from 'relay-runtime';
 
 const useLoadMoreFunction = require('../useLoadMoreFunction');
 const useStaticFragmentNodeWarning = require('../useStaticFragmentNodeWarning');
@@ -169,16 +163,7 @@ hook useBlockingPaginationFragment<
 hook useLoadMore<TVariables: Variables>(args: {
   disableStoreUpdates: () => void,
   enableStoreUpdates: () => void,
-  ...$Exact<
-    $Diff<
-      UseLoadMoreFunctionArgs,
-      {
-        observer: Observer<GraphQLResponse>,
-        onReset: () => void,
-        ...
-      },
-    >,
-  >,
+  ...$Exact<Omit<UseLoadMoreFunctionArgs, 'observer' | 'onReset'>>,
 }): [LoadMoreFn<TVariables>, boolean, () => void] {
   const {disableStoreUpdates, enableStoreUpdates, ...loadMoreArgs} = args;
   const [requestPromise, setRequestPromise] = useState<null | Promise<mixed>>(

package/relay-hooks/legacy/useRefetchableFragmentNode.js.flow

@@ -592,7 +592,7 @@ if (__DEV__) {
       fragmentNode: ReaderFragment,
       componentDisplayName: string,
     ): void {
-      if (previousIDAndTypename == null) {
+      if (previousIDAndTypename == null || refetchedFragmentRef == null) {
         return;
       }
       const {ID_KEY} = require('relay-runtime');