react-relay 13.1.1 → 13.2.0

package/relay-hooks/QueryResource.js.flow

@@ -32,7 +32,7 @@ import type {
 const LRUCache = require('./LRUCache');
 const SuspenseResource = require('./SuspenseResource');
 const invariant = require('invariant');
-const {RelayFeatureFlags, isPromise} = require('relay-runtime');
+const {isPromise} = require('relay-runtime');
 const warning = require('warning');
 
 const CACHE_CAPACITY = 1000;
@@ -50,8 +50,6 @@ type QueryResourceCacheEntry = {|
   // from the incremental responses, so later we can choose how to handle errors
   // in the incremental payloads.
   processedPayloadsCount: number,
-  getRetainCount(): number,
-  getNetworkSubscription(): ?Subscription,
   setNetworkSubscription(?Subscription): void,
   getValue(): Error | Promise<void> | QueryResult,
   setValue(Error | Promise<void> | QueryResult): void,
@@ -125,39 +123,6 @@ function createCacheEntry(
   value: Error | Promise<void> | QueryResult,
   networkSubscription: ?Subscription,
   onDispose: QueryResourceCacheEntry => void,
-): QueryResourceCacheEntry {
-  // There should be no behavior difference between createCacheEntry_new and
-  // createCacheEntry_old, and it doesn't directly relate to Client Edges.
-  // It was just a refactoring that was needed for Client Edges but that
-  // is behind the feature flag just in case there is any accidental breakage.
-  if (RelayFeatureFlags.REFACTOR_SUSPENSE_RESOURCE) {
-    return createCacheEntry_new(
-      cacheIdentifier,
-      operation,
-      operationAvailability,
-      value,
-      networkSubscription,
-      onDispose,
-    );
-  } else {
-    return createCacheEntry_old(
-      cacheIdentifier,
-      operation,
-      operationAvailability,
-      value,
-      networkSubscription,
-      onDispose,
-    );
-  }
-}
-
-function createCacheEntry_new(
-  cacheIdentifier: string,
-  operation: OperationDescriptor,
-  operationAvailability: ?OperationAvailability,
-  value: Error | Promise<void> | QueryResult,
-  networkSubscription: ?Subscription,
-  onDispose: QueryResourceCacheEntry => void,
 ): QueryResourceCacheEntry {
   const isLiveQuery = operationIsLiveQuery(operation);
 
@@ -191,12 +156,6 @@ function createCacheEntry_new(
     setValue(val: QueryResult | Promise<void> | Error) {
       currentValue = val;
     },
-    getRetainCount() {
-      return suspenseResource.getRetainCount();
-    },
-    getNetworkSubscription() {
-      return currentNetworkSubscription;
-    },
     setNetworkSubscription(subscription: ?Subscription) {
       if (isLiveQuery && currentNetworkSubscription != null) {
         currentNetworkSubscription.unsubscribe();
@@ -217,153 +176,6 @@ function createCacheEntry_new(
   return cacheEntry;
 }
 
-const DATA_RETENTION_TIMEOUT = 5 * 60 * 1000;
-function createCacheEntry_old(
-  cacheIdentifier: string,
-  operation: OperationDescriptor,
-  operationAvailability: ?OperationAvailability,
-  value: Error | Promise<void> | QueryResult,
-  networkSubscription: ?Subscription,
-  onDispose: QueryResourceCacheEntry => void,
-): QueryResourceCacheEntry {
-  const isLiveQuery = operationIsLiveQuery(operation);
-
-  let currentValue: Error | Promise<void> | QueryResult = value;
-  let retainCount = 0;
-  let retainDisposable: ?Disposable = null;
-  let releaseTemporaryRetain: ?() => void = null;
-  let currentNetworkSubscription: ?Subscription = networkSubscription;
-
-  const retain = (environment: IEnvironment) => {
-    retainCount++;
-    if (retainCount === 1) {
-      retainDisposable = environment.retain(operation);
-    }
-    return {
-      dispose: () => {
-        retainCount = Math.max(0, retainCount - 1);
-        if (retainCount === 0) {
-          invariant(
-            retainDisposable != null,
-            'Relay: Expected disposable to release query to be defined.' +
-              "If you're seeing this, this is likely a bug in Relay.",
-          );
-          retainDisposable.dispose();
-          retainDisposable = null;
-        }
-        onDispose(cacheEntry);
-      },
-    };
-  };
-
-  const cacheEntry = {
-    cacheIdentifier,
-    id: nextID++,
-    processedPayloadsCount: 0,
-    operationAvailability,
-    getValue() {
-      return currentValue;
-    },
-    setValue(val: QueryResult | Promise<void> | Error) {
-      currentValue = val;
-    },
-    getRetainCount() {
-      return retainCount;
-    },
-    getNetworkSubscription() {
-      return currentNetworkSubscription;
-    },
-    setNetworkSubscription(subscription: ?Subscription) {
-      if (isLiveQuery && currentNetworkSubscription != null) {
-        currentNetworkSubscription.unsubscribe();
-      }
-      currentNetworkSubscription = subscription;
-    },
-    temporaryRetain(environment: IEnvironment): Disposable {
-      // NOTE: If we're executing in a server environment, there's no need
-      // to create temporary retains, since the component will never commit.
-      if (environment.isServer()) {
-        return {dispose: () => {}};
-      }
-
-      // NOTE: temporaryRetain is called during the render phase. However,
-      // given that we can't tell if this render will eventually commit or not,
-      // we create a timer to autodispose of this retain in case the associated
-      // component never commits.
-      // If the component /does/ commit, permanentRetain will clear this timeout
-      // and permanently retain the data.
-      const disposable = retain(environment);
-      let releaseQueryTimeout = null;
-      const localReleaseTemporaryRetain = () => {
-        clearTimeout(releaseQueryTimeout);
-        releaseQueryTimeout = null;
-        releaseTemporaryRetain = null;
-        disposable.dispose();
-        // Normally if this entry never commits, the request would've ended by the
-        // time this timeout expires and the temporary retain is released. However,
-        // we need to do this for live queries which remain open indefinitely.
-        if (
-          isLiveQuery &&
-          retainCount <= 0 &&
-          currentNetworkSubscription != null
-        ) {
-          currentNetworkSubscription.unsubscribe();
-        }
-      };
-      releaseQueryTimeout = setTimeout(
-        localReleaseTemporaryRetain,
-        DATA_RETENTION_TIMEOUT,
-      );
-
-      // NOTE: Since temporaryRetain can be called multiple times, we release
-      // the previous temporary retain after we re-establish a new one, since
-      // we only ever need a single temporary retain until the permanent retain is
-      // established.
-      // temporaryRetain may be called multiple times by React during the render
-      // phase, as well as multiple times by other query components that are
-      // rendering the same query/variables.
-      if (releaseTemporaryRetain != null) {
-        releaseTemporaryRetain();
-      }
-      releaseTemporaryRetain = localReleaseTemporaryRetain;
-
-      return {
-        dispose: () => {
-          releaseTemporaryRetain && releaseTemporaryRetain();
-        },
-      };
-    },
-    permanentRetain(environment: IEnvironment): Disposable {
-      const disposable = retain(environment);
-      if (releaseTemporaryRetain != null) {
-        releaseTemporaryRetain();
-        releaseTemporaryRetain = null;
-      }
-
-      return {
-        dispose: () => {
-          disposable.dispose();
-          if (
-            isLiveQuery &&
-            retainCount <= 0 &&
-            currentNetworkSubscription != null
-          ) {
-            currentNetworkSubscription.unsubscribe();
-          }
-        },
-      };
-    },
-    releaseTemporaryRetain() {
-      if (releaseTemporaryRetain != null) {
-        releaseTemporaryRetain();
-        releaseTemporaryRetain = null;
-      }
-    },
-  };
-
-  return cacheEntry;
-}
-
 class QueryResourceImpl {
   _environment: IEnvironment;
   _cache: QueryResourceCache;
@@ -532,15 +344,7 @@ class QueryResourceImpl {
   }
 
   _clearCacheEntry = (cacheEntry: QueryResourceCacheEntry): void => {
-    // The new code does this retainCount <= 0 check within SuspenseResource
-    // before calling _clearCacheEntry, whereas with the old code we do it here.
-    if (RelayFeatureFlags.REFACTOR_SUSPENSE_RESOURCE) {
-      this._cache.delete(cacheEntry.cacheIdentifier);
-    } else {
-      if (cacheEntry.getRetainCount() <= 0) {
-        this._cache.delete(cacheEntry.cacheIdentifier);
-      }
-    }
+    this._cache.delete(cacheEntry.cacheIdentifier);
   };
 
   _getOrCreateCacheEntry(
@@ -693,10 +497,9 @@ class QueryResourceImpl {
             // To complete this task we need to have a way of precisely tracking suspendable points
             warning(
               false,
-              'QueryResource: An incremental payload for query `%` returned an error: `%`:`%`.',
+              'QueryResource: An incremental payload for query `%s` returned an error: `%s`.',
               operation.fragment.node.name,
-              error.message,
-              error.stack,
+              String(error.message),
             );
           }
           resolveNetworkPromise();

package/relay-hooks/preloadQuery_DEPRECATED.js.flow

@@ -115,20 +115,13 @@ function preloadQuery<TQuery: OperationType, TEnvironmentProviderOptions>(
             if (environment.isServer()) {
               return;
             }
-            if (
-              RelayFeatureFlags.DELAY_CLEANUP_OF_PENDING_PRELOAD_QUERIES ===
-              true
-            ) {
-              setTimeout(() => {
-                // Clear the cache entry after the default timeout
-                // null-check for Flow
-                if (queryEntry != null) {
-                  cleanup(pendingQueries, queryEntry);
-                }
-              }, DEFAULT_PREFETCH_TIMEOUT);
-            } else {
-              cleanup(pendingQueries, queryEntry);
-            }
+            setTimeout(() => {
+              // Clear the cache entry after the default timeout
+              // null-check for Flow
+              if (queryEntry != null) {
+                cleanup(pendingQueries, queryEntry);
+              }
+            }, DEFAULT_PREFETCH_TIMEOUT);
           };
         })
       : null;

package/relay-hooks/react-cache/RelayReactCache.js.flow

@@ -0,0 +1,42 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @emails oncall+relay
+ * @format
+ */
+
+// flowlint ambiguous-object-type:error
+
+'use strict';
+
+const invariant = require('invariant');
+// $FlowFixMe[prop-missing] These exist in experimental builds but aren't in React's types yet.
+const {unstable_getCacheForType, unstable_getCacheSignal} = require('react');
+const {RelayFeatureFlags} = require('relay-runtime');
+
+function getCacheForType<T>(factory: () => T): T {
+  invariant(
+    typeof unstable_getCacheForType === 'function' &&
+      RelayFeatureFlags.USE_REACT_CACHE,
+    'RelayReactCache.getCacheForType should only be called when the USE_REACT_CACHE feature flag is enabled and when on an experimental React build that supports it.',
+  );
+  return unstable_getCacheForType(factory);
+}
+
+function getCacheSignal(): AbortSignal {
+  invariant(
+    typeof unstable_getCacheSignal === 'function' &&
+      RelayFeatureFlags.USE_REACT_CACHE,
+    'RelayReactCache.getCacheSignal should only be called when the USE_REACT_CACHE feature flag is enabled and when on an experimental React build that supports it.',
+  );
+  return unstable_getCacheSignal();
+}
+
+module.exports = {
+  getCacheForType,
+  getCacheSignal,
+};

package/relay-hooks/react-cache/getQueryResultOrFetchQuery_REACT_CACHE.js.flow

@@ -0,0 +1,243 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @emails oncall+relay
+ * @format
+ */
+
+// flowlint ambiguous-object-type:error
+
+'use strict';
+
+import type {
+  FetchPolicy,
+  IEnvironment,
+  OperationDescriptor,
+  ReaderFragment,
+  RenderPolicy,
+} from 'relay-runtime';
+
+const {getCacheForType, getCacheSignal} = require('./RelayReactCache');
+const invariant = require('invariant');
+const {
+  __internal: {fetchQuery: fetchQueryInternal},
+} = require('relay-runtime');
+const warning = require('warning');
+
+type QueryResult = {|
+  fragmentNode: ReaderFragment,
+  fragmentRef: mixed,
+|};
+
+// Note that the status of a cache entry will be 'resolved' when partial
+// rendering is allowed, even if a fetch is ongoing. The pending status
+// is specifically to indicate that we should suspend.
+type QueryCacheEntry =
+  | {|status: 'resolved', result: QueryResult|}
+  | {|status: 'pending', promise: Promise<void>|}
+  | {|status: 'rejected', error: Error|};
+
+type QueryCache = Map<string, QueryCacheEntry>;
+
+const DEFAULT_FETCH_POLICY = 'store-or-network';
+
+function createQueryCache(): QueryCache {
+  return new Map();
+}
+
+function getQueryCacheKey(
+  operation: OperationDescriptor,
+  fetchPolicy: FetchPolicy,
+  renderPolicy: RenderPolicy,
+): string {
+  const cacheIdentifier = `${fetchPolicy}-${renderPolicy}-${operation.request.identifier}`;
+  return cacheIdentifier;
+}
+
+function constructQueryResult(operation: OperationDescriptor): QueryResult {
+  const rootFragmentRef = {
+    __id: operation.fragment.dataID,
+    __fragments: {
+      [operation.fragment.node.name]: operation.request.variables,
+    },
+    __fragmentOwner: operation.request,
+  };
+  return {
+    fragmentNode: operation.request.node.fragment,
+    fragmentRef: rootFragmentRef,
+  };
+}
+
+function getQueryResultOrFetchQuery_REACT_CACHE(
+  environment: IEnvironment,
+  queryOperationDescriptor: OperationDescriptor,
+  fetchPolicy: FetchPolicy = DEFAULT_FETCH_POLICY,
+  maybeRenderPolicy?: RenderPolicy,
+): QueryResult {
+  const renderPolicy =
+    maybeRenderPolicy ?? environment.UNSTABLE_getDefaultRenderPolicy();
+
+  const cache = getCacheForType(createQueryCache);
+
+  const cacheKey = getQueryCacheKey(
+    queryOperationDescriptor,
+    fetchPolicy,
+    renderPolicy,
+  );
+
+  let entry = cache.get(cacheKey);
+  if (entry === undefined) {
+    // Initiate a query to fetch the data if needed:
+    entry = onCacheMiss(
+      environment,
+      queryOperationDescriptor,
+      fetchPolicy,
+      renderPolicy,
+      newCacheEntry => {
+        cache.set(cacheKey, newCacheEntry);
+      },
+    );
+    cache.set(cacheKey, entry);
+
+    // Since this is the first time rendering, retain the query. React will
+    // trigger the abort signal when this cache entry is no longer needed.
+    const retention = environment.retain(queryOperationDescriptor);
+    const abortSignal = getCacheSignal();
+    abortSignal.addEventListener(
+      'abort',
+      () => {
+        retention.dispose();
+        cache.delete(cacheKey);
+      },
+      {once: true},
+    );
+  }
+
+  switch (entry.status) {
+    case 'pending':
+      throw entry.promise;
+    case 'rejected':
+      throw entry.error;
+    case 'resolved':
+      return entry.result;
+  }
+  invariant(false, 'switch statement should be exhaustive');
+}
+
+function onCacheMiss(
+  environment: IEnvironment,
+  operation: OperationDescriptor,
+  fetchPolicy: FetchPolicy,
+  renderPolicy: RenderPolicy,
+  updateCache: QueryCacheEntry => void,
+): QueryCacheEntry {
+  // NB: Besides checking if the data is available, calling `check` will write missing
+  // data to the store using any missing data handlers specified in the environment.
+  const queryAvailability = environment.check(operation);
+  const queryStatus = queryAvailability.status;
+  const hasFullQuery = queryStatus === 'available';
+  const canPartialRender =
+    hasFullQuery || (renderPolicy === 'partial' && queryStatus !== 'stale');
+
+  let shouldFetch;
+  let shouldRenderNow;
+  switch (fetchPolicy) {
+    case 'store-only': {
+      shouldFetch = false;
+      shouldRenderNow = true;
+      break;
+    }
+    case 'store-or-network': {
+      shouldFetch = !hasFullQuery;
+      shouldRenderNow = canPartialRender;
+      break;
+    }
+    case 'store-and-network': {
+      shouldFetch = true;
+      shouldRenderNow = canPartialRender;
+      break;
+    }
+    case 'network-only':
+    default: {
+      shouldFetch = true;
+      shouldRenderNow = false;
+      break;
+    }
+  }
+
+  const promise = shouldFetch
+    ? executeOperationAndKeepUpToDate(environment, operation, updateCache)
+    : undefined;
+  if (shouldRenderNow) {
+    return {status: 'resolved', result: constructQueryResult(operation)};
+  } else {
+    invariant(
+      promise,
+      'Should either fetch or render (or both), otherwise we would suspend forever.',
+    );
+    return {status: 'pending', promise: promise};
+  }
+}
+
+function executeOperationAndKeepUpToDate(
+  environment: IEnvironment,
+  operation: OperationDescriptor,
+  updateCache: QueryCacheEntry => void,
+): Promise<void> {
+  let resolvePromise;
+  const promise = new Promise(r => {
+    resolvePromise = r;
+  });
+  // $FlowExpectedError[prop-missing] Expando to annotate Promises.
+  promise.displayName = 'Relay(' + operation.request.node.operation.name + ')';
+
+  let isFirstPayload = true;
+
+  // FIXME We may still need to cancel network requests for live queries.
+  const fetchObservable = fetchQueryInternal(environment, operation);
+  fetchObservable.subscribe({
+    start: subscription => {},
+    error: error => {
+      if (isFirstPayload) {
+        updateCache({status: 'rejected', error});
+      } else {
+        // TODO:T92030819 Remove this warning and actually throw the network error
+        // To complete this task we need to have a way of precisely tracking suspendable points
+        warning(
+          false,
+          'getQueryResultOrFetchQuery: An incremental payload for query `%` returned an error: `%`:`%`.',
+          operation.request.node.operation.name,
+          error.message,
+          error.stack,
+        );
+      }
+      resolvePromise();
+      isFirstPayload = false;
+    },
+    next: response => {
+      // Stop suspending on the first payload because of streaming, defer, etc.
+      updateCache({
+        status: 'resolved',
+        result: constructQueryResult(operation),
+      });
+      resolvePromise();
+      isFirstPayload = false;
+    },
+    complete: () => {
+      updateCache({
+        status: 'resolved',
+        result: constructQueryResult(operation),
+      });
+      resolvePromise();
+      isFirstPayload = false;
+    },
+  });
+
+  return promise;
+}
+
+module.exports = getQueryResultOrFetchQuery_REACT_CACHE;