react-relay 20.1.1 → 21.0.1

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,
@@ -43,19 +47,19 @@ type Options = {
    *      * "network-only": *will* *not* reuse locally cached data, and will *always* send a network request to fetch the query, ignoring any data that might be locally cached in Relay.
    *      * "store-only": *will* *only* reuse locally cached data, and will *never* send a network request to fetch the query. In this case, the responsibility of fetching the query falls to the caller, but this policy could also be used to read and operate on data that is entirely [local](../../guided-tour/updating-data/local-data-updates).
    */
-  +fetchPolicy?: FetchPolicy,
+  readonly fetchPolicy?: FetchPolicy,
   /**
    * A `fetchKey` can be passed to force a re-evaluation of the current query and variables when the component re-renders, even if the variables didn't change, or even if the component isn't remounted (similarly to how passing a different `key` to a React component will cause it to remount). If the `fetchKey` is different from the one used in the previous render, the current query will be re-evaluated against the store, and it might be refetched depending on the current `fetchPolicy` and the state of the cache.
    */
-  +fetchKey?: string | number,
+  readonly fetchKey?: string | number,
   /**
    * Default value: `{force: true}`. Object containing cache config options for the *network layer*. Note that the network layer may contain an *additional* query response cache which will reuse network responses for identical queries. If you want to bypass this cache completely (which is the default behavior), pass `{force: true}` as the value for this option.
    */
-  +networkCacheConfig?: CacheConfig,
+  readonly networkCacheConfig?: CacheConfig,
   /**
    * Undocumented option.
    */
-  +UNSTABLE_renderPolicy?: RenderPolicy,
+  readonly UNSTABLE_renderPolicy?: RenderPolicy,
 };
 
 /**
@@ -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),

package/relay-hooks/useLazyLoadQueryNode.js.flow

@@ -17,6 +17,7 @@ import type {
   Observable,
   OperationDescriptor,
   OperationType,
+  ReaderFragment,
   RenderPolicy,
 } from 'relay-runtime';
 
@@ -32,47 +33,74 @@ const React = require('react');
 
 const {useContext, useEffect, useState, useRef} = React;
 
-hook useLazyLoadQueryNode<TQuery: OperationType>({
-  query,
-  componentDisplayName,
-  fetchObservable,
-  fetchPolicy,
-  fetchKey,
-  renderPolicy,
-}: {
+export type LazyLoadQueryNodeParamsWithQuery = Readonly<{
   query: OperationDescriptor,
   componentDisplayName: string,
   fetchObservable: Observable<GraphQLResponse>,
   fetchPolicy?: ?FetchPolicy,
   fetchKey?: ?string | ?number,
   renderPolicy?: ?RenderPolicy,
-}): TQuery['response'] {
+}>;
+
+/**
+ * This param will be used when the query key is not provided
+ * (e.g. in usePreloadedQuery)
+ */
+export type LazyLoadQueryNodeParamsWithoutQuery = Readonly<{
+  componentDisplayName: string,
+  fragmentNode: ReaderFragment,
+}>;
+
+export type LazyLoadQueryNodeParams =
+  | LazyLoadQueryNodeParamsWithQuery
+  | LazyLoadQueryNodeParamsWithoutQuery;
+
+hook useLazyLoadQueryNode<
+  TQuery extends OperationType,
+  TParams extends LazyLoadQueryNodeParams = LazyLoadQueryNodeParams,
+>(
+  params: TParams,
+): TParams extends LazyLoadQueryNodeParamsWithQuery
+  ? TQuery['response']
+  : null {
   const environment = useRelayEnvironment();
   const profilerContext = useContext(ProfilerContext);
   const QueryResource = getQueryResourceForEnvironment(environment);
 
   const [forceUpdateKey, forceUpdate] = useState(0);
   const {startFetch, completeFetch} = useFetchTrackingRef();
-  const cacheBreaker = `${forceUpdateKey}-${fetchKey ?? ''}`;
-  const cacheIdentifier = getQueryCacheIdentifier(
-    environment,
-    query,
-    fetchPolicy,
-    renderPolicy,
-    cacheBreaker,
-  );
 
-  const preparedQueryResult = profilerContext.wrapPrepareQueryResource(() => {
-    return QueryResource.prepareWithIdentifier(
-      cacheIdentifier,
+  let cacheIdentifier = null;
+  let preparedQueryResult = null;
+  let fragmentNode;
+  if (params.query != null) {
+    const {query, fetchObservable, fetchPolicy, fetchKey, renderPolicy} =
+      params;
+    const cacheBreaker = `${forceUpdateKey}-${fetchKey ?? ''}`;
+    const queryCacheIdentifier = getQueryCacheIdentifier(
+      environment,
       query,
-      fetchObservable,
       fetchPolicy,
       renderPolicy,
-      {start: startFetch, complete: completeFetch, error: completeFetch},
-      profilerContext,
+      cacheBreaker,
     );
-  });
+    cacheIdentifier = queryCacheIdentifier;
+
+    preparedQueryResult = profilerContext.wrapPrepareQueryResource(() => {
+      return QueryResource.prepareWithIdentifier(
+        queryCacheIdentifier,
+        query,
+        fetchObservable,
+        fetchPolicy,
+        renderPolicy,
+        {start: startFetch, complete: completeFetch, error: completeFetch},
+        profilerContext,
+      );
+    });
+    fragmentNode = preparedQueryResult.fragmentNode;
+  } else {
+    fragmentNode = params.fragmentNode;
+  }
 
   const maybeHiddenOrFastRefresh = useRef(false);
   useEffect(() => {
@@ -103,6 +131,10 @@ hook useLazyLoadQueryNode<TQuery: OperationType>({
       return;
     }
 
+    if (preparedQueryResult == null) {
+      return;
+    }
+
     const disposable = QueryResource.retain(
       preparedQueryResult,
       profilerContext,
@@ -117,6 +149,10 @@ hook useLazyLoadQueryNode<TQuery: OperationType>({
   }, [environment, cacheIdentifier]);
 
   useEffect(() => {
+    if (preparedQueryResult == null) {
+      return;
+    }
+
     // Release any temporary retain that's not released. At this point, if the
     // cacheIdentifier doesn't change, the query is still permanently retained,
     // and the temporary retain is redundant.
@@ -124,13 +160,16 @@ hook useLazyLoadQueryNode<TQuery: OperationType>({
     // This effect is intended to run on every commit, thus no dependency
   });
 
-  const {fragmentNode, fragmentRef} = preparedQueryResult;
   const data = useFragmentInternal(
     fragmentNode,
-    fragmentRef,
-    componentDisplayName,
+    preparedQueryResult?.fragmentRef,
+    params.componentDisplayName,
   );
-  return data;
+
+  // Flow is confused in understanding the conditional type.
+  // We know data is the query response if input params is LazyLoadQueryNodeParamsWithQuery,
+  // and void if otherwise.
+  return data as $FlowFixMe;
 }
 
 module.exports = useLazyLoadQueryNode;

package/relay-hooks/useLoadMoreFunction.d.ts

@@ -0,0 +1,56 @@
+/**
+ * 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.
+ */
+
+import {
+  ConcreteRequest,
+  Disposable,
+  DisposeFn,
+  GraphQLResponse,
+  Observer,
+  OperationType,
+  ReaderFragment,
+  ReaderPaginationMetadata,
+  VariablesOf,
+} from 'relay-runtime';
+
+export type Direction = 'forward' | 'backward';
+
+export type LoadMoreFn<TQuery extends OperationType> = (
+    count: number,
+    options?: {
+        onComplete?: ((arg: Error | null) => void) | undefined;
+        UNSTABLE_extraVariables?: Partial<VariablesOf<TQuery>> | undefined;
+    },
+) => Disposable;
+
+export interface UseLoadMoreFunctionArgs {
+    direction: Direction;
+    fragmentNode: ReaderFragment;
+    fragmentRef: unknown;
+    fragmentIdentifier: string;
+    fragmentData: unknown;
+    connectionPathInFragmentData: ReadonlyArray<string | number>;
+    identifierField?: string | null | undefined;
+    paginationRequest: ConcreteRequest;
+    paginationMetadata: ReaderPaginationMetadata;
+    componentDisplayName: string;
+    observer: Observer<GraphQLResponse>;
+    onReset: () => void;
+}
+export function useLoadMoreFunction<TQuery extends OperationType>(
+    args: UseLoadMoreFunctionArgs,
+): [LoadMoreFn<TQuery>, boolean, DisposeFn];
+
+export function getConnectionState(
+    direction: Direction,
+    fragmentNode: ReaderFragment,
+    fragmentData: unknown,
+    connectionPathInFragmentData: ReadonlyArray<string | number>,
+): {
+    cursor?: string | null | undefined;
+    hasMore: boolean;
+};

package/relay-hooks/useLoadMoreFunction.js.flow

@@ -40,7 +40,7 @@ const {
 } = require('relay-runtime');
 const warning = require('warning');
 
-export type LoadMoreFn<TVariables: Variables> = (
+export type LoadMoreFn<TVariables extends Variables> = (
   count: number,
   options?: {
     onComplete?: (Error | null) => void,
@@ -51,10 +51,10 @@ export type LoadMoreFn<TVariables: Variables> = (
 export type UseLoadMoreFunctionArgs = {
   direction: Direction,
   fragmentNode: ReaderFragment,
-  fragmentRef: mixed,
+  fragmentRef: unknown,
   fragmentIdentifier: string,
-  fragmentData: mixed,
-  connectionPathInFragmentData: $ReadOnlyArray<string | number>,
+  fragmentData: unknown,
+  connectionPathInFragmentData: ReadonlyArray<string | number>,
   paginationRequest: ConcreteRequest,
   paginationMetadata: ReaderPaginationMetadata,
   componentDisplayName: string,
@@ -62,12 +62,13 @@ export type UseLoadMoreFunctionArgs = {
   onReset: () => void,
 };
 
-hook useLoadMoreFunction<TVariables: Variables>(
+hook useLoadMoreFunction<TVariables extends Variables>(
   args: UseLoadMoreFunctionArgs,
 ): [LoadMoreFn<TVariables>, boolean, () => void] {
   if (RelayFeatureFlags.ENABLE_ACTIVITY_COMPATIBILITY) {
     // $FlowFixMe[react-rule-hook] - the condition is static
     // $FlowFixMe[react-rule-hook-conditional]
+    // $FlowFixMe[incompatible-type]
     return useLoadMoreFunction_EXPERIMENTAL(args);
   }
   // $FlowFixMe[react-rule-hook] - the condition is static
@@ -75,7 +76,7 @@ hook useLoadMoreFunction<TVariables: Variables>(
   return useLoadMoreFunction_CURRENT(args);
 }
 
-hook useLoadMoreFunction_CURRENT<TVariables: Variables>(
+hook useLoadMoreFunction_CURRENT<TVariables extends Variables>(
   args: UseLoadMoreFunctionArgs,
 ): [LoadMoreFn<TVariables>, boolean, () => void] {
   const {

package/relay-hooks/useLoadMoreFunction_EXPERIMENTAL.js.flow

@@ -38,7 +38,7 @@ const {
 } = require('relay-runtime');
 const warning = require('warning');
 
-export type LoadMoreFn<TVariables: Variables> = (
+export type LoadMoreFn<TVariables extends Variables> = (
   count: number,
   options?: {
     onComplete?: (Error | null) => void,
@@ -49,10 +49,10 @@ export type LoadMoreFn<TVariables: Variables> = (
 export type UseLoadMoreFunctionArgs = {
   direction: Direction,
   fragmentNode: ReaderFragment,
-  fragmentRef: mixed,
+  fragmentRef: unknown,
   fragmentIdentifier: string,
-  fragmentData: mixed,
-  connectionPathInFragmentData: $ReadOnlyArray<string | number>,
+  fragmentData: unknown,
+  connectionPathInFragmentData: ReadonlyArray<string | number>,
   paginationRequest: ConcreteRequest,
   paginationMetadata: ReaderPaginationMetadata,
   componentDisplayName: string,
@@ -60,7 +60,7 @@ export type UseLoadMoreFunctionArgs = {
   onReset: () => void,
 };
 
-hook useLoadMoreFunction_EXPERIMENTAL<TVariables: Variables>(
+hook useLoadMoreFunction_EXPERIMENTAL<TVariables extends Variables>(
   args: UseLoadMoreFunctionArgs,
 ): [
   // Function to load more data

package/relay-hooks/useMemoVariables.js.flow

@@ -21,7 +21,7 @@ const {useState} = require('react');
  * This is useful when a `variables` object is used as a value in a depencency
  * array as it might often be constructed during render.
  */
-hook useMemoVariables<TVariables: Variables | null>(
+hook useMemoVariables<TVariables extends Variables | null>(
   variables: TVariables,
 ): TVariables {
   const [mirroredVariables, setMirroredVariables] = useState(variables);

package/relay-hooks/useMutation.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 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.
+ */
+
+import {
+  DeclarativeMutationConfig,
+  Disposable,
+  GraphQLTaggedNode,
+  IEnvironment,
+  MutationConfig,
+  MutationParameters,
+  PayloadError,
+  SelectorStoreUpdater,
+  UploadableMap,
+  VariablesOf,
+} from 'relay-runtime';
+
+export interface UseMutationConfig<TMutation extends MutationParameters> {
+    variables: VariablesOf<TMutation>;
+    updater?: SelectorStoreUpdater<TMutation['response']> | null | undefined;
+    uploadables?: UploadableMap | undefined;
+    optimisticUpdater?: SelectorStoreUpdater<TMutation['response']> | null | undefined;
+    optimisticResponse?: TMutation['rawResponse'] | undefined;
+    configs?: DeclarativeMutationConfig[] | undefined;
+    onError?: ((error: Error) => void | null) | undefined;
+    onCompleted?: ((response: TMutation['response'], errors: PayloadError[] | null) => void | null) | undefined;
+    onUnsubscribe?: (() => void | null) | undefined;
+}
+
+export function useMutation<TMutation extends MutationParameters>(
+    mutation: GraphQLTaggedNode,
+    commitMutationFn?: (environment: IEnvironment, config: MutationConfig<TMutation>) => Disposable,
+): [(config: UseMutationConfig<TMutation>) => Disposable, boolean];

package/relay-hooks/useMutation.js.flow

@@ -24,14 +24,13 @@ import type {
   Variables,
 } from 'relay-runtime';
 
-const useIsMountedRef = require('./useIsMountedRef');
 const useRelayEnvironment = require('./useRelayEnvironment');
 const React = require('react');
 const {commitMutation: defaultCommitMutation} = require('relay-runtime');
 
 const {useState, useEffect, useRef, useCallback} = React;
 
-export type UseMutationConfig<TMutation: MutationParameters> = {
+export type UseMutationConfig<TMutation extends MutationParameters> = {
   configs?: Array<DeclarativeMutationConfig>,
   onError?: ?(error: Error) => void,
   onCompleted?: ?(
@@ -41,7 +40,7 @@ export type UseMutationConfig<TMutation: MutationParameters> = {
   onNext?: ?() => void,
   onUnsubscribe?: ?() => void,
   optimisticResponse?: {
-    +rawResponse?: {...},
+    readonly rawResponse?: {...},
     ...TMutation,
     ...
   }['rawResponse'],
@@ -64,7 +63,7 @@ type UseMutationConfigInternal<TVariables, TData, TRawResponse> = {
   variables: TVariables,
 };
 
-hook useMutation<TVariables: Variables, TData, TRawResponse = {...}>(
+hook useMutation<TVariables extends Variables, TData, TRawResponse = {...}>(
   mutation: Mutation<TVariables, TData, TRawResponse>,
   commitMutationFn?: (
     environment: IEnvironment,
@@ -75,7 +74,6 @@ hook useMutation<TVariables: Variables, TData, TRawResponse = {...}>(
   boolean,
 ] {
   const environment = useRelayEnvironment();
-  const isMountedRef = useIsMountedRef();
   const environmentRef = useRef(environment);
   const mutationRef = useRef(mutation);
   const inFlightMutationsRef = useRef(new Set<Disposable>());
@@ -88,12 +86,10 @@ hook useMutation<TVariables: Variables, TData, TRawResponse = {...}>(
         mutationRef.current === mutation
       ) {
         inFlightMutationsRef.current.delete(disposable);
-        if (isMountedRef.current) {
-          setMutationInFlight(inFlightMutationsRef.current.size > 0);
-        }
+        setMutationInFlight(inFlightMutationsRef.current.size > 0);
       }
     },
-    [environment, isMountedRef, mutation],
+    [environment, mutation],
   );
 
   useEffect(() => {
@@ -102,19 +98,15 @@ hook useMutation<TVariables: Variables, TData, TRawResponse = {...}>(
       mutationRef.current !== mutation
     ) {
       inFlightMutationsRef.current = new Set();
-      if (isMountedRef.current) {
-        setMutationInFlight(false);
-      }
+      setMutationInFlight(false);
       environmentRef.current = environment;
       mutationRef.current = mutation;
     }
-  }, [environment, isMountedRef, mutation]);
+  }, [environment, mutation]);
 
   const commit = useCallback(
     (config: UseMutationConfigInternal<TVariables, TData, TRawResponse>) => {
-      if (isMountedRef.current) {
-        setMutationInFlight(true);
-      }
+      setMutationInFlight(true);
       const disposable: Disposable = commitMutationFn(environment, {
         ...config,
         mutation,
@@ -137,7 +129,7 @@ hook useMutation<TVariables: Variables, TData, TRawResponse = {...}>(
       inFlightMutationsRef.current.add(disposable);
       return disposable;
     },
-    [cleanup, commitMutationFn, environment, isMountedRef, mutation],
+    [cleanup, commitMutationFn, environment, mutation],
   );
 
   return [commit, isMutationInFlight];

package/relay-hooks/useMutationAction_EXPERIMENTAL.js.flow

@@ -0,0 +1,68 @@
+/**
+ * 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 {Mutation, Variables} from 'relay-runtime';
+
+const useRelayEnvironment = require('./useRelayEnvironment');
+const React = require('react');
+const {commitMutation} = require('relay-runtime');
+
+const {useCallback} = React;
+
+/**
+ * A variant of useMutation that returns an action function suitable for use
+ * with React's action prop pattern. The returned action is an async function
+ * that can be passed to `startTransition` or used as an action prop, enabling
+ * optimistic UI updates via `useOptimistic`.
+ * https://react.dev/reference/react/useTransition#starttransition
+ *
+ * Usage:
+ *   const commitAction = useMutationAction_EXPERIMENTAL(mutation);
+ *
+ *   // In a startTransition or action prop:
+ *   startTransition(async () => {
+ *     setOptimisticValue(newValue);
+ *     await commitAction({input: newValue});
+ *   });
+ */
+hook useMutationAction_EXPERIMENTAL<
+  TVariables extends Variables,
+  TData,
+  TRawResponse = {...},
+>(
+  mutation: Mutation<TVariables, TData, TRawResponse>,
+): (variables: TVariables) => Promise<TData> {
+  const environment = useRelayEnvironment();
+
+  const commitAction = useCallback(
+    (variables: TVariables): Promise<TData> => {
+      return new Promise((resolve, reject) => {
+        commitMutation(environment, {
+          mutation,
+          variables,
+          onCompleted: (response: TData) => {
+            resolve(response);
+          },
+          onError: (error: Error) => {
+            reject(error);
+          },
+        });
+      });
+    },
+    [environment, mutation],
+  );
+
+  return commitAction;
+}
+
+module.exports = useMutationAction_EXPERIMENTAL;

package/relay-hooks/usePaginationFragment.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+
+import {KeyType, KeyTypeData, RefetchFnDynamic} from '../ReactRelayTypes';
+import { LoadMoreFn } from './useLoadMoreFunction';
+import {GraphQLTaggedNode, OperationType} from 'relay-runtime';
+
+export interface usePaginationFragmentHookType<
+    TQuery extends OperationType,
+    TKey extends KeyType | null | undefined,
+    TFragmentData,
+> {
+    data: TFragmentData;
+    loadNext: LoadMoreFn<TQuery>;
+    loadPrevious: LoadMoreFn<TQuery>;
+    hasNext: boolean;
+    hasPrevious: boolean;
+    isLoadingNext: boolean;
+    isLoadingPrevious: boolean;
+    refetch: RefetchFnDynamic<TQuery, TKey>;
+}
+export function usePaginationFragment<TQuery extends OperationType, TKey extends KeyType>(
+    fragmentInput: GraphQLTaggedNode,
+    parentFragmentRef: TKey,
+): usePaginationFragmentHookType<TQuery, TKey, KeyTypeData<TKey>>;
+export function usePaginationFragment<TQuery extends OperationType, TKey extends KeyType>(
+    fragmentInput: GraphQLTaggedNode,
+    parentFragmentRef: TKey | null | undefined,
+): usePaginationFragmentHookType<TQuery, TKey | null, KeyTypeData<TKey> | null | undefined>;

package/relay-hooks/usePaginationFragment.js.flow

@@ -32,11 +32,16 @@ const {
   getPaginationMetadata,
 } = require('relay-runtime');
 
-type RefetchVariables<TVariables, TKey: ?{+$fragmentSpreads: mixed, ...}> =
+type RefetchVariables<
+  TVariables,
+  TKey extends ?{readonly $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, ...}]
+  [readonly key: TKey] extends [
+    readonly key: {readonly $fragmentSpreads: unknown, ...},
+  ]
     ? Partial<TVariables>
     : TVariables;
 
@@ -54,7 +59,9 @@ export type ReturnType<TVariables, TData, 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: [readonly key: TKey] extends [
+    readonly key: {readonly $fragmentSpreads: unknown, ...},
+  ]
     ? TData
     : ?TData,
   loadNext: LoadMoreFn<TVariables>,
@@ -70,20 +77,20 @@ export type ReturnType<TVariables, TData, TKey> = {
 // a separate hooks implementation in ./HooksImplementation -- it can
 // be removed after we stop doing that.
 export type UsePaginationFragmentType = <
-  TFragmentType: FragmentType,
-  TVariables: Variables,
+  TFragmentType extends FragmentType,
+  TVariables extends Variables,
   TData,
-  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
+  TKey extends ?{readonly $fragmentSpreads: TFragmentType, ...},
 >(
   fragmentInput: RefetchableFragment<TFragmentType, TData, TVariables>,
   parentFragmentRef: TKey,
 ) => ReturnType<TVariables, TData, TKey>;
 
 hook usePaginationFragment<
-  TFragmentType: FragmentType,
-  TVariables: Variables,
+  TFragmentType extends FragmentType,
+  TVariables extends Variables,
   TData,
-  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
+  TKey extends ?{readonly $fragmentSpreads: TFragmentType, ...},
 >(
   fragmentInput: RefetchableFragment<TFragmentType, TData, TVariables>,
   parentFragmentRef: TKey,
@@ -155,7 +162,7 @@ hook usePaginationFragment<
     });
   }
   return {
-    // $FlowFixMe[incompatible-return]
+    // $FlowFixMe[incompatible-type]
     data: fragmentData,
     loadNext,
     loadPrevious,
@@ -163,11 +170,12 @@ hook usePaginationFragment<
     hasPrevious,
     isLoadingNext,
     isLoadingPrevious,
+    // $FlowFixMe[incompatible-type]
     refetch: refetchPagination,
   };
 }
 
-hook useLoadMore<TVariables: Variables>(
+hook useLoadMore<TVariables extends Variables>(
   args: Omit<UseLoadMoreFunctionArgs, 'observer' | 'onReset'>,
 ): [LoadMoreFn<TVariables>, boolean, boolean, () => void] {
   const environment = useRelayEnvironment();