react-relay 11.0.2 → 13.0.0-rc.2

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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -13,36 +13,28 @@
 
 'use strict';
 
-const ProfilerContext = require('./ProfilerContext');
-const React = require('react');
+import type {
+  EntryPoint,
+  EntryPointComponent,
+  EnvironmentProviderOptions,
+  IEnvironmentProvider,
+} from './EntryPointTypes.flow';
 
 const preloadQuery_DEPRECATED = require('./preloadQuery_DEPRECATED');
+const ProfilerContext = require('./ProfilerContext');
 const useRelayEnvironment = require('./useRelayEnvironment');
-
+const React = require('react');
 const {useContext, useEffect, useMemo} = require('react');
 const {stableCopy} = require('relay-runtime');
 
 type PreloadedEntryPoint<TEntryPointComponent> = $ReadOnly<{|
-  entryPoints: $PropertyType<
-    React.ElementConfig<TEntryPointComponent>,
-    'entryPoints',
-  >,
-  extraProps: $PropertyType<
-    React.ElementConfig<TEntryPointComponent>,
-    'extraProps',
-  >,
+  entryPoints: React.ElementConfig<TEntryPointComponent>['entryPoints'],
+  extraProps: React.ElementConfig<TEntryPointComponent>['extraProps'],
   getComponent: () => TEntryPointComponent,
-  queries: $PropertyType<React.ElementConfig<TEntryPointComponent>, 'queries'>,
+  queries: React.ElementConfig<TEntryPointComponent>['queries'],
   rootModuleID: string,
 |}>;
 
-import type {
-  EntryPoint,
-  EntryPointComponent,
-  EnvironmentProviderOptions,
-  IEnvironmentProvider,
-} from './EntryPointTypes.flow';
-
 type EntryPointContainerProps<
   TEntryPointParams,
   TPreloadedQueries,
@@ -100,12 +92,8 @@ function prepareEntryPoint<
   if (queries != null) {
     const queriesPropNames = Object.keys(queries);
     queriesPropNames.forEach(queryPropName => {
-      const {
-        environmentProviderOptions,
-        options,
-        parameters,
-        variables,
-      } = queries[queryPropName];
+      const {environmentProviderOptions, options, parameters, variables} =
+        queries[queryPropName];
 
       const environment = environmentProvider.getEnvironment(
         environmentProviderOptions,
@@ -128,10 +116,8 @@ function prepareEntryPoint<
       if (entryPointDescription == null) {
         return;
       }
-      const {
-        entryPoint: nestedEntryPoint,
-        entryPointParams: nestedParams,
-      } = entryPointDescription;
+      const {entryPoint: nestedEntryPoint, entryPointParams: nestedParams} =
+        entryPointDescription;
       preloadedEntryPoints[entryPointPropName] = prepareEntryPoint(
         environmentProvider,
         nestedEntryPoint,
@@ -180,23 +166,23 @@ function LazyLoadEntryPointContainer_DEPRECATED<
   // *must* be computed first to fetch the component's data-dependencies in
   // parallel with the component itself (the code).
   const entryPointParamsHash = stableStringify(entryPointParams);
-  const {
-    getComponent,
-    queries,
-    entryPoints,
-    extraProps,
-    rootModuleID,
-  } = useMemo(() => {
-    return prepareEntryPoint(
-      environmentProvider ?? {
-        getEnvironment: () => environment,
-      },
-      entryPoint,
-      entryPointParams,
-    );
-    // NOTE: stableParams encodes the information from params
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [environment, environmentProvider, getPreloadProps, entryPointParamsHash]);
+  const {getComponent, queries, entryPoints, extraProps, rootModuleID} =
+    useMemo(() => {
+      return prepareEntryPoint(
+        environmentProvider ?? {
+          getEnvironment: () => environment,
+        },
+        entryPoint,
+        entryPointParams,
+      );
+      // NOTE: stableParams encodes the information from params
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+      environment,
+      environmentProvider,
+      getPreloadProps,
+      entryPointParamsHash,
+    ]);
   const Component = useMemo(() => {
     return getComponent();
   }, [getComponent]);

package/relay-hooks/MatchContainer.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -14,6 +14,7 @@
 'use strict';
 
 const React = require('react');
+
 const {useMemo} = React;
 
 /**
@@ -90,7 +91,7 @@ type TypenameOnlyPointer = {|+__typename: string|};
 export type MatchPointer = {
   +__fragmentPropName?: ?string,
   +__module_component?: mixed,
-  +$fragmentRefs: mixed,
+  +$fragmentSpreads: mixed,
   ...
 };
 
@@ -115,7 +116,7 @@ function MatchContainer<TProps: {...}, TFallback: React.Node | null>({
       'MatchContainer: Expected `match` value to be an object or null/undefined.',
     );
   }
-  // NOTE: the MatchPointer type has a $fragmentRefs field to ensure that only
+  // NOTE: the MatchPointer type has a $fragmentSpreads field to ensure that only
   // an object that contains a FragmentSpread can be passed. If the fragment
   // spread matches, then the metadata fields below (__id, __fragments, etc.)
   // will be present. But they can be missing if all the fragment spreads use

package/relay-hooks/ProfilerContext.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.

package/relay-hooks/QueryResource.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -13,18 +13,7 @@
 
 'use strict';
 
-const LRUCache = require('./LRUCache');
-
-const invariant = require('invariant');
-
-const {isPromise} = require('relay-runtime');
-
-const CACHE_CAPACITY = 1000;
-
-const DEFAULT_FETCH_POLICY = 'store-or-network';
-
-const DATA_RETENTION_TIMEOUT = 5 * 60 * 1000;
-
+import type {Cache} from './LRUCache';
 import type {
   Disposable,
   FetchPolicy,
@@ -32,13 +21,22 @@ import type {
   IEnvironment,
   Observable,
   Observer,
+  OperationAvailability,
   OperationDescriptor,
   ReaderFragment,
   RenderPolicy,
   Snapshot,
   Subscription,
 } from 'relay-runtime';
-import type {Cache} from './LRUCache';
+
+const LRUCache = require('./LRUCache');
+const SuspenseResource = require('./SuspenseResource');
+const invariant = require('invariant');
+const {RelayFeatureFlags, isPromise} = require('relay-runtime');
+const warning = require('warning');
+
+const CACHE_CAPACITY = 1000;
+const DEFAULT_FETCH_POLICY = 'store-or-network';
 
 export type QueryResource = QueryResourceImpl;
 
@@ -46,6 +44,12 @@ type QueryResourceCache = Cache<QueryResourceCacheEntry>;
 type QueryResourceCacheEntry = {|
   +id: number,
   +cacheIdentifier: string,
+  +operationAvailability: ?OperationAvailability,
+  // The number of received payloads for the operation.
+  // We want to differentiate the initial graphql response for the operation
+  // 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,
@@ -53,8 +57,9 @@ type QueryResourceCacheEntry = {|
   setValue(Error | Promise<void> | QueryResult): void,
   temporaryRetain(environment: IEnvironment): Disposable,
   permanentRetain(environment: IEnvironment): Disposable,
+  releaseTemporaryRetain(): void,
 |};
-opaque type QueryResult: {
+export opaque type QueryResult: {
   fragmentNode: ReaderFragment,
   fragmentRef: mixed,
   ...
@@ -71,6 +76,10 @@ interface IMap<K, V> {
   set(key: K, value: V): IMap<K, V>;
 }
 
+function operationIsLiveQuery(operation: OperationDescriptor): boolean {
+  return operation.request.node.params.metadata.live !== undefined;
+}
+
 function getQueryCacheIdentifier(
   environment: IEnvironment,
   operation: OperationDescriptor,
@@ -112,10 +121,113 @@ let nextID = 200000;
 function createCacheEntry(
   cacheIdentifier: string,
   operation: OperationDescriptor,
+  operationAvailability: ?OperationAvailability,
+  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);
+
+  let currentValue: Error | Promise<void> | QueryResult = value;
+  let currentNetworkSubscription: ?Subscription = networkSubscription;
+
+  const suspenseResource = new SuspenseResource(environment => {
+    const retention = environment.retain(operation);
+    return {
+      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 && currentNetworkSubscription != null) {
+          currentNetworkSubscription.unsubscribe();
+        }
+        retention.dispose();
+        onDispose(cacheEntry);
+      },
+    };
+  });
+
+  const cacheEntry = {
+    cacheIdentifier,
+    id: nextID++,
+    processedPayloadsCount: 0,
+    operationAvailability,
+    getValue() {
+      return currentValue;
+    },
+    setValue(val: QueryResult | Promise<void> | Error) {
+      currentValue = val;
+    },
+    getRetainCount() {
+      return suspenseResource.getRetainCount();
+    },
+    getNetworkSubscription() {
+      return currentNetworkSubscription;
+    },
+    setNetworkSubscription(subscription: ?Subscription) {
+      if (isLiveQuery && currentNetworkSubscription != null) {
+        currentNetworkSubscription.unsubscribe();
+      }
+      currentNetworkSubscription = subscription;
+    },
+    temporaryRetain(environment: IEnvironment): Disposable {
+      return suspenseResource.temporaryRetain(environment);
+    },
+    permanentRetain(environment: IEnvironment): Disposable {
+      return suspenseResource.permanentRetain(environment);
+    },
+    releaseTemporaryRetain() {
+      suspenseResource.releaseTemporaryRetain();
+    },
+  };
+
+  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;
@@ -147,10 +259,12 @@ function createCacheEntry(
   const cacheEntry = {
     cacheIdentifier,
     id: nextID++,
+    processedPayloadsCount: 0,
+    operationAvailability,
     getValue() {
       return currentValue;
     },
-    setValue(val) {
+    setValue(val: QueryResult | Promise<void> | Error) {
       currentValue = val;
     },
     getRetainCount() {
@@ -160,7 +274,7 @@ function createCacheEntry(
       return currentNetworkSubscription;
     },
     setNetworkSubscription(subscription: ?Subscription) {
-      if (currentNetworkSubscription != null) {
+      if (isLiveQuery && currentNetworkSubscription != null) {
         currentNetworkSubscription.unsubscribe();
       }
       currentNetworkSubscription = subscription;
@@ -188,7 +302,11 @@ function createCacheEntry(
         // 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 (retainCount <= 0 && currentNetworkSubscription != null) {
+        if (
+          isLiveQuery &&
+          retainCount <= 0 &&
+          currentNetworkSubscription != null
+        ) {
           currentNetworkSubscription.unsubscribe();
         }
       };
@@ -225,12 +343,22 @@ function createCacheEntry(
       return {
         dispose: () => {
           disposable.dispose();
-          if (retainCount <= 0 && currentNetworkSubscription != null) {
+          if (
+            isLiveQuery &&
+            retainCount <= 0 &&
+            currentNetworkSubscription != null
+          ) {
             currentNetworkSubscription.unsubscribe();
           }
         },
       };
     },
+    releaseTemporaryRetain() {
+      if (releaseTemporaryRetain != null) {
+        releaseTemporaryRetain();
+        releaseTemporaryRetain = null;
+      }
+    },
   };
 
   return cacheEntry;
@@ -295,6 +423,7 @@ class QueryResourceImpl {
     // it's available
     let cacheEntry = this._cache.get(cacheIdentifier);
     let temporaryRetainDisposable: ?Disposable = null;
+    const entryWasCached = cacheEntry != null;
     if (cacheEntry == null) {
       // 2. If a cached value isn't available, try fetching the operation.
       // _fetchAndSaveQuery will update the cache with either a Promise or
@@ -332,7 +461,18 @@ class QueryResourceImpl {
     temporaryRetainDisposable = cacheEntry.temporaryRetain(environment);
 
     const cachedValue = cacheEntry.getValue();
-    if (isPromise(cachedValue) || cachedValue instanceof Error) {
+    if (isPromise(cachedValue)) {
+      environment.__log({
+        name: 'suspense.query',
+        fetchPolicy,
+        isPromiseCached: entryWasCached,
+        operation: operation,
+        queryAvailability: cacheEntry.operationAvailability,
+        renderPolicy,
+      });
+      throw cachedValue;
+    }
+    if (cachedValue instanceof Error) {
       throw cachedValue;
     }
     return cachedValue;
@@ -349,6 +489,7 @@ class QueryResourceImpl {
     const cacheEntry = this._getOrCreateCacheEntry(
       cacheIdentifier,
       operation,
+      null,
       queryResult,
       null,
     );
@@ -366,6 +507,13 @@ class QueryResourceImpl {
     };
   }
 
+  releaseTemporaryRetain(queryResult: QueryResult) {
+    const cacheEntry = this._cache.get(queryResult.cacheIdentifier);
+    if (cacheEntry != null) {
+      cacheEntry.releaseTemporaryRetain();
+    }
+  }
+
   TESTS_ONLY__getCacheEntry(
     operation: OperationDescriptor,
     maybeFetchPolicy?: ?FetchPolicy,
@@ -384,14 +532,21 @@ class QueryResourceImpl {
   }
 
   _clearCacheEntry = (cacheEntry: QueryResourceCacheEntry): void => {
-    if (cacheEntry.getRetainCount() <= 0) {
+    // 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);
+      }
     }
   };
 
   _getOrCreateCacheEntry(
     cacheIdentifier: string,
     operation: OperationDescriptor,
+    operationAvailability: ?OperationAvailability,
     value: Error | Promise<void> | QueryResult,
     networkSubscription: ?Subscription,
   ): QueryResourceCacheEntry {
@@ -400,6 +555,7 @@ class QueryResourceImpl {
       cacheEntry = createCacheEntry(
         cacheIdentifier,
         operation,
+        operationAvailability,
         value,
         networkSubscription,
         this._clearCacheEntry,
@@ -466,6 +622,7 @@ class QueryResourceImpl {
       const cacheEntry = createCacheEntry(
         cacheIdentifier,
         operation,
+        queryAvailability,
         queryResult,
         null,
         this._clearCacheEntry,
@@ -483,32 +640,65 @@ class QueryResourceImpl {
           if (cacheEntry) {
             cacheEntry.setNetworkSubscription(networkSubscription);
           }
-
           const observerStart = observer?.start;
-          observerStart && observerStart(subscription);
+          if (observerStart) {
+            const subscriptionWithConditionalCancelation = {
+              ...subscription,
+              unsubscribe: () => {
+                // Only live queries should have their network requests canceled.
+                if (operationIsLiveQuery(operation)) {
+                  subscription.unsubscribe();
+                }
+              },
+            };
+            observerStart(subscriptionWithConditionalCancelation);
+          }
         },
         next: () => {
-          const snapshot = environment.lookup(operation.fragment);
           const cacheEntry = this._getOrCreateCacheEntry(
             cacheIdentifier,
             operation,
+            queryAvailability,
             queryResult,
             networkSubscription,
           );
+          cacheEntry.processedPayloadsCount += 1;
           cacheEntry.setValue(queryResult);
           resolveNetworkPromise();
 
           const observerNext = observer?.next;
-          observerNext && observerNext(snapshot);
+          if (observerNext != null) {
+            const snapshot = environment.lookup(operation.fragment);
+            observerNext(snapshot);
+          }
         },
         error: error => {
           const cacheEntry = this._getOrCreateCacheEntry(
             cacheIdentifier,
             operation,
+            queryAvailability,
             error,
             networkSubscription,
           );
-          cacheEntry.setValue(error);
+
+          // If, this is the first thing we receive for the query,
+          // before any other payload handled is error, we will cache and
+          // re-throw that error later.
+
+          // We will ignore errors for any incremental payloads we receive.
+          if (cacheEntry.processedPayloadsCount === 0) {
+            cacheEntry.setValue(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,
+              'QueryResource: An incremental payload for query `%` returned an error: `%`:`%`.',
+              operation.fragment.node.name,
+              error.message,
+              error.stack,
+            );
+          }
           resolveNetworkPromise();
 
           networkSubscription = null;
@@ -543,6 +733,7 @@ class QueryResourceImpl {
         cacheEntry = createCacheEntry(
           cacheIdentifier,
           operation,
+          queryAvailability,
           networkPromise,
           networkSubscription,
           this._clearCacheEntry,

package/relay-hooks/RelayEnvironmentProvider.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -13,21 +13,31 @@
 
 'use strict';
 
+import type {IEnvironment} from 'relay-runtime';
+import type {
+  ActorIdentifier,
+  IActorEnvironment,
+} from 'relay-runtime/multi-actor-environment';
+
 const React = require('react');
 const ReactRelayContext = require('react-relay/ReactRelayContext');
 
-import type {IEnvironment} from 'relay-runtime';
-
 const {useMemo} = React;
 
 type Props = $ReadOnly<{|
   children: React.Node,
   environment: IEnvironment,
+  getEnvironmentForActor?: ?(
+    actorIdentifier: ActorIdentifier,
+  ) => IActorEnvironment,
 |}>;
 
 function RelayEnvironmentProvider(props: Props): React.Node {
-  const {children, environment} = props;
-  const context = useMemo(() => ({environment}), [environment]);
+  const {children, environment, getEnvironmentForActor} = props;
+  const context = useMemo(
+    () => ({environment, getEnvironmentForActor}),
+    [environment, getEnvironmentForActor],
+  );
   return (
     <ReactRelayContext.Provider value={context}>
       {children}