react-relay 20.1.1 → 21.0.0

package/relay-hooks/useFragmentInternal_CURRENT.js.flow

@@ -47,10 +47,10 @@ type FragmentQueryOptions = {
   networkCacheConfig?: ?CacheConfig,
 };
 
-type FragmentState = $ReadOnly<
+type FragmentState = Readonly<
   | {kind: 'bailout'}
   | {kind: 'singular', snapshot: Snapshot, epoch: number}
-  | {kind: 'plural', snapshots: $ReadOnlyArray<Snapshot>, epoch: number},
+  | {kind: 'plural', snapshots: ReadonlyArray<Snapshot>, epoch: number},
 >;
 
 type StateUpdaterFunction<T> = ((T) => T) => void;
@@ -67,7 +67,7 @@ function isMissingData(state: FragmentState): boolean {
 
 function getMissingClientEdges(
   state: FragmentState,
-): $ReadOnlyArray<MissingClientEdgeRequestInfo> | null {
+): ReadonlyArray<MissingClientEdgeRequestInfo> | null {
   if (state.kind === 'bailout') {
     return null;
   } else if (state.kind === 'singular') {
@@ -88,7 +88,7 @@ function getMissingClientEdges(
 
 function getSuspendingLiveResolver(
   state: FragmentState,
-): $ReadOnlyArray<DataID> | null {
+): ReadonlyArray<DataID> | null {
   if (state.kind === 'bailout') {
     return null;
   } else if (state.kind === 'singular') {
@@ -110,7 +110,7 @@ function getSuspendingLiveResolver(
 function handlePotentialSnapshotErrorsForState(
   environment: IEnvironment,
   state: FragmentState,
-  loggingContext: mixed | void,
+  loggingContext: unknown | void,
 ): void {
   if (state.kind === 'singular') {
     handlePotentialSnapshotErrors(
@@ -155,19 +155,19 @@ function handleMissedUpdates(
     );
     const updatedCurrentSnapshot: Snapshot = {
       data: updatedData,
+      fieldErrors: currentSnapshot.fieldErrors,
       isMissingData: currentSnapshot.isMissingData,
       missingClientEdges: currentSnapshot.missingClientEdges,
       missingLiveResolverFields: currentSnapshot.missingLiveResolverFields,
       seenRecords: currentSnapshot.seenRecords,
       selector: currentSnapshot.selector,
-      fieldErrors: currentSnapshot.fieldErrors,
     };
     return [
       updatedData !== state.snapshot.data,
       {
+        epoch: currentEpoch,
         kind: 'singular',
         snapshot: updatedCurrentSnapshot,
-        epoch: currentEpoch,
       },
     ];
   } else {
@@ -179,12 +179,12 @@ function handleMissedUpdates(
       const updatedData = recycleNodesInto(snapshot.data, currentSnapshot.data);
       const updatedCurrentSnapshot: Snapshot = {
         data: updatedData,
+        fieldErrors: currentSnapshot.fieldErrors,
         isMissingData: currentSnapshot.isMissingData,
         missingClientEdges: currentSnapshot.missingClientEdges,
         missingLiveResolverFields: currentSnapshot.missingLiveResolverFields,
         seenRecords: currentSnapshot.seenRecords,
         selector: currentSnapshot.selector,
-        fieldErrors: currentSnapshot.fieldErrors,
       };
       if (updatedData !== snapshot.data) {
         didMissUpdates = true;
@@ -198,9 +198,9 @@ function handleMissedUpdates(
     return [
       didMissUpdates,
       {
+        epoch: currentEpoch,
         kind: 'plural',
         snapshots: currentSnapshots,
-        epoch: currentEpoch,
       },
     ];
   }
@@ -209,10 +209,10 @@ function handleMissedUpdates(
 function handleMissingClientEdge(
   environment: IEnvironment,
   parentFragmentNode: ReaderFragment,
-  parentFragmentRef: mixed,
+  parentFragmentRef: unknown,
   missingClientEdgeRequestInfo: MissingClientEdgeRequestInfo,
   queryOptions?: FragmentQueryOptions,
-): [QueryResult, ?Promise<mixed>] {
+): [QueryResult, ?Promise<unknown>] {
   const originalVariables = getVariablesFromFragment(
     parentFragmentNode,
     parentFragmentRef,
@@ -265,8 +265,8 @@ function subscribeToSnapshot(
           if (updates != null) {
             const [dataChanged, nextState] = updates;
             environment.__log({
-              name: 'useFragment.subscription.missedUpdates',
               hasDataChanges: dataChanged,
+              name: 'useFragment.subscription.missedUpdates',
             });
             hasPendingStateChanges.current = dataChanged;
             return dataChanged ? nextState : prevState;
@@ -277,9 +277,9 @@ function subscribeToSnapshot(
 
         hasPendingStateChanges.current = true;
         return {
+          epoch: environment.getStore().getEpoch(),
           kind: 'singular',
           snapshot: latestSnapshot,
-          epoch: environment.getStore().getEpoch(),
         };
       });
     });
@@ -301,8 +301,8 @@ function subscribeToSnapshot(
             if (updates != null) {
               const [dataChanged, nextState] = updates;
               environment.__log({
-                name: 'useFragment.subscription.missedUpdates',
                 hasDataChanges: dataChanged,
+                name: 'useFragment.subscription.missedUpdates',
               });
               hasPendingStateChanges.current =
                 hasPendingStateChanges.current || dataChanged;
@@ -315,9 +315,9 @@ function subscribeToSnapshot(
           updated[index] = latestSnapshot;
           hasPendingStateChanges.current = true;
           return {
+            epoch: environment.getStore().getEpoch(),
             kind: 'plural',
             snapshots: updated,
-            epoch: environment.getStore().getEpoch(),
           };
         });
       }),
@@ -340,15 +340,15 @@ function getFragmentState(
     // Note that if fragmentRef is an empty array, fragmentSelector will be null so we'll hit the above case.
     // Null is returned by getSelector if fragmentRef has no non-null items.
     return {
+      epoch: environment.getStore().getEpoch(),
       kind: 'plural',
       snapshots: fragmentSelector.selectors.map(s => environment.lookup(s)),
-      epoch: environment.getStore().getEpoch(),
     };
   } else {
     return {
+      epoch: environment.getStore().getEpoch(),
       kind: 'singular',
       snapshot: environment.lookup(fragmentSelector),
-      epoch: environment.getStore().getEpoch(),
     };
   }
 }
@@ -356,7 +356,7 @@ function getFragmentState(
 // fragmentNode cannot change during the lifetime of the component, though fragmentRef may change.
 hook useFragmentInternal(
   fragmentNode: ReaderFragment,
-  fragmentRef: mixed,
+  fragmentRef: unknown,
   hookDisplayName: string,
   queryOptions?: FragmentQueryOptions,
 ): ?SelectorData | Array<?SelectorData> {
@@ -478,7 +478,7 @@ hook useFragmentInternal(
       let clientEdgeQueries;
       const activeRequestPromises = [];
       if (missingClientEdges?.length) {
-        clientEdgeQueries = ([]: Array<QueryResult>);
+        clientEdgeQueries = [] as Array<QueryResult>;
         for (const edge of missingClientEdges) {
           const [queryResult, requestPromise] = handleMissingClientEdge(
             environment,
@@ -497,6 +497,18 @@ hook useFragmentInternal(
     }, [state, environment, fragmentNode, fragmentRef, queryOptions]);
 
     if (activeRequestPromises.length) {
+      invariant(fragmentSelector != null, 'refinement, see invariants above');
+      const fragmentOwner =
+        fragmentSelector.kind === 'PluralReaderSelector'
+          ? fragmentSelector.selectors[0].owner
+          : fragmentSelector.owner;
+      environment.__log({
+        name: 'suspense.client_edge',
+        fragment: fragmentNode,
+        fragmentOwner,
+        // $FlowFixMe[react-rule-unsafe-ref]
+        isMount: committedFragmentSelectorRef.current === false,
+      });
       throw Promise.all(activeRequestPromises);
     }
 
@@ -524,6 +536,19 @@ hook useFragmentInternal(
     // Suspend if a Live Resolver within this fragment is in a suspended state:
     const suspendingLiveResolvers = getSuspendingLiveResolver(state);
     if (suspendingLiveResolvers != null && suspendingLiveResolvers.length > 0) {
+      invariant(fragmentSelector != null, 'refinement, see invariants above');
+      const fragmentOwner =
+        fragmentSelector.kind === 'PluralReaderSelector'
+          ? fragmentSelector.selectors[0].owner
+          : fragmentSelector.owner;
+      environment.__log({
+        name: 'suspense.resolver',
+        fragment: fragmentNode,
+        fragmentOwner,
+        // $FlowFixMe[react-rule-unsafe-ref]
+        isMount: committedFragmentSelectorRef.current === false,
+        suspendingLiveResolvers,
+      });
       throw Promise.all(
         suspendingLiveResolvers.map(liveStateID => {
           // $FlowFixMe[prop-missing] This is expected to be a RelayModernStore
@@ -538,8 +563,7 @@ hook useFragmentInternal(
     if (
       RelayFeatureFlags.ENABLE_RELAY_OPERATION_TRACKER_SUSPENSE ||
       environment !== previousEnvironment ||
-      // $FlowFixMe[sketchy-null-bool]
-      !committedFragmentSelectorRef.current ||
+      committedFragmentSelectorRef.current === false ||
       // $FlowFixMe[react-rule-unsafe-ref]
       !areEqualSelectors(committedFragmentSelectorRef.current, fragmentSelector)
     ) {
@@ -554,6 +578,14 @@ hook useFragmentInternal(
         fragmentOwner,
       );
       if (pendingOperationsResult) {
+        environment.__log({
+          name: 'suspense.missing_data',
+          fragment: fragmentNode,
+          fragmentOwner,
+          // $FlowFixMe[react-rule-unsafe-ref]
+          isMount: committedFragmentSelectorRef.current === false,
+          pendingOperations: pendingOperationsResult.pendingOperations,
+        });
         throw pendingOperationsResult.promise;
       }
     }
@@ -667,7 +699,7 @@ hook useFragmentInternal(
     // eslint-disable-next-line react-hooks/rules-of-hooks
     // $FlowFixMe[react-rule-hook]
     // $FlowFixMe[react-rule-hook-conditional]
-    useDebugValue({fragment: fragmentNode.name, data});
+    useDebugValue({data, fragment: fragmentNode.name});
   }
 
   return data;

package/relay-hooks/useFragmentInternal_EXPERIMENTAL.js.flow

@@ -47,7 +47,7 @@ export type FragmentQueryOptions = {
   networkCacheConfig?: ?CacheConfig,
 };
 
-type FragmentState = $ReadOnly<
+type FragmentState = Readonly<
   | {kind: 'bailout', environment: IEnvironment}
   | {
       kind: 'singular',
@@ -58,7 +58,7 @@ type FragmentState = $ReadOnly<
     }
   | {
       kind: 'plural',
-      snapshots: $ReadOnlyArray<Snapshot>,
+      snapshots: ReadonlyArray<Snapshot>,
       epoch: number,
       selector: ReaderSelector,
       environment: IEnvironment,
@@ -79,7 +79,7 @@ function isMissingData(state: FragmentState): boolean {
 
 function getMissingClientEdges(
   state: FragmentState,
-): $ReadOnlyArray<MissingClientEdgeRequestInfo> | null {
+): ReadonlyArray<MissingClientEdgeRequestInfo> | null {
   if (state.kind === 'bailout') {
     return null;
   } else if (state.kind === 'singular') {
@@ -100,7 +100,7 @@ function getMissingClientEdges(
 
 function getSuspendingLiveResolver(
   state: FragmentState,
-): $ReadOnlyArray<DataID> | null {
+): ReadonlyArray<DataID> | null {
   if (state.kind === 'bailout') {
     return null;
   } else if (state.kind === 'singular') {
@@ -122,7 +122,7 @@ function getSuspendingLiveResolver(
 function handlePotentialSnapshotErrorsForState(
   environment: IEnvironment,
   state: FragmentState,
-  loggingContext: mixed | void,
+  loggingContext: unknown | void,
 ): void {
   if (state.kind === 'singular') {
     handlePotentialSnapshotErrors(
@@ -167,21 +167,21 @@ function handleMissedUpdates(
     );
     const updatedCurrentSnapshot: Snapshot = {
       data: updatedData,
+      fieldErrors: currentSnapshot.fieldErrors,
       isMissingData: currentSnapshot.isMissingData,
       missingClientEdges: currentSnapshot.missingClientEdges,
       missingLiveResolverFields: currentSnapshot.missingLiveResolverFields,
       seenRecords: currentSnapshot.seenRecords,
       selector: currentSnapshot.selector,
-      fieldErrors: currentSnapshot.fieldErrors,
     };
     return [
       updatedData !== state.snapshot.data,
       {
-        kind: 'singular',
-        snapshot: updatedCurrentSnapshot,
+        environment: state.environment,
         epoch: currentEpoch,
+        kind: 'singular',
         selector: state.selector,
-        environment: state.environment,
+        snapshot: updatedCurrentSnapshot,
       },
     ];
   } else {
@@ -193,12 +193,12 @@ function handleMissedUpdates(
       const updatedData = recycleNodesInto(snapshot.data, currentSnapshot.data);
       const updatedCurrentSnapshot: Snapshot = {
         data: updatedData,
+        fieldErrors: currentSnapshot.fieldErrors,
         isMissingData: currentSnapshot.isMissingData,
         missingClientEdges: currentSnapshot.missingClientEdges,
         missingLiveResolverFields: currentSnapshot.missingLiveResolverFields,
         seenRecords: currentSnapshot.seenRecords,
         selector: currentSnapshot.selector,
-        fieldErrors: currentSnapshot.fieldErrors,
       };
       if (updatedData !== snapshot.data) {
         didMissUpdates = true;
@@ -212,22 +212,22 @@ function handleMissedUpdates(
     return [
       didMissUpdates,
       {
-        kind: 'plural',
-        snapshots: currentSnapshots,
+        environment: state.environment,
         epoch: currentEpoch,
+        kind: 'plural',
         selector: state.selector,
-        environment: state.environment,
+        snapshots: currentSnapshots,
       },
     ];
   }
 }
 
-type PromiseWithDisplayName = Promise<mixed> & {displayName?: string};
+type PromiseWithDisplayName = Promise<unknown> & {displayName?: string};
 
 function handleMissingClientEdge(
   environment: IEnvironment,
   parentFragmentNode: ReaderFragment,
-  parentFragmentRef: mixed,
+  parentFragmentRef: unknown,
   missingClientEdgeRequestInfo: MissingClientEdgeRequestInfo,
   queryOptions?: FragmentQueryOptions,
 ): [QueryResult, ?PromiseWithDisplayName] {
@@ -291,8 +291,8 @@ function subscribeToSnapshot(
           if (updates != null) {
             const [dataChanged, updatedState] = updates;
             environment.__log({
-              name: 'useFragment.subscription.missedUpdates',
               hasDataChanges: dataChanged,
+              name: 'useFragment.subscription.missedUpdates',
             });
             nextState = dataChanged ? updatedState : prevState;
           } else {
@@ -300,11 +300,11 @@ function subscribeToSnapshot(
           }
         } else {
           nextState = {
-            kind: 'singular',
-            snapshot: latestSnapshot,
+            environment: state.environment,
             epoch: environment.getStore().getEpoch(),
+            kind: 'singular',
             selector: state.selector,
-            environment: state.environment,
+            snapshot: latestSnapshot,
           };
         }
         return nextState;
@@ -333,8 +333,8 @@ function subscribeToSnapshot(
             if (updates != null) {
               const [dataChanged, updatedState] = updates;
               environment.__log({
-                name: 'useFragment.subscription.missedUpdates',
                 hasDataChanges: dataChanged,
+                name: 'useFragment.subscription.missedUpdates',
               });
               nextState = dataChanged ? updatedState : prevState;
             } else {
@@ -344,11 +344,11 @@ function subscribeToSnapshot(
             const updated = [...prevState.snapshots];
             updated[index] = latestSnapshot;
             nextState = {
-              kind: 'plural',
-              snapshots: updated,
+              environment: state.environment,
               epoch: environment.getStore().getEpoch(),
+              kind: 'plural',
               selector: state.selector,
-              environment: state.environment,
+              snapshots: updated,
             };
           }
           return nextState;
@@ -368,24 +368,24 @@ function getFragmentState(
   fragmentSelector: ?ReaderSelector,
 ): FragmentState {
   if (fragmentSelector == null) {
-    return {kind: 'bailout', environment};
+    return {environment, kind: 'bailout'};
   } else if (fragmentSelector.kind === 'PluralReaderSelector') {
     // Note that if fragmentRef is an empty array, fragmentSelector will be null so we'll hit the above case.
     // Null is returned by getSelector if fragmentRef has no non-null items.
     return {
-      kind: 'plural',
-      snapshots: fragmentSelector.selectors.map(s => environment.lookup(s)),
+      environment,
       epoch: environment.getStore().getEpoch(),
+      kind: 'plural',
       selector: fragmentSelector,
-      environment: environment,
+      snapshots: fragmentSelector.selectors.map(s => environment.lookup(s)),
     };
   } else {
     return {
-      kind: 'singular',
-      snapshot: environment.lookup(fragmentSelector),
+      environment,
       epoch: environment.getStore().getEpoch(),
+      kind: 'singular',
       selector: fragmentSelector,
-      environment: environment,
+      snapshot: environment.lookup(fragmentSelector),
     };
   }
 }
@@ -393,7 +393,7 @@ function getFragmentState(
 // fragmentNode cannot change during the lifetime of the component, though fragmentRef may change.
 hook useFragmentInternal_EXPERIMENTAL(
   fragmentNode: ReaderFragment,
-  fragmentRef: mixed,
+  fragmentRef: unknown,
   hookDisplayName: string,
   queryOptions?: FragmentQueryOptions,
 ): ?SelectorData | Array<?SelectorData> {
@@ -501,7 +501,7 @@ hook useFragmentInternal_EXPERIMENTAL(
       let clientEdgeQueries;
       const activeRequestPromises: Array<PromiseWithDisplayName> = [];
       if (missingClientEdges?.length) {
-        clientEdgeQueries = ([]: Array<QueryResult>);
+        clientEdgeQueries = [] as Array<QueryResult>;
         for (const edge of missingClientEdges) {
           const [queryResult, requestPromise] = handleMissingClientEdge(
             environment,
@@ -520,6 +520,18 @@ hook useFragmentInternal_EXPERIMENTAL(
     }, [state, environment, fragmentNode, fragmentRef, queryOptions]);
 
     if (activeRequestPromises.length) {
+      invariant(fragmentSelector != null, 'refinement, see invariants above');
+      const fragmentOwner =
+        fragmentSelector.kind === 'PluralReaderSelector'
+          ? fragmentSelector.selectors[0].owner
+          : fragmentSelector.owner;
+      environment.__log({
+        name: 'suspense.client_edge',
+        fragment: fragmentNode,
+        fragmentOwner,
+        // $FlowFixMe[react-rule-unsafe-ref]
+        isMount: committedFragmentSelectorRef.current === false,
+      });
       const allPromises = Promise.all(activeRequestPromises);
       // $FlowExpectedError[prop-missing] Expando to annotate Promises.
       allPromises.displayName = `RelayClientEdge(${activeRequestPromises
@@ -552,6 +564,19 @@ hook useFragmentInternal_EXPERIMENTAL(
     // Suspend if a Live Resolver within this fragment is in a suspended state:
     const suspendingLiveResolvers = getSuspendingLiveResolver(state);
     if (suspendingLiveResolvers != null && suspendingLiveResolvers.length > 0) {
+      invariant(fragmentSelector != null, 'refinement, see invariants above');
+      const fragmentOwner =
+        fragmentSelector.kind === 'PluralReaderSelector'
+          ? fragmentSelector.selectors[0].owner
+          : fragmentSelector.owner;
+      environment.__log({
+        name: 'suspense.resolver',
+        fragment: fragmentNode,
+        fragmentOwner,
+        // $FlowFixMe[react-rule-unsafe-ref]
+        isMount: committedFragmentSelectorRef.current === false,
+        suspendingLiveResolvers,
+      });
       const promise = Promise.all(
         suspendingLiveResolvers.map(liveStateID => {
           // $FlowFixMe[prop-missing] This is expected to be a RelayModernStore
@@ -569,8 +594,7 @@ hook useFragmentInternal_EXPERIMENTAL(
     if (
       RelayFeatureFlags.ENABLE_RELAY_OPERATION_TRACKER_SUSPENSE ||
       environment !== previousEnvironment ||
-      // $FlowFixMe[sketchy-null-bool]
-      !committedFragmentSelectorRef.current ||
+      committedFragmentSelectorRef.current === false ||
       // $FlowFixMe[react-rule-unsafe-ref]
       !areEqualSelectors(committedFragmentSelectorRef.current, fragmentSelector)
     ) {
@@ -585,6 +609,14 @@ hook useFragmentInternal_EXPERIMENTAL(
         fragmentOwner,
       );
       if (pendingOperationsResult) {
+        environment.__log({
+          name: 'suspense.missing_data',
+          fragment: fragmentNode,
+          fragmentOwner,
+          // $FlowFixMe[react-rule-unsafe-ref]
+          isMount: committedFragmentSelectorRef.current === false,
+          pendingOperations: pendingOperationsResult.pendingOperations,
+        });
         throw pendingOperationsResult.promise;
       }
     }
@@ -608,15 +640,20 @@ hook useFragmentInternal_EXPERIMENTAL(
   //   or detaches (<Activity> going hidden), and then re-subscribes when the component
   //   re-attaches (<Activity> going visible). These cases wouldn't fire the
   //   "update" effect because the state and environment don't change.
-  const storeSubscriptionRef = useRef<{
-    dispose: () => void,
-    selector: ?ReaderSelector,
-    environment: IEnvironment,
-  } | null>(null);
+  const storeSubscriptionRef = useRef<
+    | {
+        kind: 'initialized',
+        dispose: () => void,
+        selector: ?ReaderSelector,
+        environment: IEnvironment,
+      }
+    | {kind: 'missed-updates'}
+    | {kind: 'uninitialized'},
+  >({kind: 'uninitialized'});
   // $FlowFixMe[react-rule-hook] - the condition is static
   useEffect(() => {
     const storeSubscription = storeSubscriptionRef.current;
-    if (storeSubscription != null) {
+    if (storeSubscription.kind === 'initialized') {
       if (
         state.environment === storeSubscription.environment &&
         state.selector === storeSubscription.selector
@@ -626,6 +663,7 @@ hook useFragmentInternal_EXPERIMENTAL(
       } else {
         // The selector has changed, so we need to dispose of the previous subscription
         storeSubscription.dispose();
+        storeSubscriptionRef.current = {kind: 'uninitialized'};
       }
     }
     if (state.kind === 'bailout') {
@@ -650,7 +688,11 @@ hook useFragmentInternal_EXPERIMENTAL(
       // to using the latest snapshot to subscribe.
       if (didMissUpdates) {
         setState(updatedState);
+        storeSubscriptionRef.current = {kind: 'missed-updates'};
         // We missed updates, we're going to render again anyway so wait until then to subscribe
+        // Setting the ref to kind: missed-updates ensures the second useEffect (simulating the
+        // setup/teardown part of the crud effect) will not set up the subscription w the stale
+        // state
         return;
       }
       stateForSubscription = updatedState;
@@ -662,23 +704,30 @@ hook useFragmentInternal_EXPERIMENTAL(
     );
     storeSubscriptionRef.current = {
       dispose,
-      selector: state.selector,
       environment: state.environment,
+      kind: 'initialized',
+      selector: state.selector,
     };
   }, [state]);
   // $FlowFixMe[react-rule-hook] - the condition is static
   useEffect(() => {
-    if (storeSubscriptionRef.current == null && state.kind !== 'bailout') {
+    if (
+      storeSubscriptionRef.current.kind === 'uninitialized' &&
+      state.kind !== 'bailout'
+    ) {
       const dispose = subscribeToSnapshot(state.environment, state, setState);
       storeSubscriptionRef.current = {
         dispose,
-        selector: state.selector,
         environment: state.environment,
+        kind: 'initialized',
+        selector: state.selector,
       };
     }
     return () => {
-      storeSubscriptionRef.current?.dispose();
-      storeSubscriptionRef.current = null;
+      if (storeSubscriptionRef.current.kind === 'initialized') {
+        storeSubscriptionRef.current.dispose();
+      }
+      storeSubscriptionRef.current = {kind: 'uninitialized'};
     };
     // NOTE: this intentionally has no dependencies, see above comment about
     // simulating a CRUD effect
@@ -747,7 +796,7 @@ hook useFragmentInternal_EXPERIMENTAL(
     // eslint-disable-next-line react-hooks/rules-of-hooks
     // $FlowFixMe[react-rule-hook]
     // $FlowFixMe[react-rule-hook-conditional]
-    useDebugValue({fragment: fragmentNode.name, data});
+    useDebugValue({data, fragment: fragmentNode.name});
   }
 
   return data;

package/relay-hooks/useIsOperationNodeActive.js.flow

@@ -25,7 +25,7 @@ const {useEffect, useState, useMemo} = React;
 
 hook useIsOperationNodeActive(
   fragmentNode: ReaderFragment,
-  fragmentRef: mixed,
+  fragmentRef: unknown,
 ): boolean {
   const environment = useRelayEnvironment();
   const observable = useMemo(() => {

package/relay-hooks/useIsParentQueryActive.js.flow

@@ -18,7 +18,7 @@ const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
 const {getFragment} = require('relay-runtime');
 
 hook useIsParentQueryActive<
-  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
+  TKey extends ?{+$data?: unknown, +$fragmentSpreads: FragmentType, ...},
 >(
   fragmentInput: GraphQLTaggedNode,
   fragmentRef: TKey,

package/relay-hooks/useLazyLoadQuery.js.flow

@@ -11,6 +11,7 @@
 
 'use strict';
 
+import type {LazyLoadQueryNodeParamsWithQuery} from './useLazyLoadQueryNode';
 import type {
   CacheConfig,
   FetchPolicy,
@@ -29,7 +30,10 @@ const {
 // This separate type export is only needed as long as we are injecting
 // a separate hooks implementation in ./HooksImplementation -- it can
 // be removed after we stop doing that.
-export type UseLazyLoadQueryHookType = hook <TVariables: Variables, TData>(
+export type UseLazyLoadQueryHookType = hook <
+  TVariables extends Variables,
+  TData,
+>(
   gqlQuery: Query<TVariables, TData>,
   variables: TVariables,
   options?: Options,
@@ -85,7 +89,7 @@ type Options = {
  * @returns - `data`: Object that contains data which has been read out from the Relay store; the object matches the shape of specified query.
  *   - The Flow type for data will also match this shape, and contain types derived from the GraphQL Schema. For example, the type of `data` above is: `{| user: ?{| name: ?string |} |}`.
  */
-hook useLazyLoadQuery<TVariables: Variables, TData>(
+hook useLazyLoadQuery<TVariables extends Variables, TData>(
   /**
    * GraphQL query specified using a `graphql` template literal.
    */
@@ -108,7 +112,10 @@ hook useLazyLoadQuery<TVariables: Variables, TData>(
       ? options.networkCacheConfig
       : {force: true},
   );
-  const data = useLazyLoadQueryNode<$FlowFixMe>({
+  const data = useLazyLoadQueryNode<
+    $FlowFixMe,
+    LazyLoadQueryNodeParamsWithQuery,
+  >({
     componentDisplayName: 'useLazyLoadQuery()',
     fetchKey: options?.fetchKey,
     fetchObservable: fetchQuery(environment, query),