react-relay 13.1.1 → 14.1.0

package/relay-hooks/FragmentResource.js.flow

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {Cache} from './LRUCache';
@@ -24,6 +22,7 @@ import type {
   RequestDescriptor,
   Snapshot,
 } from 'relay-runtime';
+import type {MissingLiveResolverField} from 'relay-runtime/store/RelayStoreTypes';
 
 const LRUCache = require('./LRUCache');
 const {getQueryResourceForEnvironment} = require('./QueryResource');
@@ -37,21 +36,21 @@ const {
   getPendingOperationsForFragment,
   getSelector,
   getVariablesFromFragment,
+  handlePotentialSnapshotErrors,
   isPromise,
   recycleNodesInto,
-  reportMissingRequiredFields,
 } = require('relay-runtime');
 
 export type FragmentResource = FragmentResourceImpl;
 
 type FragmentResourceCache = Cache<
-  | {|
+  | {
       kind: 'pending',
       pendingOperations: $ReadOnlyArray<RequestDescriptor>,
       promise: Promise<mixed>,
       result: FragmentResult,
-    |}
-  | {|kind: 'done', result: FragmentResult|},
+    }
+  | {kind: 'done', result: FragmentResult},
 >;
 
 const WEAKMAP_SUPPORTED = typeof WeakMap === 'function';
@@ -62,13 +61,13 @@ interface IMap<K, V> {
 
 type SingularOrPluralSnapshot = Snapshot | $ReadOnlyArray<Snapshot>;
 
-opaque type FragmentResult: {data: mixed, ...} = {|
+opaque type FragmentResult: {data: mixed, ...} = {
   cacheKey: string,
   data: mixed,
   isMissingData: boolean,
   snapshot: SingularOrPluralSnapshot | null,
   storeEpoch: number,
-|};
+};
 
 // TODO: Fix to not rely on LRU. If the number of active fragments exceeds this
 // capacity, readSpec() will fail to find cached entries and break object
@@ -92,6 +91,18 @@ function hasMissingClientEdges(snapshot: SingularOrPluralSnapshot): boolean {
   return (snapshot.missingClientEdges?.length ?? 0) > 0;
 }
 
+function missingLiveResolverFields(
+  snapshot: SingularOrPluralSnapshot,
+): ?$ReadOnlyArray<MissingLiveResolverField> {
+  if (Array.isArray(snapshot)) {
+    return snapshot
+      .map(s => s.missingLiveResolverFields)
+      .filter(Boolean)
+      .flat();
+  }
+  return snapshot.missingLiveResolverFields;
+}
+
 function singularOrPluralForEach(
   snapshot: SingularOrPluralSnapshot,
   f: Snapshot => void,
@@ -165,7 +176,7 @@ class ClientEdgeQueryResultsCache {
     }
   }
 
-  _retain(id) {
+  _retain(id: string): {dispose: () => void} {
     const retainCount = (this._retainCounts.get(id) ?? 0) + 1;
     this._retainCounts.set(id, retainCount);
     return {
@@ -288,8 +299,12 @@ class FragmentResourceImpl {
         throw cachedValue.promise;
       }
 
-      if (cachedValue.kind === 'done' && cachedValue.result.snapshot) {
-        this._reportMissingRequiredFieldsInSnapshot(
+      if (
+        cachedValue.kind === 'done' &&
+        cachedValue.result.snapshot &&
+        !missingLiveResolverFields(cachedValue.result.snapshot)?.length
+      ) {
+        this._handlePotentialSnapshotErrorsInSnapshot(
           cachedValue.result.snapshot,
         );
         return cachedValue.result;
@@ -330,7 +345,7 @@ class FragmentResourceImpl {
       storeEpoch,
     );
     if (!fragmentResult.isMissingData) {
-      this._reportMissingRequiredFieldsInSnapshot(snapshot);
+      this._handlePotentialSnapshotErrorsInSnapshot(snapshot);
 
       this._cache.set(fragmentIdentifier, {
         kind: 'done',
@@ -352,6 +367,7 @@ class FragmentResourceImpl {
     let clientEdgeRequests: ?Array<RequestDescriptor> = null;
     if (
       RelayFeatureFlags.ENABLE_CLIENT_EDGES &&
+      fragmentNode.metadata?.hasClientEdges === true &&
       hasMissingClientEdges(snapshot)
     ) {
       clientEdgeRequests = [];
@@ -384,11 +400,11 @@ class FragmentResourceImpl {
         queryResults,
       );
     }
-    let clientEdgePromises = null;
+    let clientEdgePromises: Array<Promise<void>> = [];
     if (RelayFeatureFlags.ENABLE_CLIENT_EDGES && clientEdgeRequests) {
       clientEdgePromises = clientEdgeRequests
         .map(request => getPromiseForActiveRequest(this._environment, request))
-        .filter(p => p != null);
+        .filter(Boolean);
     }
 
     // Finally look for operations in flight for our parent query:
@@ -404,9 +420,17 @@ class FragmentResourceImpl {
         fragmentResult,
       );
     const parentQueryPromiseResultPromise = parentQueryPromiseResult?.promise; // for refinement
+    const missingResolverFieldPromises =
+      missingLiveResolverFields(snapshot)?.map(({liveStateID}) => {
+        const store = environment.getStore();
+
+        // $FlowFixMe[prop-missing] This is expected to be a LiveResolverStore
+        return store.getLiveResolverPromise(liveStateID);
+      }) ?? [];
 
     if (
-      clientEdgePromises?.length ||
+      clientEdgePromises.length ||
+      missingResolverFieldPromises.length ||
       isPromise(parentQueryPromiseResultPromise)
     ) {
       environment.__log({
@@ -416,17 +440,36 @@ class FragmentResourceImpl {
         isRelayHooks: true,
         isPromiseCached: false,
         isMissingData: fragmentResult.isMissingData,
+        // TODO! Attach information here about missing live resolver fields
         pendingOperations: [
           ...(parentQueryPromiseResult?.pendingOperations ?? []),
           ...(clientEdgeRequests ?? []),
         ],
       });
-      throw clientEdgePromises?.length
-        ? Promise.all([parentQueryPromiseResultPromise, ...clientEdgePromises])
-        : parentQueryPromiseResultPromise;
+      let promises = [];
+      if (clientEdgePromises.length > 0) {
+        promises = promises.concat(clientEdgePromises);
+      }
+      if (missingResolverFieldPromises.length > 0) {
+        promises = promises.concat(missingResolverFieldPromises);
+      }
+
+      if (promises.length > 0) {
+        if (parentQueryPromiseResultPromise) {
+          promises.push(parentQueryPromiseResultPromise);
+        }
+        throw Promise.all(promises);
+      }
+
+      // Note: we are re-throwing the `parentQueryPromiseResultPromise` here,
+      // because some of our suspense-related code is relying on the instance equality
+      // of thrown promises. See FragmentResource-test.js
+      if (parentQueryPromiseResultPromise) {
+        throw parentQueryPromiseResultPromise;
+      }
     }
 
-    this._reportMissingRequiredFieldsInSnapshot(snapshot);
+    this._handlePotentialSnapshotErrorsInSnapshot(snapshot);
     return getFragmentResult(fragmentIdentifier, snapshot, storeEpoch);
   }
 
@@ -436,7 +479,7 @@ class FragmentResourceImpl {
     fragmentRef: mixed,
     request: ConcreteRequest,
     clientEdgeDestinationID: DataID,
-  ) {
+  ): {queryResult: QueryResult, requestDescriptor: RequestDescriptor} {
     const originalVariables = getVariablesFromFragment(
       fragmentNode,
       fragmentRef,
@@ -462,23 +505,21 @@ class FragmentResourceImpl {
     };
   }
 
-  _reportMissingRequiredFieldsInSnapshot(snapshot: SingularOrPluralSnapshot) {
+  _handlePotentialSnapshotErrorsInSnapshot(snapshot: SingularOrPluralSnapshot) {
     if (Array.isArray(snapshot)) {
       snapshot.forEach(s => {
-        if (s.missingRequiredFields != null) {
-          reportMissingRequiredFields(
-            this._environment,
-            s.missingRequiredFields,
-          );
-        }
-      });
-    } else {
-      if (snapshot.missingRequiredFields != null) {
-        reportMissingRequiredFields(
+        handlePotentialSnapshotErrors(
           this._environment,
-          snapshot.missingRequiredFields,
+          s.missingRequiredFields,
+          s.relayResolverErrors,
         );
-      }
+      });
+    } else {
+      handlePotentialSnapshotErrors(
+        this._environment,
+        snapshot.missingRequiredFields,
+        snapshot.relayResolverErrors,
+      );
     }
   }
 
@@ -487,7 +528,7 @@ class FragmentResourceImpl {
     fragmentRefs: {[string]: mixed, ...},
     componentDisplayName: string,
   ): {[string]: FragmentResult, ...} {
-    const result = {};
+    const result: {[string]: FragmentResult} = {};
     for (const key in fragmentNodes) {
       result[key] = this.read(
         fragmentNodes[key],
@@ -596,7 +637,7 @@ class FragmentResourceImpl {
 
   checkMissedUpdates(
     fragmentResult: FragmentResult,
-  ): [boolean, SingularOrPluralSnapshot | null] {
+  ): [boolean /* were updates missed? */, SingularOrPluralSnapshot | null] {
     const environment = this._environment;
     const renderedSnapshot = fragmentResult.snapshot;
     if (!renderedSnapshot) {
@@ -644,9 +685,11 @@ class FragmentResourceImpl {
       data: updatedData,
       isMissingData: currentSnapshot.isMissingData,
       missingClientEdges: currentSnapshot.missingClientEdges,
+      missingLiveResolverFields: currentSnapshot.missingLiveResolverFields,
       seenRecords: currentSnapshot.seenRecords,
       selector: currentSnapshot.selector,
       missingRequiredFields: currentSnapshot.missingRequiredFields,
+      relayResolverErrors: currentSnapshot.relayResolverErrors,
     };
     if (updatedData !== renderData) {
       this._cache.set(cacheKey, {
@@ -671,10 +714,10 @@ class FragmentResourceImpl {
     fragmentNode: ReaderFragment,
     fragmentOwner: RequestDescriptor,
     fragmentResult: FragmentResult,
-  ): {|
+  ): {
     promise: Promise<void>,
     pendingOperations: $ReadOnlyArray<RequestDescriptor>,
-  |} | null {
+  } | null {
     const pendingOperationsResult = getPendingOperationsForFragment(
       this._environment,
       fragmentNode,

package/relay-hooks/HooksImplementation.js.flow

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ *
+ * @emails oncall+relay
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+import typeof useFragment from './useFragment';
+import type {UsePaginationFragmentType} from './usePaginationFragment';
+import type {UseRefetchableFragmentType} from './useRefetchableFragment';
+
+const warning = require('warning');
+
+type HooksImplementation = {
+  useFragment: useFragment,
+  usePaginationFragment: UsePaginationFragmentType,
+  useRefetchableFragment: UseRefetchableFragmentType,
+};
+
+let implementation: HooksImplementation | null = null;
+
+function inject(impl: HooksImplementation): void {
+  warning(
+    implementation !== null,
+    'Relay HooksImplementation was injected twice.',
+  );
+  implementation = impl;
+}
+
+function get(): HooksImplementation | null {
+  return implementation;
+}
+
+module.exports = {
+  inject,
+  get,
+};

package/relay-hooks/InternalLogger.js.flow

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 type LogEvent = (eventData: string) => void;

package/relay-hooks/LRUCache.js.flow

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 const invariant = require('invariant');

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

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {
@@ -27,13 +25,13 @@ const React = require('react');
 const {useContext, useEffect, useMemo} = require('react');
 const {stableCopy} = require('relay-runtime');
 
-type PreloadedEntryPoint<TEntryPointComponent> = $ReadOnly<{|
+type PreloadedEntryPoint<TEntryPointComponent> = $ReadOnly<{
   entryPoints: React.ElementConfig<TEntryPointComponent>['entryPoints'],
   extraProps: React.ElementConfig<TEntryPointComponent>['extraProps'],
   getComponent: () => TEntryPointComponent,
   queries: React.ElementConfig<TEntryPointComponent>['queries'],
   rootModuleID: string,
-|}>;
+}>;
 
 type EntryPointContainerProps<
   TEntryPointParams,
@@ -42,7 +40,7 @@ type EntryPointContainerProps<
   TRuntimeProps,
   TExtraProps,
 > = $ReadOnly<
-  $ReadOnly<{|
+  $ReadOnly<{
     entryPoint: EntryPoint<
       TEntryPointParams,
       EntryPointComponent<
@@ -55,7 +53,7 @@ type EntryPointContainerProps<
     entryPointParams: TEntryPointParams,
     environmentProvider?: IEnvironmentProvider<EnvironmentProviderOptions>,
     props: TRuntimeProps,
-  |}>,
+  }>,
 >;
 
 function stableStringify(value: mixed): string {

package/relay-hooks/MatchContainer.js.flow

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 const React = require('react');
@@ -87,7 +85,7 @@ const {useMemo} = React;
 
 // Note: this type is intentionally non-exact, it is expected that the
 // object may contain sibling fields.
-type TypenameOnlyPointer = {|+__typename: string|};
+type TypenameOnlyPointer = {+__typename: string};
 export type MatchPointer = {
   +__fragmentPropName?: ?string,
   +__module_component?: mixed,
@@ -95,12 +93,12 @@ export type MatchPointer = {
   ...
 };
 
-export type MatchContainerProps<TProps: {...}, TFallback: React.Node> = {|
+export type MatchContainerProps<TProps: {...}, TFallback: React.Node> = {
   +fallback?: ?TFallback,
   +loader: (module: mixed) => React.AbstractComponent<TProps>,
   +match: ?MatchPointer | ?TypenameOnlyPointer,
   +props?: TProps,
-|};
+};
 
 function MatchContainer<TProps: {...}, TFallback: React.Node | null>({
   fallback,
@@ -149,7 +147,13 @@ function MatchContainer<TProps: {...}, TFallback: React.Node | null>({
     // TODO: Perform this transformation in RelayReader so that unchanged
     // output of subscriptions already has a stable identity.
     if (__fragmentPropName != null && __id != null && __fragments != null) {
-      const fragProps = {};
+      const fragProps: {
+        [string]: {
+          __fragmentOwner: $FlowFixMe,
+          __fragments: $FlowFixMe,
+          __id: string,
+        },
+      } = {};
       fragProps[__fragmentPropName] = {__id, __fragments, __fragmentOwner};
       return fragProps;
     }
@@ -158,6 +162,7 @@ function MatchContainer<TProps: {...}, TFallback: React.Node | null>({
 
   if (LoadedContainer != null && fragmentProps != null) {
     // $FlowFixMe[incompatible-type]
+    // $FlowFixMe[cannot-spread-indexer]
     return <LoadedContainer {...props} {...fragmentProps} />;
   } else {
     return fallback ?? null;

package/relay-hooks/ProfilerContext.js.flow

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 // This contextual profiler can be used to wrap a react sub-tree. It will bind
 // the RelayProfiler during the render phase of these components. Allows
 // collecting metrics for a specific part of your application.