react-relay 14.1.0 → 15.0.0

package/relay-hooks/usePaginationFragment.js.flow

@@ -4,21 +4,22 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
 
 import type {LoadMoreFn, UseLoadMoreFunctionArgs} from './useLoadMoreFunction';
-import type {RefetchFnDynamic} from './useRefetchableFragmentNode';
+import type {RefetchFn} from './useRefetchableFragment';
+import type {Options} from './useRefetchableFragmentNode';
 import type {
   FragmentType,
   GraphQLResponse,
-  GraphQLTaggedNode,
   Observer,
-  OperationType,
+  RefetchableFragment,
+  Variables,
 } from 'relay-runtime';
 
 const HooksImplementation = require('./HooksImplementation');
@@ -32,43 +33,28 @@ const {
   getPaginationMetadata,
 } = require('relay-runtime');
 
-export type ReturnType<TQuery: OperationType, TKey> = {
-  // NOTE: This $Call 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
-  // prettier-ignore
-  data: $Call<
-    & (<TFragmentData>( { +$data?: TFragmentData, ... }) =>  TFragmentData)
-    & (<TFragmentData>(?{ +$data?: TFragmentData, ... }) => ?TFragmentData),
-    TKey,
-  >,
-  loadNext: LoadMoreFn<TQuery>,
-  loadPrevious: LoadMoreFn<TQuery>,
-  hasNext: boolean,
-  hasPrevious: boolean,
-  isLoadingNext: boolean,
-  isLoadingPrevious: boolean,
-  refetch: RefetchFnDynamic<TQuery, TKey>,
-};
-
 // 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 UsePaginationFragmentType = <
-  TQuery: OperationType,
-  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
+  TFragmentType: FragmentType,
+  TVariables: Variables,
+  TData,
+  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
 >(
-  fragmentInput: GraphQLTaggedNode,
+  fragmentInput: RefetchableFragment<TFragmentType, TData, TVariables>,
   parentFragmentRef: TKey,
-) => ReturnType<TQuery, TKey>;
+) => ReturnType<TVariables, TData, TKey>;
 
 function usePaginationFragment_LEGACY<
-  TQuery: OperationType,
-  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
+  TFragmentType: FragmentType,
+  TVariables: Variables,
+  TData,
+  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
 >(
-  fragmentInput: GraphQLTaggedNode,
+  fragmentInput: RefetchableFragment<TFragmentType, TData, TVariables>,
   parentFragmentRef: TKey,
-): ReturnType<TQuery, TKey> {
+): ReturnType<TVariables, TData, TKey> {
   const fragmentNode = getFragment(fragmentInput);
   useStaticFragmentNodeWarning(
     fragmentNode,
@@ -84,14 +70,14 @@ function usePaginationFragment_LEGACY<
   } = getPaginationMetadata(fragmentNode, componentDisplayName);
 
   const {fragmentData, fragmentRef, refetch} = useRefetchableFragmentNode<
-    TQuery,
-    TKey,
+    $FlowFixMe,
+    $FlowFixMe,
   >(fragmentNode, parentFragmentRef, componentDisplayName);
   const fragmentIdentifier = getFragmentIdentifier(fragmentNode, fragmentRef);
 
   // Backward pagination
   const [loadPrevious, hasPrevious, isLoadingPrevious, disposeFetchPrevious] =
-    useLoadMore<TQuery>({
+    useLoadMore<TVariables>({
       componentDisplayName,
       connectionPathInFragmentData,
       direction: 'backward',
@@ -106,7 +92,7 @@ function usePaginationFragment_LEGACY<
 
   // Forward pagination
   const [loadNext, hasNext, isLoadingNext, disposeFetchNext] =
-    useLoadMore<TQuery>({
+    useLoadMore<TVariables>({
       componentDisplayName,
       connectionPathInFragmentData,
       direction: 'forward',
@@ -119,8 +105,8 @@ function usePaginationFragment_LEGACY<
       paginationRequest,
     });
 
-  const refetchPagination: RefetchFnDynamic<TQuery, TKey> = useCallback(
-    (variables, options) => {
+  const refetchPagination: RefetchFn<TVariables, TKey> = useCallback(
+    (variables: TVariables, options: void | Options) => {
       disposeFetchNext();
       disposeFetchPrevious();
       return refetch(variables, {...options, __environment: undefined});
@@ -140,7 +126,7 @@ function usePaginationFragment_LEGACY<
     });
   }
   return {
-    data: fragmentData,
+    data: (fragmentData: $FlowFixMe),
     loadNext,
     loadPrevious,
     hasNext,
@@ -151,7 +137,7 @@ function usePaginationFragment_LEGACY<
   };
 }
 
-function useLoadMore<TQuery: OperationType>(
+function useLoadMore<TVariables: Variables>(
   args: $Diff<
     UseLoadMoreFunctionArgs,
     {
@@ -160,7 +146,7 @@ function useLoadMore<TQuery: OperationType>(
       ...
     },
   >,
-): [LoadMoreFn<TQuery>, boolean, boolean, () => void] {
+): [LoadMoreFn<TVariables>, boolean, boolean, () => void] {
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const observer = {
     start: () => setIsLoadingMore(true),
@@ -168,7 +154,7 @@ function useLoadMore<TQuery: OperationType>(
     error: () => setIsLoadingMore(false),
   };
   const handleReset = () => setIsLoadingMore(false);
-  const [loadMore, hasMore, disposeFetch] = useLoadMoreFunction({
+  const [loadMore, hasMore, disposeFetch] = useLoadMoreFunction<TVariables>({
     ...args,
     observer,
     onReset: handleReset,
@@ -176,16 +162,37 @@ function useLoadMore<TQuery: OperationType>(
   return [loadMore, hasMore, isLoadingMore, disposeFetch];
 }
 
+export type ReturnType<TVariables, TData, TKey> = {
+  // NOTE: This $Call 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
+  // prettier-ignore
+  data: $Call<
+    & (<TFragmentType>( { +$fragmentSpreads: TFragmentType, ... }) =>  TData)
+    & (<TFragmentType>(?{ +$fragmentSpreads: TFragmentType, ... }) => ?TData),
+    TKey,
+  >,
+  loadNext: LoadMoreFn<TVariables>,
+  loadPrevious: LoadMoreFn<TVariables>,
+  hasNext: boolean,
+  hasPrevious: boolean,
+  isLoadingNext: boolean,
+  isLoadingPrevious: boolean,
+  refetch: RefetchFn<TVariables, TKey>,
+};
+
 function usePaginationFragment<
-  TQuery: OperationType,
-  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
+  TFragmentType: FragmentType,
+  TVariables: Variables,
+  TData,
+  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
 >(
-  fragmentInput: GraphQLTaggedNode,
+  fragmentInput: RefetchableFragment<TFragmentType, TData, TVariables>,
   parentFragmentRef: TKey,
-): ReturnType<TQuery, TKey> {
+): ReturnType<TVariables, TData, TKey> {
   const impl = HooksImplementation.get();
   if (impl) {
-    return impl.usePaginationFragment<TQuery, TKey>(
+    return impl.usePaginationFragment<TFragmentType, TVariables, TData, TKey>(
       fragmentInput,
       parentFragmentRef,
     );

package/relay-hooks/usePreloadedQuery.js.flow

@@ -4,19 +4,19 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
 
-import type {PreloadedQuery} from './EntryPointTypes.flow';
 import type {
-  GraphQLTaggedNode,
-  OperationType,
-  RenderPolicy,
-} from 'relay-runtime';
+  EnvironmentProviderOptions,
+  PreloadedQueryInner,
+  PreloadedQueryInner_DEPRECATED,
+} from './EntryPointTypes.flow';
+import type {Query, RenderPolicy, Variables} from 'relay-runtime';
 
 const {useTrackLoadQueryInRender} = require('./loadQuery');
 const useLazyLoadQueryNode = require('./useLazyLoadQueryNode');
@@ -29,24 +29,44 @@ const {
 } = require('relay-runtime');
 const warning = require('warning');
 
-// 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 UsePreloadedQueryHookType = <TQuery: OperationType>(
-  gqlQuery: GraphQLTaggedNode,
-  preloadedQuery: PreloadedQuery<TQuery>,
-  options?: {
-    UNSTABLE_renderPolicy?: RenderPolicy,
-  },
-) => TQuery['response'];
+type PreloadedQuery<
+  TVariables: Variables,
+  TData,
+  TRawResponse,
+  TEnvironmentProviderOptions = EnvironmentProviderOptions,
+> =
+  | PreloadedQueryInner_DEPRECATED<
+      {
+        variables: TVariables,
+        response: TData,
+        rawResponse?: TRawResponse,
+      },
+      TEnvironmentProviderOptions,
+    >
+  | PreloadedQueryInner<
+      {
+        variables: TVariables,
+        response: TData,
+        rawResponse?: TRawResponse,
+      },
+      TEnvironmentProviderOptions,
+    >;
 
-function usePreloadedQuery<TQuery: OperationType>(
-  gqlQuery: GraphQLTaggedNode,
-  preloadedQuery: PreloadedQuery<TQuery>,
+function usePreloadedQuery<
+  TVariables: Variables,
+  TData,
+  TRawResponse: ?{...} = void,
+>(
+  gqlQuery: Query<TVariables, TData, TRawResponse>,
+  preloadedQuery: PreloadedQuery<
+    TVariables,
+    TData,
+    $NonMaybeType<TRawResponse>,
+  >,
   options?: {
     UNSTABLE_renderPolicy?: RenderPolicy,
   },
-): TQuery['response'] {
+): TData {
   // We need to use this hook in order to be able to track if
   // loadQuery was called during render
   useTrackLoadQueryInRender();
@@ -136,7 +156,12 @@ function usePreloadedQuery<TQuery: OperationType>(
     };
   }
 
-  const data = useLazyLoadQueryNode(useLazyLoadQueryNodeParams);
+  const data = useLazyLoadQueryNode<{
+    variables: TVariables,
+    response: TData,
+    rawResponse?: $NonMaybeType<TRawResponse>,
+  }>(useLazyLoadQueryNodeParams);
+
   if (__DEV__) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useDebugValue({
@@ -151,4 +176,4 @@ function usePreloadedQuery<TQuery: OperationType>(
   return data;
 }
 
-module.exports = (usePreloadedQuery: UsePreloadedQueryHookType);
+module.exports = usePreloadedQuery;

package/relay-hooks/useQueryLoader.js.flow

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -17,9 +17,10 @@ import type {
   PreloadedQuery,
 } from './EntryPointTypes.flow';
 import type {
-  GraphQLTaggedNode,
   IEnvironment,
   OperationType,
+  Query,
+  Variables,
 } from 'relay-runtime';
 
 const {loadQuery, useTrackLoadQueryInRender} = require('./loadQuery');
@@ -38,12 +39,6 @@ export type UseQueryLoaderLoadQueryOptions = $ReadOnly<{
   +__environment?: ?IEnvironment,
 }>;
 
-type UseQueryLoaderHookReturnType<TQuery: OperationType> = [
-  ?PreloadedQuery<TQuery>,
-  LoaderFn<TQuery>,
-  () => void,
-];
-
 // NullQueryReference needs to implement referential equality,
 // so that multiple NullQueryReferences can be in the same set
 // (corresponding to multiple calls to disposeQuery).
@@ -52,20 +47,91 @@ type NullQueryReference = {
 };
 const initialNullQueryReferenceState = {kind: 'NullQueryReference'};
 
-function requestIsLiveQuery<TQuery: OperationType>(
-  preloadableRequest: GraphQLTaggedNode | PreloadableConcreteRequest<TQuery>,
+function requestIsLiveQuery<
+  TVariables: Variables,
+  TData,
+  TRawResponse: ?{...} = void,
+  TQuery: OperationType = {
+    response: TData,
+    variables: TVariables,
+    rawResponse?: $NonMaybeType<TRawResponse>,
+  },
+>(
+  preloadableRequest:
+    | Query<TVariables, TData, TRawResponse>
+    | PreloadableConcreteRequest<TQuery>,
 ): boolean {
   if (preloadableRequest.kind === 'PreloadableConcreteRequest') {
-    return (preloadableRequest: $FlowFixMe).params.metadata.live !== undefined;
+    return preloadableRequest.params.metadata.live !== undefined;
   }
   const request = getRequest(preloadableRequest);
   return request.params.metadata.live !== undefined;
 }
 
-function useQueryLoader<TQuery: OperationType>(
-  preloadableRequest: GraphQLTaggedNode | PreloadableConcreteRequest<TQuery>,
+type UseQueryLoaderHookReturnType<
+  TVariables: Variables,
+  TData,
+  TRawResponse: ?{...} = void,
+> = [
+  ?PreloadedQuery<{
+    response: TData,
+    variables: TVariables,
+    rawResponse?: $NonMaybeType<TRawResponse>,
+  }>,
+  (variables: TVariables, options?: UseQueryLoaderLoadQueryOptions) => void,
+  () => void,
+];
+
+type ExtractVariablesType = <T>({+variables: T, ...}) => T;
+type ExtractResponseType = <T>({+response: T, ...}) => T;
+
+declare function useQueryLoader<
+  TVariables: Variables,
+  TData,
+  TRawResponse: ?{...} = void,
+>(
+  preloadableRequest: Query<TVariables, TData, TRawResponse>,
+): UseQueryLoaderHookReturnType<TVariables, TData>;
+
+declare function useQueryLoader<
+  TVariables: Variables,
+  TData,
+  TRawResponse: ?{...} = void,
+>(
+  preloadableRequest: Query<TVariables, TData, TRawResponse>,
+  initialQueryReference: ?PreloadedQuery<{
+    response: TData,
+    variables: TVariables,
+    rawResponse?: $NonMaybeType<TRawResponse>,
+  }>,
+): UseQueryLoaderHookReturnType<TVariables, TData>;
+
+declare function useQueryLoader<TQuery: OperationType>(
+  preloadableRequest: PreloadableConcreteRequest<TQuery>,
   initialQueryReference?: ?PreloadedQuery<TQuery>,
-): UseQueryLoaderHookReturnType<TQuery> {
+): UseQueryLoaderHookReturnType<
+  $Call<ExtractVariablesType, TQuery>,
+  $Call<ExtractResponseType, TQuery>,
+>;
+
+function useQueryLoader<
+  TVariables: Variables,
+  TData,
+  TRawResponse: ?{...} = void,
+>(
+  preloadableRequest: Query<TVariables, TData, TRawResponse>,
+  initialQueryReference?: ?PreloadedQuery<{
+    response: TData,
+    variables: TVariables,
+    rawResponse?: $NonMaybeType<TRawResponse>,
+  }>,
+): UseQueryLoaderHookReturnType<TVariables, TData> {
+  type QueryType = {
+    response: TData,
+    variables: TVariables,
+    rawResponse?: $NonMaybeType<TRawResponse>,
+  };
+
   /**
    * We want to always call `queryReference.dispose()` for every call to
    * `setQueryReference(loadQuery(...))` so that no leaks of data in Relay stores
@@ -94,15 +160,15 @@ function useQueryLoader<TQuery: OperationType>(
 
   const isMountedRef = useIsMountedRef();
   const undisposedQueryReferencesRef = useRef<
-    Set<PreloadedQuery<TQuery> | NullQueryReference>,
+    Set<PreloadedQuery<QueryType> | NullQueryReference>,
   >(new Set([initialQueryReferenceInternal]));
 
   const [queryReference, setQueryReference] = useState<
-    PreloadedQuery<TQuery> | NullQueryReference,
+    PreloadedQuery<QueryType> | NullQueryReference,
   >(() => initialQueryReferenceInternal);
 
   const [previousInitialQueryReference, setPreviousInitialQueryReference] =
-    useState<PreloadedQuery<TQuery> | NullQueryReference>(
+    useState<PreloadedQuery<QueryType> | NullQueryReference>(
       () => initialQueryReferenceInternal,
     );
 
@@ -125,10 +191,7 @@ function useQueryLoader<TQuery: OperationType>(
   }, [isMountedRef]);
 
   const queryLoaderCallback = useCallback(
-    (
-      variables: TQuery['variables'],
-      options?: ?UseQueryLoaderLoadQueryOptions,
-    ) => {
+    (variables: TVariables, options?: ?UseQueryLoaderLoadQueryOptions) => {
       const mergedOptions: ?UseQueryLoaderLoadQueryOptions =
         options != null && options.hasOwnProperty('__environment')
           ? {
@@ -138,7 +201,7 @@ function useQueryLoader<TQuery: OperationType>(
             }
           : options;
       if (isMountedRef.current) {
-        const updatedQueryReference = loadQuery(
+        const updatedQueryReference = loadQuery<QueryType>(
           options?.__environment ?? environment,
           preloadableRequest,
           variables,

package/relay-hooks/useRefetchableFragment.js.flow

@@ -4,18 +4,19 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
 
-import type {RefetchFnDynamic} from './useRefetchableFragmentNode';
+import type {Options} from './useRefetchableFragmentNode';
 import type {
+  Disposable,
   FragmentType,
-  GraphQLTaggedNode,
-  OperationType,
+  RefetchableFragment,
+  Variables,
 } from 'relay-runtime';
 
 const HooksImplementation = require('./HooksImplementation');
@@ -24,66 +25,96 @@ const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
 const {useDebugValue} = require('react');
 const {getFragment} = require('relay-runtime');
 
-type ReturnType<TQuery: OperationType, TKey: ?{+$data?: mixed, ...}> = [
+type RefetchVariables<TVariables, TKey> =
+  // NOTE: This $Call 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
+  // prettier-ignore
+  $Call<
+    & (<TFragmentType>( { +$fragmentSpreads: TFragmentType, ... }) => $Shape<TVariables>)
+    & (<TFragmentType>(?{ +$fragmentSpreads: TFragmentType, ... }) => TVariables),
+    TKey,
+  >;
+
+type RefetchFnBase<TVars, TOptions> = (
+  vars: TVars,
+  options?: TOptions,
+) => Disposable;
+
+export type RefetchFn<TVariables, TKey, TOptions = Options> = RefetchFnBase<
+  RefetchVariables<TVariables, TKey>,
+  TOptions,
+>;
+
+type ReturnType<TVariables, TData, TKey> = [
   // NOTE: This $Call 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
   // prettier-ignore
   $Call<
-    & (<TFragmentData>( { +$data?: TFragmentData, ... }) =>  TFragmentData)
-    & (<TFragmentData>(?{ +$data?: TFragmentData, ... }) => ?TFragmentData),
+    & (<TFragmentType>( { +$fragmentSpreads: TFragmentType, ... }) =>  TData)
+    & (<TFragmentType>(?{ +$fragmentSpreads: TFragmentType, ... }) => ?TData),
     TKey,
   >,
-  RefetchFnDynamic<TQuery, TKey>,
+  RefetchFn<TVariables, TKey>,
 ];
 
-// 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 UseRefetchableFragmentType = <
-  TQuery: OperationType,
-  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
+  TFragmentType: FragmentType,
+  TVariables: Variables,
+  TData,
+  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
 >(
-  fragmentInput: GraphQLTaggedNode,
-  fragmentRef: TKey,
-) => ReturnType<TQuery, TKey>;
+  fragment: RefetchableFragment<TFragmentType, TData, TVariables>,
+  key: TKey,
+) => ReturnType<TVariables, TData, TKey>;
 
 function useRefetchableFragment_LEGACY<
-  TQuery: OperationType,
-  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
+  TFragmentType: FragmentType,
+  TVariables: Variables,
+  TData,
+  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
 >(
-  fragmentInput: GraphQLTaggedNode,
+  fragmentInput: RefetchableFragment<TFragmentType, TData, TVariables>,
   fragmentRef: TKey,
-): ReturnType<TQuery, TKey> {
+): ReturnType<TVariables, TData, TKey> {
   const fragmentNode = getFragment(fragmentInput);
   useStaticFragmentNodeWarning(
     fragmentNode,
     'first argument of useRefetchableFragment()',
   );
-  const {fragmentData, refetch} = useRefetchableFragmentNode<TQuery, TKey>(
-    fragmentNode,
-    fragmentRef,
-    'useRefetchableFragment()',
-  );
+  const {fragmentData, refetch} = useRefetchableFragmentNode<
+    {
+      response: TData,
+      variables: TVariables,
+    },
+    {
+      +$data: mixed,
+      ...
+    },
+  >(fragmentNode, fragmentRef, 'useRefetchableFragment()');
   if (__DEV__) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useDebugValue({fragment: fragmentNode.name, data: fragmentData});
   }
-  /* $FlowExpectedError[prop-missing] : Exposed options is a subset of internal
-   * options */
-  return [fragmentData, (refetch: RefetchFnDynamic<TQuery, TKey>)];
+
+  // $FlowFixMe[incompatible-return]
+  // $FlowFixMe[prop-missing]
+  return [fragmentData, refetch];
 }
 
 function useRefetchableFragment<
-  TQuery: OperationType,
-  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
+  TFragmentType: FragmentType,
+  TVariables: Variables,
+  TData,
+  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
 >(
-  fragmentInput: GraphQLTaggedNode,
+  fragmentInput: RefetchableFragment<TFragmentType, TData, TVariables>,
   parentFragmentRef: TKey,
-): ReturnType<TQuery, TKey> {
+): ReturnType<TVariables, TData, TKey> {
   const impl = HooksImplementation.get();
   if (impl) {
-    return impl.useRefetchableFragment<TQuery, TKey>(
+    return impl.useRefetchableFragment<TFragmentType, TVariables, TData, TKey>(
       fragmentInput,
       parentFragmentRef,
     );

package/relay-hooks/useRefetchableFragmentNode.js.flow

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -207,8 +207,11 @@ function useRefetchableFragmentNode<
   const shouldReset =
     environment !== mirroredEnvironment ||
     fragmentIdentifier !== mirroredFragmentIdentifier;
-  const [queryRef, loadQuery, disposeQuery] =
-    useQueryLoader<TQuery>(refetchableRequest);
+  const [queryRef, loadQuery, disposeQuery] = useQueryLoader<
+    TQuery['variables'],
+    TQuery['response'],
+    TQuery['rawResponse'],
+  >((refetchableRequest: $FlowFixMe));
 
   let fragmentRef = parentFragmentRef;
   if (shouldReset) {
@@ -391,7 +394,10 @@ function useRefetchFunction<TQuery: OperationType>(
       ? fragmentData[identifierField]
       : null;
   return useCallback(
-    (providedRefetchVariables, options) => {
+    (
+      providedRefetchVariables: VariablesOf<TQuery>,
+      options: void | InternalOptions,
+    ) => {
       // Bail out and warn if we're trying to refetch after the component
       // has unmounted
       if (isMountedRef.current !== true) {

package/relay-hooks/useRelayEnvironment.js.flow

@@ -4,18 +4,18 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
 
 import type {IEnvironment} from 'relay-runtime';
 
+const ReactRelayContext = require('./../ReactRelayContext');
 const invariant = require('invariant');
 const {useContext} = require('react');
-const ReactRelayContext = require('react-relay/ReactRelayContext');
 
 function useRelayEnvironment(): IEnvironment {
   const context = useContext(ReactRelayContext);