react-relay 18.0.0 → 18.2.0

package/lib/relay-hooks/usePrefetchableForwardPaginationFragment_EXPERIMENTAL.js

@@ -0,0 +1,227 @@
+'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,
+  getSelector = _require3.getSelector,
+  getValueAtPath = _require3.getValueAtPath;
+function usePrefetchableForwardPaginationFragment_EXPERIMENTAL(fragmentInput, parentFragmentRef, bufferSize, initialSize, prefetchingLoadMoreOptions) {
+  var _fragmentInput$metada, _fragmentInput$metada2;
+  var minimalFetchSize = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
+  var fragmentNode = getFragment(fragmentInput);
+  useStaticFragmentNodeWarning(fragmentNode, 'first argument of usePrefetchableForwardPaginationFragment_EXPERIMENTAL()');
+  var componentDisplayName = 'usePrefetchableForwardPaginationFragment_EXPERIMENTAL()';
+  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 () {
+    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);
+      }
+    };
+  }, [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_EXPERIMENTAL: 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 && 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_EXPERIMENTAL;

package/lib/relay-hooks/useQueryLoader.js

@@ -5,6 +5,7 @@ var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime
 var _require = require('./loadQuery'),
   loadQuery = _require.loadQuery;
 var useIsMountedRef = require('./useIsMountedRef');
+var useQueryLoader_EXPERIMENTAL = require('./useQueryLoader_EXPERIMENTAL');
 var useRelayEnvironment = require('./useRelayEnvironment');
 var _require2 = require('react'),
   useCallback = _require2.useCallback,
@@ -12,6 +13,7 @@ var _require2 = require('react'),
   useRef = _require2.useRef,
   useState = _require2.useState;
 var _require3 = require('relay-runtime'),
+  RelayFeatureFlags = _require3.RelayFeatureFlags,
   getRequest = _require3.getRequest;
 var initialNullQueryReferenceState = {
   kind: 'NullQueryReference'
@@ -24,6 +26,12 @@ function requestIsLiveQuery(preloadableRequest) {
   return request.params.metadata.live !== undefined;
 }
 function useQueryLoader(preloadableRequest, initialQueryReference) {
+  if (RelayFeatureFlags.ENABLE_ACTIVITY_COMPATIBILITY) {
+    return useQueryLoader_EXPERIMENTAL(preloadableRequest, initialQueryReference);
+  }
+  return useQueryLoader_CURRENT(preloadableRequest, initialQueryReference);
+}
+function useQueryLoader_CURRENT(preloadableRequest, initialQueryReference) {
   var initialQueryReferenceInternal = initialQueryReference !== null && initialQueryReference !== void 0 ? initialQueryReference : initialNullQueryReferenceState;
   var environment = useRelayEnvironment();
   var isMountedRef = useIsMountedRef();

package/lib/relay-hooks/useQueryLoader_EXPERIMENTAL.js

@@ -0,0 +1,120 @@
+'use strict';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
+var _require = require('./loadQuery'),
+  loadQuery = _require.loadQuery;
+var useIsMountedRef = require('./useIsMountedRef');
+var useRelayEnvironment = require('./useRelayEnvironment');
+var _require2 = require('react'),
+  useCallback = _require2.useCallback,
+  useEffect = _require2.useEffect,
+  useInsertionEffect = _require2.useInsertionEffect,
+  useRef = _require2.useRef,
+  useState = _require2.useState;
+var _require3 = require('relay-runtime'),
+  getRequest = _require3.getRequest;
+var initialNullQueryReferenceState = {
+  kind: 'NullQueryReference'
+};
+function requestIsLiveQuery(preloadableRequest) {
+  if (preloadableRequest.kind === 'PreloadableConcreteRequest') {
+    return preloadableRequest.params.metadata.live !== undefined;
+  }
+  var request = getRequest(preloadableRequest);
+  return request.params.metadata.live !== undefined;
+}
+var CLEANUP_TIMEOUT = 1000 * 60 * 5;
+function useQueryLoader_EXPERIMENTAL(preloadableRequest, initialQueryReference) {
+  var initialQueryReferenceInternal = initialQueryReference !== null && initialQueryReference !== void 0 ? initialQueryReference : initialNullQueryReferenceState;
+  var environment = useRelayEnvironment();
+  var isMountedRef = useIsMountedRef();
+  var undisposedQueryReferencesRef = useRef(null);
+  if (undisposedQueryReferencesRef.current == null) {
+    undisposedQueryReferencesRef.current = new Set([initialQueryReferenceInternal]);
+  }
+  var _useState = useState(function () {
+      return initialQueryReferenceInternal;
+    }),
+    queryReference = _useState[0],
+    setQueryReference = _useState[1];
+  var _useState2 = useState(function () {
+      return initialQueryReferenceInternal;
+    }),
+    previousInitialQueryReference = _useState2[0],
+    setPreviousInitialQueryReference = _useState2[1];
+  if (initialQueryReferenceInternal !== previousInitialQueryReference) {
+    var _undisposedQueryRefer;
+    (_undisposedQueryRefer = undisposedQueryReferencesRef.current) === null || _undisposedQueryRefer === void 0 ? void 0 : _undisposedQueryRefer.add(initialQueryReferenceInternal);
+    setPreviousInitialQueryReference(initialQueryReferenceInternal);
+    setQueryReference(initialQueryReferenceInternal);
+  }
+  var disposeQuery = useCallback(function () {
+    if (isMountedRef.current) {
+      var _undisposedQueryRefer2;
+      (_undisposedQueryRefer2 = undisposedQueryReferencesRef.current) === null || _undisposedQueryRefer2 === void 0 ? void 0 : _undisposedQueryRefer2.add(initialNullQueryReferenceState);
+      setQueryReference(initialNullQueryReferenceState);
+    }
+  }, [isMountedRef]);
+  var queryLoaderCallback = useCallback(function (variables, options) {
+    var _options$__environmen, _undisposedQueryRefer3;
+    if (!isMountedRef.current) {
+      return;
+    }
+    var mergedOptions = options != null && options.hasOwnProperty('__environment') ? {
+      fetchPolicy: options.fetchPolicy,
+      networkCacheConfig: options.networkCacheConfig,
+      __nameForWarning: options.__nameForWarning
+    } : options;
+    var updatedQueryReference = loadQuery((_options$__environmen = options === null || options === void 0 ? void 0 : options.__environment) !== null && _options$__environmen !== void 0 ? _options$__environmen : environment, preloadableRequest, variables, mergedOptions);
+    (_undisposedQueryRefer3 = undisposedQueryReferencesRef.current) === null || _undisposedQueryRefer3 === void 0 ? void 0 : _undisposedQueryRefer3.add(updatedQueryReference);
+    setQueryReference(updatedQueryReference);
+  }, [environment, preloadableRequest, setQueryReference, isMountedRef]);
+  var disposeAllRemainingQueryReferences = useCallback(function disposeAllRemainingQueryReferences(preloadableRequest, currentQueryReference) {
+    var _undisposedQueryRefer4;
+    var undisposedQueryReferences = (_undisposedQueryRefer4 = undisposedQueryReferencesRef.current) !== null && _undisposedQueryRefer4 !== void 0 ? _undisposedQueryRefer4 : new Set();
+    var _iterator = (0, _createForOfIteratorHelper2["default"])(undisposedQueryReferences),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var undisposedQueryReference = _step.value;
+        if (undisposedQueryReference === currentQueryReference) {
+          continue;
+        }
+        if (undisposedQueryReference.kind !== 'NullQueryReference') {
+          if (requestIsLiveQuery(preloadableRequest)) {
+            undisposedQueryReference.dispose && undisposedQueryReference.dispose();
+          } else {
+            undisposedQueryReference.releaseQuery && undisposedQueryReference.releaseQuery();
+          }
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }, []);
+  var cleanupTimerRef = useRef(null);
+  useEffect(function () {
+    disposeAllRemainingQueryReferences(preloadableRequest, queryReference);
+    if (cleanupTimerRef.current != null) {
+      clearTimeout(cleanupTimerRef.current);
+      cleanupTimerRef.current = null;
+    }
+    return function () {
+      cleanupTimerRef.current = setTimeout(function () {
+        disposeAllRemainingQueryReferences(preloadableRequest, null);
+      }, CLEANUP_TIMEOUT);
+    };
+  }, [preloadableRequest, queryReference]);
+  useInsertionEffect(function () {
+    return function () {
+      cleanupTimerRef.current && clearTimeout(cleanupTimerRef.current);
+      cleanupTimerRef.current = null;
+      disposeAllRemainingQueryReferences(preloadableRequest, null);
+    };
+  }, [preloadableRequest]);
+  return [queryReference.kind === 'NullQueryReference' ? null : queryReference, queryLoaderCallback, disposeQuery];
+}
+module.exports = useQueryLoader_EXPERIMENTAL;

package/package.json

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