react-relay 20.1.0 → 21.0.0

package/relay-hooks/usePrefetchableForwardPaginationFragment_EXPERIMENTAL.js.flow

@@ -43,7 +43,7 @@ const {
   getValueAtPath,
 } = require('relay-runtime');
 
-type LoadMoreFn<TVariables: Variables> = (
+type LoadMoreFn<TVariables extends Variables> = (
   count: number,
   options?: {
     onComplete?: (Error | null) => void,
@@ -55,7 +55,7 @@ export type ReturnType<TVariables, TData, TEdgeData, TKey> = {
   // NOTE: This type ensures that the type of the returned data is either:
   //   - nullable if the provided ref type is nullable
   //   - non-nullable if the provided ref type is non-nullable
-  data: [+key: TKey] extends [+key: {+$fragmentSpreads: mixed, ...}]
+  data: [+key: TKey] extends [+key: {+$fragmentSpreads: unknown, ...}]
     ? TData
     : ?TData,
   loadNext: LoadMoreFn<TVariables>,
@@ -72,18 +72,18 @@ type LoadMoreOptions<TVariables> = {
 
 export type GetExtraVariablesFn<TEdgeData, TData, TVariables, TKey> = ({
   hasNext: boolean,
-  data: [+key: TKey] extends [+key: {+$fragmentSpreads: mixed, ...}]
+  data: [+key: TKey] extends [+key: {+$fragmentSpreads: unknown, ...}]
     ? TData
     : ?TData,
   getServerEdges: () => TEdgeData,
 }) => Partial<TVariables>;
 
 hook usePrefetchableForwardPaginationFragment_EXPERIMENTAL<
-  TFragmentType: FragmentType,
-  TVariables: Variables,
+  TFragmentType extends FragmentType,
+  TVariables extends Variables,
   TData,
   TEdgeData,
-  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
+  TKey extends ?{+$fragmentSpreads: TFragmentType, ...},
 >(
   fragmentInput: PrefetchableRefetchableFragment<
     TFragmentType,
@@ -257,26 +257,26 @@ hook usePrefetchableForwardPaginationFragment_EXPERIMENTAL<
               onComplete: prefetchingOnComplete,
               UNSTABLE_extraVariables:
                 typeof prefetchingUNSTABLE_extraVariables === 'function'
-                  ? // $FlowFixMe[incompatible-call]
+                  ? // $FlowFixMe[incompatible-type]
                     prefetchingUNSTABLE_extraVariables({
                       hasNext,
-                      // $FlowFixMe[incompatible-call]
+                      // $FlowFixMe[incompatible-type]
                       data: fragmentData,
                       getServerEdges: () => {
                         const selector = getSelector(
-                          // $FlowFixMe[incompatible-call]
+                          // $FlowFixMe[incompatible-type]
                           edgesFragment,
                           edgeKeys,
                         );
                         if (selector == null) {
-                          // $FlowFixMe[incompatible-call]
+                          // $FlowFixMe[incompatible-type]
                           return [];
                         }
                         invariant(
                           selector.kind === 'PluralReaderSelector',
                           'Expected a plural selector',
                         );
-                        // $FlowFixMe[incompatible-call]
+                        // $FlowFixMe[incompatible-type]
                         return selector.selectors.map(
                           sel => environment.lookup(sel).data,
                         );
@@ -331,22 +331,22 @@ hook usePrefetchableForwardPaginationFragment_EXPERIMENTAL<
           onComplete,
           UNSTABLE_extraVariables:
             typeof prefetchingUNSTABLE_extraVariables === 'function'
-              ? // $FlowFixMe[incompatible-call]
+              ? // $FlowFixMe[incompatible-type]
                 prefetchingUNSTABLE_extraVariables({
                   hasNext,
-                  // $FlowFixMe[incompatible-call]
+                  // $FlowFixMe[incompatible-type]
                   data: fragmentData,
                   getServerEdges: () => {
                     const selector = getSelector(edgesFragment, edgeKeys);
                     if (selector == null) {
-                      // $FlowFixMe[incompatible-call]
+                      // $FlowFixMe[incompatible-type]
                       return [];
                     }
                     invariant(
                       selector.kind === 'PluralReaderSelector',
                       'Expected a plural selector',
                     );
-                    // $FlowFixMe[incompatible-call]
+                    // $FlowFixMe[incompatible-type]
                     return selector.selectors.map(
                       sel => environment.lookup(sel).data,
                     );
@@ -374,12 +374,12 @@ hook usePrefetchableForwardPaginationFragment_EXPERIMENTAL<
 
   const realNumInUse = Math.min(numInUse, sourceSize);
 
-  const derivedEdgeKeys: $ReadOnlyArray<mixed> = useMemo(
+  const derivedEdgeKeys: ReadonlyArray<unknown> = useMemo(
     () => edgeKeys?.slice(0, realNumInUse) ?? [],
     [edgeKeys, realNumInUse],
   );
 
-  // $FlowExpectedError[incompatible-call] - we know derivedEdgeKeys are the correct keys
+  // $FlowExpectedError[incompatible-type] - we know derivedEdgeKeys are the correct keys
   const edges: TEdgeData = useFragment(edgesFragment, derivedEdgeKeys);
 
   const refetchPagination = useCallback(
@@ -421,13 +421,14 @@ hook usePrefetchableForwardPaginationFragment_EXPERIMENTAL<
 
   return {
     edges,
-    // $FlowFixMe[incompatible-return]
+    // $FlowFixMe[incompatible-type]
     data: fragmentData,
     loadNext: showMore,
     hasNext: hasNext || sourceSize > numInUse,
     // Only reflect `isLoadingMore` if the product depends on it, do not refelect
     // `isLoaindgMore` state if it is for fufilling the buffer
     isLoadingNext: isLoadingMore && numInUse > sourceSize,
+    // $FlowFixMe[incompatible-type]
     refetch: refetchPagination,
   };
 }

package/relay-hooks/usePreloadedQuery.js.flow

@@ -29,7 +29,7 @@ const {
 const warning = require('warning');
 
 type PreloadedQuery<
-  TVariables: Variables,
+  TVariables extends Variables,
   TData,
   TRawResponse,
   TEnvironmentProviderOptions = EnvironmentProviderOptions,
@@ -51,114 +51,147 @@ type PreloadedQuery<
       TEnvironmentProviderOptions,
     >;
 
-hook usePreloadedQuery<
-  TVariables: Variables,
+declare hook usePreloadedQuery<
+  TVariables extends Variables,
+  TData,
+  TRawResponse extends ?{...} = void,
+>(
+  gqlQuery:
+    | Query<TVariables, TData, TRawResponse>
+    | ClientQuery<TVariables, TData, TRawResponse>,
+  preloadedQuery: PreloadedQuery<TVariables, TData, NonNullable<TRawResponse>>,
+  options?: {
+    UNSTABLE_renderPolicy?: RenderPolicy,
+  },
+): TData;
+
+declare hook usePreloadedQuery<
+  TVariables extends Variables,
   TData,
-  TRawResponse: ?{...} = void,
+  TRawResponse extends ?{...} = void,
 >(
   gqlQuery:
     | Query<TVariables, TData, TRawResponse>
     | ClientQuery<TVariables, TData, TRawResponse>,
-  preloadedQuery: PreloadedQuery<
+  preloadedQuery: ?PreloadedQuery<TVariables, TData, NonNullable<TRawResponse>>,
+  options?: {
+    UNSTABLE_renderPolicy?: RenderPolicy,
+  },
+): ?TData;
+
+hook usePreloadedQuery<
+  TVariables extends Variables,
+  TData,
+  TRawResponse extends ?{...} = void,
+  TPreloadedQuery extends ?PreloadedQuery<
     TVariables,
     TData,
-    $NonMaybeType<TRawResponse>,
-  >,
+    NonNullable<TRawResponse>,
+  > = PreloadedQuery<TVariables, TData, NonNullable<TRawResponse>>,
+>(
+  gqlQuery:
+    | Query<TVariables, TData, TRawResponse>
+    | ClientQuery<TVariables, TData, TRawResponse>,
+  preloadedQuery: TPreloadedQuery,
   options?: {
     UNSTABLE_renderPolicy?: RenderPolicy,
   },
-): TData {
+): ?TData {
   const environment = useRelayEnvironment();
-  const {fetchKey, fetchPolicy, source, variables, networkCacheConfig} =
-    preloadedQuery;
   const operation = useMemoOperationDescriptor(
     gqlQuery,
-    variables,
-    networkCacheConfig,
+    preloadedQuery != null ? preloadedQuery.variables : {},
+    preloadedQuery != null ? preloadedQuery.networkCacheConfig : undefined,
   );
 
   let useLazyLoadQueryNodeParams;
-  if (preloadedQuery.kind === 'PreloadedQuery_DEPRECATED') {
-    invariant(
-      operation.request.node.params.name === preloadedQuery.name,
-      'usePreloadedQuery(): Expected data to be prefetched for query `%s`, ' +
-        'got prefetch results for query `%s`.',
-      operation.request.node.params.name,
-      preloadedQuery.name,
-    );
-
-    useLazyLoadQueryNodeParams = {
-      componentDisplayName: 'usePreloadedQuery()',
-      fetchKey,
-      fetchObservable: fetchQueryDeduped(
-        environment,
-        operation.request.identifier,
-        () => {
-          if (environment === preloadedQuery.environment && source != null) {
-            return environment.executeWithSource({operation, source});
-          } else {
-            return environment.execute({operation});
-          }
-        },
-      ),
-      fetchPolicy,
-      query: operation,
-      renderPolicy: options?.UNSTABLE_renderPolicy,
-    };
-  } else {
-    warning(
-      preloadedQuery.isDisposed === false,
-      'usePreloadedQuery(): Expected preloadedQuery to not be disposed yet. ' +
-        'This is because disposing the query marks it for future garbage ' +
-        'collection, and as such query results may no longer be present in the Relay ' +
-        'store. In the future, this will become a hard error.',
-    );
+  if (preloadedQuery != null) {
+    const {fetchKey, fetchPolicy, source} = preloadedQuery;
+    if (preloadedQuery.kind === 'PreloadedQuery_DEPRECATED') {
+      invariant(
+        operation.request.node.params.name === preloadedQuery.name,
+        'usePreloadedQuery(): Expected data to be prefetched for query `%s`, ' +
+          'got prefetch results for query `%s`.',
+        operation.request.node.params.name,
+        preloadedQuery.name,
+      );
 
-    const fallbackFetchObservable = fetchQuery(environment, operation);
-    let fetchObservable;
-    if (source != null && environment === preloadedQuery.environment) {
-      // If the source observable exists and the environments match, reuse
-      // the source observable.
-      // If the source observable happens to be empty, we need to fall back
-      // and re-execute and de-dupe the query (at render time).
-      fetchObservable = source.ifEmpty(fallbackFetchObservable);
-    } else if (environment !== preloadedQuery.environment) {
-      // If a call to loadQuery is made with a particular environment, and that
-      // preloaded query is passed to usePreloadedQuery in a different environment
-      // context, we cannot re-use the existing preloaded query.
-      // Instead, we need to fall back and re-execute and de-dupe the query with
-      // the new environment (at render time).
-      // TODO T68036756 track occurrences of this warning and turn it into a hard error
+      useLazyLoadQueryNodeParams = {
+        componentDisplayName: 'usePreloadedQuery()',
+        fetchKey,
+        fetchObservable: fetchQueryDeduped(
+          environment,
+          operation.request.identifier,
+          () => {
+            if (environment === preloadedQuery.environment && source != null) {
+              return environment.executeWithSource({operation, source});
+            } else {
+              return environment.execute({operation});
+            }
+          },
+        ),
+        fetchPolicy,
+        query: operation,
+        renderPolicy: options?.UNSTABLE_renderPolicy,
+      };
+    } else {
       warning(
-        false,
-        'usePreloadedQuery(): usePreloadedQuery was passed a preloaded query ' +
-          'that was created with a different environment than the one that is currently ' +
-          'in context. In the future, this will become a hard error.',
+        preloadedQuery.isDisposed === false,
+        'usePreloadedQuery(): Expected preloadedQuery to not be disposed yet. ' +
+          'This is because disposing the query marks it for future garbage ' +
+          'collection, and as such query results may no longer be present in the Relay ' +
+          'store. In the future, this will become a hard error.',
       );
-      fetchObservable = fallbackFetchObservable;
-    } else {
-      // if (source == null)
-      // If the source observable does not exist, we need to
-      // fall back and re-execute and de-dupe the query (at render time).
-      fetchObservable = fallbackFetchObservable;
-    }
 
+      const fallbackFetchObservable = fetchQuery(environment, operation);
+      let fetchObservable;
+      if (source != null && environment === preloadedQuery.environment) {
+        // If the source observable exists and the environments match, reuse
+        // the source observable.
+        // If the source observable happens to be empty, we need to fall back
+        // and re-execute and de-dupe the query (at render time).
+        fetchObservable = source.ifEmpty(fallbackFetchObservable);
+      } else if (environment !== preloadedQuery.environment) {
+        // If a call to loadQuery is made with a particular environment, and that
+        // preloaded query is passed to usePreloadedQuery in a different environment
+        // context, we cannot re-use the existing preloaded query.
+        // Instead, we need to fall back and re-execute and de-dupe the query with
+        // the new environment (at render time).
+        // TODO T68036756 track occurrences of this warning and turn it into a hard error
+        warning(
+          false,
+          'usePreloadedQuery(): usePreloadedQuery was passed a preloaded query ' +
+            'that was created with a different environment than the one that is currently ' +
+            'in context. In the future, this will become a hard error.',
+        );
+        fetchObservable = fallbackFetchObservable;
+      } else {
+        // if (source == null)
+        // If the source observable does not exist, we need to
+        // fall back and re-execute and de-dupe the query (at render time).
+        fetchObservable = fallbackFetchObservable;
+      }
+
+      useLazyLoadQueryNodeParams = {
+        componentDisplayName: 'usePreloadedQuery()',
+        fetchKey,
+        fetchObservable,
+        fetchPolicy,
+        query: operation,
+        renderPolicy: options?.UNSTABLE_renderPolicy,
+      };
+    }
+  } else {
     useLazyLoadQueryNodeParams = {
       componentDisplayName: 'usePreloadedQuery()',
-      fetchObservable,
-      fetchKey,
-      fetchPolicy,
-      query: operation,
-      renderPolicy: options?.UNSTABLE_renderPolicy,
+      fragmentNode: gqlQuery.fragment,
     };
   }
 
   const data = useLazyLoadQueryNode<{
     variables: TVariables,
     response: TData,
-    rawResponse?: $NonMaybeType<TRawResponse>,
-    /* $FlowFixMe[incompatible-call] Natural Inference rollout. See
-     * https://fburl.com/gdoc/y8dn025u */
+    rawResponse?: NonNullable<TRawResponse>,
   }>(useLazyLoadQueryNodeParams);
 
   if (__DEV__) {
@@ -166,14 +199,15 @@ hook usePreloadedQuery<
     // $FlowFixMe[react-rule-hook]
     // $FlowFixMe[react-rule-hook-conditional]
     useDebugValue({
-      query: preloadedQuery.name,
-      variables: preloadedQuery.variables,
       data,
-      fetchKey,
-      fetchPolicy,
+      fetchKey: preloadedQuery?.fetchKey,
+      fetchPolicy: preloadedQuery?.fetchPolicy,
+      query: preloadedQuery?.name,
       renderPolicy: options?.UNSTABLE_renderPolicy,
+      variables: preloadedQuery?.variables,
     });
   }
+
   return data;
 }
 

package/relay-hooks/useQueryLoader.js.flow

@@ -30,12 +30,12 @@ const useRelayEnvironment = require('./useRelayEnvironment');
 const {useCallback, useEffect, useRef, useState} = require('react');
 const {RelayFeatureFlags, getRequest} = require('relay-runtime');
 
-export type LoaderFn<TQuery: OperationType> = (
+export type LoaderFn<TQuery extends OperationType> = (
   variables: TQuery['variables'],
   options?: UseQueryLoaderLoadQueryOptions,
 ) => void;
 
-export type UseQueryLoaderLoadQueryOptions = $ReadOnly<{
+export type UseQueryLoaderLoadQueryOptions = Readonly<{
   ...LoadQueryOptions,
   +__environment?: ?IEnvironment,
 }>;
@@ -51,13 +51,13 @@ const initialNullQueryReferenceState: NullQueryReference = {
 };
 
 function requestIsLiveQuery<
-  TVariables: Variables,
+  TVariables extends Variables,
   TData,
-  TRawResponse: ?{...} = void,
-  TQuery: OperationType = {
+  TRawResponse extends ?{...} = void,
+  TQuery extends OperationType = {
     response: TData,
     variables: TVariables,
-    rawResponse?: $NonMaybeType<TRawResponse>,
+    rawResponse?: NonNullable<TRawResponse>,
   },
 >(
   preloadableRequest:
@@ -72,51 +72,55 @@ function requestIsLiveQuery<
 }
 
 export type UseQueryLoaderHookReturnType<
-  TVariables: Variables,
+  TVariables extends Variables,
   TData,
-  TRawResponse: ?{...} = void,
+  TRawResponse extends ?{...} = void,
 > = [
   ?PreloadedQuery<{
     response: TData,
     variables: TVariables,
-    rawResponse?: $NonMaybeType<TRawResponse>,
+    rawResponse?: NonNullable<TRawResponse>,
   }>,
   (variables: TVariables, options?: UseQueryLoaderLoadQueryOptions) => void,
   () => void,
 ];
 
 declare function useQueryLoader<
-  TVariables: Variables,
+  TVariables extends Variables,
   TData,
-  TRawResponse: ?{...} = void,
+  TRawResponse extends ?{...} = void,
 >(
   preloadableRequest: Query<TVariables, TData, TRawResponse>,
 ): UseQueryLoaderHookReturnType<TVariables, TData>;
 
 declare function useQueryLoader<
-  TVariables: Variables,
+  TVariables extends Variables,
   TData,
-  TRawResponse: ?{...} = void,
+  TRawResponse extends ?{...} = void,
 >(
   preloadableRequest: Query<TVariables, TData, TRawResponse>,
   initialQueryReference: ?PreloadedQuery<{
     response: TData,
     variables: TVariables,
-    rawResponse?: $NonMaybeType<TRawResponse>,
+    rawResponse?: NonNullable<TRawResponse>,
   }>,
 ): UseQueryLoaderHookReturnType<TVariables, TData>;
 
-declare function useQueryLoader<TQuery: OperationType>(
+declare function useQueryLoader<TQuery extends OperationType>(
   preloadableRequest: PreloadableConcreteRequest<TQuery>,
   initialQueryReference?: ?PreloadedQuery<TQuery>,
 ): UseQueryLoaderHookReturnType<TQuery['variables'], TQuery['response']>;
 
-hook useQueryLoader<TVariables: Variables, TData, TRawResponse: ?{...} = void>(
+hook useQueryLoader<
+  TVariables extends Variables,
+  TData,
+  TRawResponse extends ?{...} = void,
+>(
   preloadableRequest: Query<TVariables, TData, TRawResponse>,
   initialQueryReference?: ?PreloadedQuery<{
     response: TData,
     variables: TVariables,
-    rawResponse?: $NonMaybeType<TRawResponse>,
+    rawResponse?: NonNullable<TRawResponse>,
   }>,
 ): UseQueryLoaderHookReturnType<TVariables, TData> {
   if (RelayFeatureFlags.ENABLE_ACTIVITY_COMPATIBILITY) {
@@ -133,21 +137,21 @@ hook useQueryLoader<TVariables: Variables, TData, TRawResponse: ?{...} = void>(
 }
 
 hook useQueryLoader_CURRENT<
-  TVariables: Variables,
+  TVariables extends Variables,
   TData,
-  TRawResponse: ?{...} = void,
+  TRawResponse extends ?{...} = void,
 >(
   preloadableRequest: Query<TVariables, TData, TRawResponse>,
   initialQueryReference?: ?PreloadedQuery<{
     response: TData,
     variables: TVariables,
-    rawResponse?: $NonMaybeType<TRawResponse>,
+    rawResponse?: NonNullable<TRawResponse>,
   }>,
 ): UseQueryLoaderHookReturnType<TVariables, TData> {
   type QueryType = {
     response: TData,
     variables: TVariables,
-    rawResponse?: $NonMaybeType<TRawResponse>,
+    rawResponse?: NonNullable<TRawResponse>,
   };
 
   /**
@@ -213,9 +217,9 @@ hook useQueryLoader_CURRENT<
       const mergedOptions: ?UseQueryLoaderLoadQueryOptions =
         options != null && options.hasOwnProperty('__environment')
           ? {
+              __nameForWarning: options.__nameForWarning,
               fetchPolicy: options.fetchPolicy,
               networkCacheConfig: options.networkCacheConfig,
-              __nameForWarning: options.__nameForWarning,
             }
           : options;
       if (isMountedRef.current) {
@@ -223,7 +227,7 @@ hook useQueryLoader_CURRENT<
           options?.__environment ?? environment,
           preloadableRequest,
           variables,
-          (mergedOptions: $FlowFixMe),
+          mergedOptions as $FlowFixMe,
         );
         undisposedQueryReferencesRef.current.add(updatedQueryReference);
         setQueryReference(updatedQueryReference);

package/relay-hooks/useQueryLoader_EXPERIMENTAL.js.flow

@@ -40,13 +40,13 @@ const initialNullQueryReferenceState: NullQueryReference = {
 };
 
 function requestIsLiveQuery<
-  TVariables: Variables,
+  TVariables extends Variables,
   TData,
-  TRawResponse: ?{...} = void,
-  TQuery: OperationType = {
+  TRawResponse extends ?{...} = void,
+  TQuery extends OperationType = {
     response: TData,
     variables: TVariables,
-    rawResponse?: $NonMaybeType<TRawResponse>,
+    rawResponse?: NonNullable<TRawResponse>,
   },
 >(
   preloadableRequest:
@@ -63,21 +63,21 @@ function requestIsLiveQuery<
 const CLEANUP_TIMEOUT = 1000 * 60 * 5; // 5 minutes;
 
 hook useQueryLoader_EXPERIMENTAL<
-  TVariables: Variables,
+  TVariables extends Variables,
   TData,
-  TRawResponse: ?{...} = void,
+  TRawResponse extends ?{...} = void,
 >(
   preloadableRequest: Query<TVariables, TData, TRawResponse>,
   initialQueryReference?: ?PreloadedQuery<{
     response: TData,
     variables: TVariables,
-    rawResponse?: $NonMaybeType<TRawResponse>,
+    rawResponse?: NonNullable<TRawResponse>,
   }>,
 ): UseQueryLoaderHookReturnType<TVariables, TData> {
   type QueryType = {
     response: TData,
     variables: TVariables,
-    rawResponse?: $NonMaybeType<TRawResponse>,
+    rawResponse?: NonNullable<TRawResponse>,
   };
 
   /**
@@ -151,16 +151,16 @@ hook useQueryLoader_EXPERIMENTAL<
       const mergedOptions: ?UseQueryLoaderLoadQueryOptions =
         options != null && options.hasOwnProperty('__environment')
           ? {
+              __nameForWarning: options.__nameForWarning,
               fetchPolicy: options.fetchPolicy,
               networkCacheConfig: options.networkCacheConfig,
-              __nameForWarning: options.__nameForWarning,
             }
           : options;
       const updatedQueryReference = loadQuery(
         options?.__environment ?? environment,
         preloadableRequest,
         variables,
-        (mergedOptions: $FlowFixMe),
+        mergedOptions as $FlowFixMe,
       );
       undisposedQueryReferencesRef.current?.add(updatedQueryReference);
       setQueryReference(updatedQueryReference);

package/relay-hooks/useRefetchableFragment.js.flow

@@ -24,11 +24,14 @@ const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
 const {useDebugValue} = require('react');
 const {getFragment} = require('relay-runtime');
 
-type RefetchVariables<TVariables, TKey: ?{+$fragmentSpreads: mixed, ...}> =
+type RefetchVariables<
+  TVariables,
+  TKey extends ?{+$fragmentSpreads: unknown, ...},
+> =
   // NOTE: This type ensures that the type of the returned variables is either:
   //   - nullable if the provided ref type is nullable
   //   - non-nullable if the provided ref type is non-nullable
-  [+key: TKey] extends [+key: {+$fragmentSpreads: mixed, ...}]
+  [+key: TKey] extends [+key: {+$fragmentSpreads: unknown, ...}]
     ? Partial<TVariables>
     : TVariables;
 
@@ -45,30 +48,32 @@ export type RefetchFn<TVariables, TKey, TOptions = Options> = RefetchFnBase<
 export type ReturnType<
   TVariables,
   TData,
-  TKey: ?{+$fragmentSpreads: mixed, ...},
+  TKey extends ?{+$fragmentSpreads: unknown, ...},
 > = [
   // NOTE: This type ensures that the type of the returned data is either:
   //   - nullable if the provided ref type is nullable
   //   - non-nullable if the provided ref type is non-nullable
-  [+key: TKey] extends [+key: {+$fragmentSpreads: mixed, ...}] ? TData : ?TData,
+  [+key: TKey] extends [+key: {+$fragmentSpreads: unknown, ...}]
+    ? TData
+    : ?TData,
   RefetchFn<TVariables, TKey>,
 ];
 
 export type UseRefetchableFragmentType = <
-  TFragmentType: FragmentType,
-  TVariables: Variables,
+  TFragmentType extends FragmentType,
+  TVariables extends Variables,
   TData,
-  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
+  TKey extends ?{+$fragmentSpreads: TFragmentType, ...},
 >(
   fragment: RefetchableFragment<TFragmentType, TData, TVariables>,
   key: TKey,
 ) => ReturnType<TVariables, TData, TKey>;
 
 hook useRefetchableFragment<
-  TFragmentType: FragmentType,
-  TVariables: Variables,
+  TFragmentType extends FragmentType,
+  TVariables extends Variables,
   TData,
-  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
+  TKey extends ?{+$fragmentSpreads: TFragmentType, ...},
 >(
   fragmentInput: RefetchableFragment<TFragmentType, TData, TVariables>,
   fragmentRef: TKey,
@@ -88,7 +93,7 @@ hook useRefetchableFragment<
     // $FlowFixMe[react-rule-hook-conditional]
     useDebugValue({fragment: fragmentNode.name, data: fragmentData});
   }
-  // $FlowFixMe[incompatible-return]
+  // $FlowFixMe[incompatible-type]
   // $FlowFixMe[prop-missing]
   return [fragmentData, refetch];
 }