react-relay 15.0.0 → 16.1.0

package/relay-hooks/FragmentResource.js.flow

@@ -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';
@@ -348,16 +353,28 @@ 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._throwOrLogErrorsInSnapshot(snapshot);
 
@@ -483,6 +500,17 @@ class FragmentResourceImpl {
       }
     }
 
+    // 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
@@ -617,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();
         }),
       );
@@ -696,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];
     }
@@ -718,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];
   }
@@ -799,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

@@ -11,6 +11,7 @@
 
 'use strict';
 
+import typeof useFragmentInternal from './experimental/useFragmentInternal_EXPERIMENTAL';
 import typeof useFragment from './useFragment';
 import type {UsePaginationFragmentType} from './usePaginationFragment';
 import type {UseRefetchableFragmentType} from './useRefetchableFragment';
@@ -21,13 +22,14 @@ type HooksImplementation = {
   useFragment: useFragment,
   usePaginationFragment: UsePaginationFragmentType,
   useRefetchableFragment: UseRefetchableFragmentType,
+  useFragment__internal?: useFragmentInternal,
 };
 
 let implementation: HooksImplementation | null = null;
 
 function inject(impl: HooksImplementation): void {
   warning(
-    implementation !== null,
+    implementation === null,
     'Relay HooksImplementation was injected twice.',
   );
   implementation = impl;

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

@@ -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 => {

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/__flowtests__/EntryPointTypes/NestedEntrypoints-flowtest.js.flow

@@ -18,6 +18,8 @@ import type {
 } from '../../EntryPointTypes.flow';
 import type {JSResourceReference} from 'JSResourceReference';
 
+import {NestedRelayEntryPoint} from '../../NestedRelayEntryPointBuilderUtils';
+
 declare function mockJSResource<TModule>(
   module: TModule,
 ): JSResourceReference<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__/useBlockingPaginationFragment-flowtest.js.flow

@@ -45,6 +45,8 @@ type ExpectedReturnType<
 /* eslint-disable react-hooks/rules-of-hooks */
 
 // Nullability of returned data type is correct
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-cast]
 (useBlockingPaginationFragment(
   refetchableFragmentInput,
   keyNonNullable,
@@ -112,9 +114,12 @@ const {loadNext} = useBlockingPaginationFragment(
 );
 // Accepts extraVariables
 loadNext(10, {
+  // $FlowFixMe[prop-missing]
+  // $FlowFixMe[incompatible-call]
   UNSTABLE_extraVariables: extraVariables,
 });
 
+// $FlowFixMe[prop-missing]
 loadNext(10, {
   // $FlowExpectedError: doesn't accept variables not available in the Flow type
   UNSTABLE_extraVariables: invalidVariables,

package/relay-hooks/__flowtests__/usePaginationFragment-flowtest.js.flow

@@ -47,6 +47,8 @@ type ExpectedReturnType<
 /* eslint-disable react-hooks/rules-of-hooks */
 
 // Nullability of returned data type is correct
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-cast]
 (usePaginationFragment(
   refetchableFragmentInput,
   keyNonNullable,
@@ -113,9 +115,12 @@ const {loadNext} = usePaginationFragment(
 );
 // Accepts extraVariables
 loadNext(10, {
+  // $FlowFixMe[prop-missing]
+  // $FlowFixMe[incompatible-call]
   UNSTABLE_extraVariables: extraVariables,
 });
 
+// $FlowFixMe[prop-missing]
 loadNext(10, {
   // $FlowExpectedError: doesn't accept variables not available in the Flow type
   UNSTABLE_extraVariables: invalidVariables,

package/relay-hooks/__flowtests__/useRefetchableFragment-flowtest.js.flow

@@ -31,6 +31,8 @@ import {
 /* eslint-disable react-hooks/rules-of-hooks */
 
 // Nullability of returned data type is correct
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-cast]
 (useRefetchableFragment(refetchableFragmentInput, keyNonNullable): [
   NonNullableData,
   FetchFn<QueryVariablesSubset>,

package/relay-hooks/{react-cache/readFragmentInternal_REACT_CACHE.js.flow → experimental/readFragmentInternal_EXPERIMENTAL.js.flow}

@@ -27,6 +27,7 @@ const {getQueryResourceForEnvironment} = require('../QueryResource');
 const invariant = require('invariant');
 const {
   __internal: {fetchQuery: fetchQueryInternal},
+  RelayFeatureFlags,
   createOperationDescriptor,
   getPendingOperationsForFragment,
   getSelector,
@@ -156,7 +157,7 @@ function getFragmentState(
 }
 
 // fragmentNode cannot change during the lifetime of the component, though fragmentRef may change.
-function readFragmentInternal_REACT_CACHE(
+function readFragmentInternal_EXPERIMENTAL(
   environment: IEnvironment,
   fragmentNode: ReaderFragment,
   fragmentRef: mixed,
@@ -268,7 +269,7 @@ function readFragmentInternal_REACT_CACHE(
     data = state.snapshots.map(s => s.data);
   }
 
-  if (__DEV__) {
+  if (RelayFeatureFlags.LOG_MISSING_RECORDS_IN_PROD || __DEV__) {
     if (
       fragmentRef != null &&
       (data === undefined ||
@@ -294,4 +295,4 @@ function readFragmentInternal_REACT_CACHE(
   return {data, clientEdgeQueries};
 }
 
-module.exports = readFragmentInternal_REACT_CACHE;
+module.exports = readFragmentInternal_EXPERIMENTAL;

package/relay-hooks/{react-cache/useFragmentInternal_REACT_CACHE.js.flow → experimental/useFragmentInternal_EXPERIMENTAL.js.flow}

@@ -32,6 +32,7 @@ const invariant = require('invariant');
 const {useDebugValue, useEffect, useMemo, useRef, useState} = require('react');
 const {
   __internal: {fetchQuery: fetchQueryInternal},
+  RelayFeatureFlags,
   areEqualSelectors,
   createOperationDescriptor,
   getPendingOperationsForFragment,
@@ -256,7 +257,17 @@ function subscribeToSnapshot(
           prevState.kind !== 'singular' ||
           prevState.snapshot.selector !== latestSnapshot.selector
         ) {
-          return prevState;
+          const updates = handleMissedUpdates(environment, prevState);
+          if (updates != null) {
+            const [dataChanged, nextState] = updates;
+            environment.__log({
+              name: 'useFragment.subscription.missedUpdates',
+              hasDataChanges: dataChanged,
+            });
+            return dataChanged ? nextState : prevState;
+          } else {
+            return prevState;
+          }
         }
         return {
           kind: 'singular',
@@ -279,7 +290,17 @@ function subscribeToSnapshot(
             prevState.kind !== 'plural' ||
             prevState.snapshots[index]?.selector !== latestSnapshot.selector
           ) {
-            return prevState;
+            const updates = handleMissedUpdates(environment, prevState);
+            if (updates != null) {
+              const [dataChanged, nextState] = updates;
+              environment.__log({
+                name: 'useFragment.subscription.missedUpdates',
+                hasDataChanges: dataChanged,
+              });
+              return dataChanged ? nextState : prevState;
+            } else {
+              return prevState;
+            }
           }
           const updated = [...prevState.snapshots];
           updated[index] = latestSnapshot;
@@ -323,12 +344,11 @@ function getFragmentState(
 }
 
 // fragmentNode cannot change during the lifetime of the component, though fragmentRef may change.
-function useFragmentInternal_REACT_CACHE(
+function useFragmentInternal_EXPERIMENTAL(
   fragmentNode: ReaderFragment,
   fragmentRef: mixed,
   hookDisplayName: string,
   queryOptions?: FragmentQueryOptions,
-  fragmentKey?: string,
 ): ?SelectorData | Array<?SelectorData> {
   const fragmentSelector = useMemo(
     () => getSelector(fragmentNode, fragmentRef),
@@ -343,7 +363,6 @@ function useFragmentInternal_REACT_CACHE(
       'Relay: Expected fragment pointer%s for fragment `%s` to be ' +
         'an array, instead got `%s`. Remove `@relay(plural: true)` ' +
         'from fragment `%s` to allow the prop to be an object.',
-      fragmentKey != null ? ` for key \`${fragmentKey}\`` : '',
       fragmentNode.name,
       typeof fragmentRef,
       fragmentNode.name,
@@ -354,7 +373,6 @@ function useFragmentInternal_REACT_CACHE(
       'Relay: Expected fragment pointer%s for fragment `%s` not to be ' +
         'an array, instead got `%s`. Add `@relay(plural: true)` ' +
         'to fragment `%s` to allow the prop to be an array.',
-      fragmentKey != null ? ` for key \`${fragmentKey}\`` : '',
       fragmentNode.name,
       typeof fragmentRef,
       fragmentNode.name,
@@ -378,7 +396,6 @@ function useFragmentInternal_REACT_CACHE(
     fragmentNode.name,
     hookDisplayName,
     fragmentNode.name,
-    fragmentKey == null ? 'a fragment reference' : `the \`${fragmentKey}\``,
     hookDisplayName,
   );
 
@@ -418,7 +435,7 @@ function useFragmentInternal_REACT_CACHE(
   // The purpose of this is to detect whether we have ever committed, because we
   // don't suspend on store updates, only when the component either is first trying
   // to mount or when the our selector changes. The selector change in particular is
-  // how we suspend for pagination and refetech. Also, fragment selector can be null
+  // how we suspend for pagination and refetch. Also, fragment selector can be null
   // or undefined, so we use false as a special value to distinguish from all fragment
   // selectors; false means that the component hasn't mounted yet.
   const committedFragmentSelectorRef = useRef<false | ?ReaderSelector>(false);
@@ -505,11 +522,12 @@ function useFragmentInternal_REACT_CACHE(
         throw pendingOperationsResult.promise;
       }
     }
-    // Report required fields only if we're not suspending, since that means
-    // they're missing even though we are out of options for possibly fetching them:
-    handlePotentialSnapshotErrorsForState(environment, state);
   }
 
+  // Report required fields only if we're not suspending, since that means
+  // they're missing even though we are out of options for possibly fetching them:
+  handlePotentialSnapshotErrorsForState(environment, state);
+
   useEffect(() => {
     // Check for updates since the state was rendered
     let currentState = subscribedState;
@@ -533,7 +551,7 @@ function useFragmentInternal_REACT_CACHE(
 
   let data: ?SelectorData | Array<?SelectorData>;
   if (isPlural) {
-    // Plural fragments require allocating an array of the snasphot data values,
+    // Plural fragments require allocating an array of the snapshot data values,
     // which has to be memoized to avoid triggering downstream re-renders.
     //
     // Note that isPlural is a constant property of the fragment and does not change
@@ -565,7 +583,7 @@ function useFragmentInternal_REACT_CACHE(
     data = state.snapshot.data;
   }
 
-  if (__DEV__) {
+  if (RelayFeatureFlags.LOG_MISSING_RECORDS_IN_PROD || __DEV__) {
     if (
       fragmentRef != null &&
       (data === undefined ||
@@ -596,4 +614,4 @@ function useFragmentInternal_REACT_CACHE(
   return data;
 }
 
-module.exports = useFragmentInternal_REACT_CACHE;
+module.exports = useFragmentInternal_EXPERIMENTAL;

package/relay-hooks/{react-cache/useFragment_REACT_CACHE.js.flow → experimental/useFragment_EXPERIMENTAL.js.flow}

@@ -15,7 +15,7 @@ import type {Fragment, FragmentType, GraphQLTaggedNode} from 'relay-runtime';
 
 const {useTrackLoadQueryInRender} = require('../loadQuery');
 const useStaticFragmentNodeWarning = require('../useStaticFragmentNodeWarning');
-const useFragmentInternal = require('./useFragmentInternal_REACT_CACHE');
+const useFragmentInternal = require('./useFragmentInternal_EXPERIMENTAL');
 const {useDebugValue} = require('react');
 const {getFragment} = require('relay-runtime');
 
@@ -30,23 +30,17 @@ declare function useFragment<TFragmentType: FragmentType, TData>(
   key: HasSpread<TFragmentType>,
 ): TData;
 
-// if the key is nullable, return nullable value
-declare function useFragment<TFragmentType: FragmentType, TData>(
-  fragment: Fragment<TFragmentType, TData>,
-  key: ?HasSpread<TFragmentType>,
-): ?TData;
-
 // if the key is a non-nullable array of keys, return non-nullable array
 declare function useFragment<TFragmentType: FragmentType, TData>(
   fragment: Fragment<TFragmentType, TData>,
   key: $ReadOnlyArray<HasSpread<TFragmentType>>,
 ): TData;
 
-// if the key is a nullable array of keys, return nullable array
+// if the key is null/void, return null/void value
 declare function useFragment<TFragmentType: FragmentType, TData>(
   fragment: Fragment<TFragmentType, TData>,
-  key: ?$ReadOnlyArray<HasSpread<TFragmentType>>,
-): ?TData;
+  key: null | void,
+): null | void;
 
 function useFragment(fragment: GraphQLTaggedNode, key: mixed): mixed {
   // We need to use this hook in order to be able to track if