react-relay 14.1.0 → 16.0.0

package/relay-hooks/FragmentResource.js.flow

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @flow strict-local
- * @emails oncall+relay
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -29,8 +29,8 @@ const {getQueryResourceForEnvironment} = require('./QueryResource');
 const SuspenseResource = require('./SuspenseResource');
 const invariant = require('invariant');
 const {
-  RelayFeatureFlags,
   __internal: {fetchQuery, getPromiseForActiveRequest},
+  RelayFeatureFlags,
   createOperationDescriptor,
   getFragmentIdentifier,
   getPendingOperationsForFragment,
@@ -50,7 +50,12 @@ type FragmentResourceCache = Cache<
       promise: Promise<mixed>,
       result: FragmentResult,
     }
-  | {kind: 'done', result: FragmentResult},
+  | {kind: 'done', result: FragmentResult}
+  | {
+      kind: 'missing',
+      result: FragmentResult,
+      snapshot: SingularOrPluralSnapshot,
+    },
 >;
 
 const WEAKMAP_SUPPORTED = typeof WeakMap === 'function';
@@ -75,7 +80,7 @@ opaque type FragmentResult: {data: mixed, ...} = {
 const CACHE_CAPACITY = 1000000;
 
 // this is frozen so that users don't accidentally push data into the array
-const CONSTANT_READONLY_EMPTY_ARRAY = Object.freeze([]);
+const CONSTANT_READONLY_EMPTY_ARRAY: Array<$FlowFixMe> = Object.freeze([]);
 
 function isMissingData(snapshot: SingularOrPluralSnapshot): boolean {
   if (Array.isArray(snapshot)) {
@@ -304,9 +309,23 @@ class FragmentResourceImpl {
         cachedValue.result.snapshot &&
         !missingLiveResolverFields(cachedValue.result.snapshot)?.length
       ) {
-        this._handlePotentialSnapshotErrorsInSnapshot(
+        this._throwOrLogErrorsInSnapshot(
+          // $FlowFixMe[incompatible-call]
           cachedValue.result.snapshot,
         );
+
+        // This cache gets populated directly whenever the store notifies us of
+        // an update. That mechanism does not check for missing data, or
+        // in-flight requests.
+        if (cachedValue.result.isMissingData) {
+          environment.__log({
+            name: 'fragmentresource.missing_data',
+            data: cachedValue.result.data,
+            fragment: fragmentNode,
+            isRelayHooks: true,
+            cached: true,
+          });
+        }
         return cachedValue.result;
       }
     }
@@ -334,18 +353,30 @@ class FragmentResourceImpl {
       componentDisplayName,
     );
 
-    const snapshot =
-      fragmentSelector.kind === 'PluralReaderSelector'
-        ? fragmentSelector.selectors.map(s => environment.lookup(s))
-        : environment.lookup(fragmentSelector);
+    let fragmentResult = null;
+    let snapshot = null;
+    // Fall through to existing logic if it's 'missing' state so it would check and save promise into cache.
+    if (
+      RelayFeatureFlags.ENABLE_RELAY_OPERATION_TRACKER_SUSPENSE &&
+      cachedValue != null &&
+      cachedValue.kind === 'missing'
+    ) {
+      fragmentResult = cachedValue.result;
+      snapshot = cachedValue.snapshot;
+    } else {
+      snapshot =
+        fragmentSelector.kind === 'PluralReaderSelector'
+          ? fragmentSelector.selectors.map(s => environment.lookup(s))
+          : environment.lookup(fragmentSelector);
 
-    const fragmentResult = getFragmentResult(
-      fragmentIdentifier,
-      snapshot,
-      storeEpoch,
-    );
+      fragmentResult = getFragmentResult(
+        fragmentIdentifier,
+        snapshot,
+        storeEpoch,
+      );
+    }
     if (!fragmentResult.isMissingData) {
-      this._handlePotentialSnapshotErrorsInSnapshot(snapshot);
+      this._throwOrLogErrorsInSnapshot(snapshot);
 
       this._cache.set(fragmentIdentifier, {
         kind: 'done',
@@ -469,7 +500,30 @@ class FragmentResourceImpl {
       }
     }
 
-    this._handlePotentialSnapshotErrorsInSnapshot(snapshot);
+    // set it as done if has missing data and no pending operations
+    if (
+      RelayFeatureFlags.ENABLE_RELAY_OPERATION_TRACKER_SUSPENSE &&
+      fragmentResult.isMissingData
+    ) {
+      this._cache.set(fragmentIdentifier, {
+        kind: 'done',
+        result: fragmentResult,
+      });
+    }
+
+    this._throwOrLogErrorsInSnapshot(snapshot);
+
+    // At this point, there's nothing we can do. We don't have all the expected
+    // data, but there's no indication the missing data will be fulfilled. So we
+    // choose to return potentially non-typesafe data. The data returned here
+    // might not match the generated types for this fragment/operation.
+    environment.__log({
+      name: 'fragmentresource.missing_data',
+      data: fragmentResult.data,
+      fragment: fragmentNode,
+      isRelayHooks: true,
+      cached: false,
+    });
     return getFragmentResult(fragmentIdentifier, snapshot, storeEpoch);
   }
 
@@ -505,7 +559,7 @@ class FragmentResourceImpl {
     };
   }
 
-  _handlePotentialSnapshotErrorsInSnapshot(snapshot: SingularOrPluralSnapshot) {
+  _throwOrLogErrorsInSnapshot(snapshot: SingularOrPluralSnapshot) {
     if (Array.isArray(snapshot)) {
       snapshot.forEach(s => {
         handlePotentialSnapshotErrors(
@@ -591,10 +645,26 @@ class FragmentResourceImpl {
       disposables.push(
         environment.subscribe(currentSnapshot, latestSnapshot => {
           const storeEpoch = environment.getStore().getEpoch();
-          this._cache.set(cacheKey, {
-            kind: 'done',
-            result: getFragmentResult(cacheKey, latestSnapshot, storeEpoch),
-          });
+          const result = getFragmentResult(
+            cacheKey,
+            latestSnapshot,
+            storeEpoch,
+          );
+          if (
+            RelayFeatureFlags.ENABLE_RELAY_OPERATION_TRACKER_SUSPENSE &&
+            result.isMissingData
+          ) {
+            this._cache.set(cacheKey, {
+              kind: 'missing',
+              result: result,
+              snapshot: latestSnapshot,
+            });
+          } else {
+            this._cache.set(cacheKey, {
+              kind: 'done',
+              result: getFragmentResult(cacheKey, latestSnapshot, storeEpoch),
+            });
+          }
           callback();
         }),
       );
@@ -670,10 +740,26 @@ class FragmentResourceImpl {
       // Only update the cache when the data is changed to avoid
       // returning different `data` instances
       if (didMissUpdates) {
-        this._cache.set(cacheKey, {
-          kind: 'done',
-          result: getFragmentResult(cacheKey, currentSnapshots, storeEpoch),
-        });
+        const result = getFragmentResult(
+          cacheKey,
+          currentSnapshots,
+          storeEpoch,
+        );
+        if (
+          RelayFeatureFlags.ENABLE_RELAY_OPERATION_TRACKER_SUSPENSE &&
+          result.isMissingData
+        ) {
+          this._cache.set(cacheKey, {
+            kind: 'missing',
+            result,
+            snapshot: currentSnapshots,
+          });
+        } else {
+          this._cache.set(cacheKey, {
+            kind: 'done',
+            result,
+          });
+        }
       }
       return [didMissUpdates, currentSnapshots];
     }
@@ -692,10 +778,26 @@ class FragmentResourceImpl {
       relayResolverErrors: currentSnapshot.relayResolverErrors,
     };
     if (updatedData !== renderData) {
-      this._cache.set(cacheKey, {
-        kind: 'done',
-        result: getFragmentResult(cacheKey, updatedCurrentSnapshot, storeEpoch),
-      });
+      const result = getFragmentResult(
+        cacheKey,
+        updatedCurrentSnapshot,
+        storeEpoch,
+      );
+      if (
+        RelayFeatureFlags.ENABLE_RELAY_OPERATION_TRACKER_SUSPENSE &&
+        result.isMissingData
+      ) {
+        this._cache.set(cacheKey, {
+          kind: 'missing',
+          result: result,
+          snapshot: updatedCurrentSnapshot,
+        });
+      } else {
+        this._cache.set(cacheKey, {
+          kind: 'done',
+          result,
+        });
+      }
     }
     return [updatedData !== renderData, updatedCurrentSnapshot];
   }
@@ -736,7 +838,7 @@ class FragmentResourceImpl {
       .then(() => {
         this._cache.delete(cacheKey);
       })
-      .catch((error: Error) => {
+      .catch<void>((error: Error) => {
         this._cache.delete(cacheKey);
       });
     // $FlowExpectedError[prop-missing] Expando to annotate Promises.
@@ -773,10 +875,22 @@ class FragmentResourceImpl {
       ? [...currentSnapshot]
       : [...baseSnapshots];
     nextSnapshots[idx] = latestSnapshot;
-    this._cache.set(cacheKey, {
-      kind: 'done',
-      result: getFragmentResult(cacheKey, nextSnapshots, storeEpoch),
-    });
+    const result = getFragmentResult(cacheKey, nextSnapshots, storeEpoch);
+    if (
+      RelayFeatureFlags.ENABLE_RELAY_OPERATION_TRACKER_SUSPENSE &&
+      result.isMissingData
+    ) {
+      this._cache.set(cacheKey, {
+        kind: 'missing',
+        result,
+        snapshot: nextSnapshots,
+      });
+    } else {
+      this._cache.set(cacheKey, {
+        kind: 'done',
+        result,
+      });
+    }
   }
 }
 

package/relay-hooks/HooksImplementation.js.flow

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/relay-hooks/InternalLogger.js.flow

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/relay-hooks/LRUCache.js.flow

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @flow strict-local
- * @emails oncall+relay
  * @format
+ * @oncall relay
  */
 
 'use strict';

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

@@ -4,13 +4,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
-
+import type {OperationType} from '../../relay-runtime/util/RelayRuntimeTypes';
 import type {
   EntryPoint,
   EntryPointComponent,
@@ -85,8 +85,10 @@ function prepareEntryPoint<
   }
   const preloadProps = entryPoint.getPreloadProps(entryPointParams);
   const {queries, entryPoints, extraProps} = preloadProps;
-  const preloadedQueries: $Shape<TPreloadedQueries> = {};
-  const preloadedEntryPoints: $Shape<TPreloadedEntryPoints> = {};
+  // $FlowFixMe[incompatible-type]
+  const preloadedQueries: Partial<TPreloadedQueries> = {};
+  // $FlowFixMe[incompatible-type]
+  const preloadedEntryPoints: Partial<TPreloadedEntryPoints> = {};
   if (queries != null) {
     const queriesPropNames = Object.keys(queries);
     queriesPropNames.forEach(queryPropName => {
@@ -97,7 +99,10 @@ function prepareEntryPoint<
         environmentProviderOptions,
       );
 
-      preloadedQueries[queryPropName] = preloadQuery_DEPRECATED(
+      preloadedQueries[queryPropName] = preloadQuery_DEPRECATED<
+        OperationType,
+        mixed,
+      >(
         environment,
         parameters,
         variables,
@@ -116,11 +121,15 @@ function prepareEntryPoint<
       }
       const {entryPoint: nestedEntryPoint, entryPointParams: nestedParams} =
         entryPointDescription;
-      preloadedEntryPoints[entryPointPropName] = prepareEntryPoint(
-        environmentProvider,
-        nestedEntryPoint,
-        nestedParams,
-      );
+      preloadedEntryPoints[entryPointPropName] = prepareEntryPoint<
+        _,
+        {...},
+        {...},
+        {...},
+        mixed,
+        EntryPointComponent<{...}, {...}, {...}, mixed>,
+        _,
+      >(environmentProvider, nestedEntryPoint, nestedParams);
     });
   }
   return {

package/relay-hooks/MatchContainer.js.flow

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/relay-hooks/NestedRelayEntryPointBuilderUtils.js.flow

@@ -0,0 +1,51 @@
+/**
+ * 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
+ * @format
+ * @oncall relay
+ */
+
+'use strict';
+
+import type {
+  InternalEntryPointRepresentation,
+  ThinNestedEntryPointParams,
+} from './EntryPointTypes.flow';
+
+/**
+ * This is an identity function to construct a type safe nested entrypoint.
+ * By calling this function, we ensure that the type of entryPointParams matches
+ * exactly the type of preloadProps of the entrypoint.
+ *
+ * We make the type of `ThinNestedEntryPointParams` opaque, so that the only way
+ * to construct a `ThinNestedEntryPointParams` is by calling this function.
+ */
+declare function NestedRelayEntryPoint<
+  TEntryPointParams,
+  TPreloadedQueries,
+  TPreloadedEntryPoints,
+  TRuntimeProps,
+  TExtraProps,
+>(
+  $ReadOnly<{
+    entryPoint: InternalEntryPointRepresentation<
+      TEntryPointParams,
+      TPreloadedQueries,
+      TPreloadedEntryPoints,
+      TRuntimeProps,
+      TExtraProps,
+    >,
+    entryPointParams: TEntryPointParams,
+  }>,
+): ThinNestedEntryPointParams;
+
+// eslint-disable-next-line no-redeclare
+function NestedRelayEntryPoint<P>(params: P): P {
+  return params;
+}
+
+export {NestedRelayEntryPoint};

package/relay-hooks/ProfilerContext.js.flow

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 // This contextual profiler can be used to wrap a react sub-tree. It will bind

package/relay-hooks/QueryResource.js.flow

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @flow strict-local
- * @emails oncall+relay
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -35,6 +35,7 @@ const warning = require('warning');
 
 const CACHE_CAPACITY = 1000;
 const DEFAULT_FETCH_POLICY = 'store-or-network';
+const DEFAULT_LIVE_FETCH_POLICY = 'store-and-network';
 
 export type QueryResource = QueryResourceImpl;
 
@@ -83,7 +84,11 @@ function getQueryCacheIdentifier(
   maybeRenderPolicy: ?RenderPolicy,
   cacheBreaker?: ?string | ?number,
 ): string {
-  const fetchPolicy = maybeFetchPolicy ?? DEFAULT_FETCH_POLICY;
+  const fetchPolicy =
+    maybeFetchPolicy ??
+    (operationIsLiveQuery(operation)
+      ? DEFAULT_LIVE_FETCH_POLICY
+      : DEFAULT_FETCH_POLICY);
   const renderPolicy =
     maybeRenderPolicy ?? environment.UNSTABLE_getDefaultRenderPolicy();
   const cacheIdentifier = `${fetchPolicy}-${renderPolicy}-${operation.request.identifier}`;
@@ -143,7 +148,18 @@ function createCacheEntry(
     };
   });
 
-  const cacheEntry = {
+  const cacheEntry: {
+    cacheIdentifier: string,
+    getValue(): QueryResult | Promise<void> | Error,
+    id: number,
+    operationAvailability: ?OperationAvailability,
+    permanentRetain(environment: IEnvironment): Disposable,
+    processedPayloadsCount: number,
+    releaseTemporaryRetain(): void,
+    setNetworkSubscription(subscription: ?Subscription): void,
+    setValue(val: QueryResult | Promise<void> | Error): void,
+    temporaryRetain(environment: IEnvironment): Disposable,
+  } = {
     cacheIdentifier,
     id: nextID++,
     processedPayloadsCount: 0,
@@ -225,7 +241,11 @@ class QueryResourceImpl {
     profilerContext: mixed,
   ): QueryResult {
     const environment = this._environment;
-    const fetchPolicy = maybeFetchPolicy ?? DEFAULT_FETCH_POLICY;
+    const fetchPolicy =
+      maybeFetchPolicy ??
+      (operationIsLiveQuery(operation)
+        ? DEFAULT_LIVE_FETCH_POLICY
+        : DEFAULT_FETCH_POLICY);
     const renderPolicy =
       maybeRenderPolicy ?? environment.UNSTABLE_getDefaultRenderPolicy();
 
@@ -525,7 +545,7 @@ class QueryResourceImpl {
 
       let cacheEntry = this._cache.get(cacheIdentifier);
       if (!cacheEntry) {
-        const networkPromise = new Promise(resolve => {
+        const networkPromise = new Promise<void>(resolve => {
           resolveNetworkPromise = resolve;
         });
 

package/relay-hooks/RelayEnvironmentProvider.js.flow

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -17,8 +17,8 @@ import type {
   IActorEnvironment,
 } from 'relay-runtime/multi-actor-environment';
 
+const ReactRelayContext = require('./../ReactRelayContext');
 const React = require('react');
-const ReactRelayContext = require('react-relay/ReactRelayContext');
 
 const {useMemo} = React;
 

package/relay-hooks/SuspenseResource.js.flow

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @flow strict-local
- * @emails oncall+relay
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/relay-hooks/__flowtests__/EntryPointTypes/EntryPointElementConfig-flowtest.js.flow

@@ -4,11 +4,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
+/* eslint-disable no-unused-vars */
+
 'use strict';
 
 import type {

package/relay-hooks/__flowtests__/EntryPointTypes/NestedEntrypoints-flowtest.js.flow

@@ -4,19 +4,21 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
 
-import type {JSResourceReference} from 'JSResourceReference';
 import type {
   EntryPoint,
   EntryPointProps,
   PreloadedEntryPoint,
 } from '../../EntryPointTypes.flow';
+import type {JSResourceReference} from 'JSResourceReference';
+
+import {NestedRelayEntryPoint} from '../../NestedRelayEntryPointBuilderUtils';
 
 declare function mockJSResource<TModule>(
   module: TModule,
@@ -65,14 +67,14 @@ type BadParentEntrypointParams = $ReadOnly<{}>;
   getPreloadProps(_params: BadParentEntrypointParams) {
     return {
       entryPoints: {
-        nestedComponent: {
-          entryPoint: NestedEntryPoint,
+        nestedComponent: NestedRelayEntryPoint({
           /**
            $FlowExpectedError The entryPointParams here should be of type
             NestedEntrypointPreloadParams, but it does not contain subEntrypointPreloadParam
           */
+          entryPoint: NestedEntryPoint,
           entryPointParams: Object.freeze({}),
-        },
+        }),
       },
     };
   },
@@ -90,13 +92,13 @@ type GoodParentEntrypointParams = $ReadOnly<{}>;
   getPreloadProps(_params: GoodParentEntrypointParams) {
     return {
       entryPoints: {
-        nestedComponent: {
+        nestedComponent: NestedRelayEntryPoint({
           entryPoint: NestedEntryPoint,
           // No flow error since this matches NestedEntrypointPreloadParams
           entryPointParams: {
             subEntrypointPreloadParam: 'test',
           },
-        },
+        }),
       },
     };
   },

package/relay-hooks/__flowtests__/__generated__/useFragmentFlowtest_user.graphql.js.flow

@@ -4,7 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<8a8e68a3fde4da3f77546ac4952f2635>>
+ * @oncall relay
+ *
+ * @generated SignedSource<<fef9e96f393a59b2e761b70b1c3ddc50>>
  * @flow
  * @lightSyntaxTransform
  * @nogrep

package/relay-hooks/__flowtests__/__generated__/useFragmentFlowtest_users.graphql.js.flow

@@ -4,7 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<0b4a6e76a104111de9ddd4dd9abe667c>>
+ * @oncall relay
+ *
+ * @generated SignedSource<<1bd343735be9917826ee3203cf6756c4>>
  * @flow
  * @lightSyntaxTransform
  * @nogrep