react-relay 15.0.0 → 16.1.0

package/relay-hooks/{react-cache/usePaginationFragment_REACT_CACHE.js.flow → experimental/usePaginationFragment_EXPERIMENTAL.js.flow}

@@ -12,22 +12,20 @@
 'use strict';
 
 import type {LoadMoreFn, UseLoadMoreFunctionArgs} from '../useLoadMoreFunction';
-import type {Options} from './useRefetchableFragmentInternal_REACT_CACHE';
-import type {RefetchFnDynamic} from './useRefetchableFragmentInternal_REACT_CACHE';
+import type {ReturnType} from '../usePaginationFragment';
+import type {Options} from './useRefetchableFragmentInternal_EXPERIMENTAL';
 import type {
   FragmentType,
   GraphQLResponse,
-  GraphQLTaggedNode,
   Observer,
-  OperationType,
+  RefetchableFragment,
   Variables,
 } from 'relay-runtime';
-import type {VariablesOf} from 'relay-runtime/util/RelayRuntimeTypes';
 
 const useLoadMoreFunction = require('../useLoadMoreFunction');
 const useRelayEnvironment = require('../useRelayEnvironment');
 const useStaticFragmentNodeWarning = require('../useStaticFragmentNodeWarning');
-const useRefetchableFragmentInternal = require('./useRefetchableFragmentInternal_REACT_CACHE');
+const useRefetchableFragmentInternal = require('./useRefetchableFragmentInternal_EXPERIMENTAL');
 const {useCallback, useDebugValue, useState} = require('react');
 const {
   getFragment,
@@ -35,36 +33,15 @@ const {
   getPaginationMetadata,
 } = require('relay-runtime');
 
-export type ReturnType<TQuery: OperationType, TKey, TFragmentData> = {
-  data: TFragmentData,
-  loadNext: LoadMoreFn<TQuery['variables']>,
-  loadPrevious: LoadMoreFn<TQuery['variables']>,
-  hasNext: boolean,
-  hasPrevious: boolean,
-  isLoadingNext: boolean,
-  isLoadingPrevious: boolean,
-  refetch: RefetchFnDynamic<TQuery, 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,
-  // 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),
-    TKey,
-  >,
-> {
+): ReturnType<TVariables, TData, TKey> {
   const fragmentNode = getFragment(fragmentInput);
   useStaticFragmentNodeWarning(
     fragmentNode,
@@ -72,22 +49,18 @@ function usePaginationFragment<
   );
   const componentDisplayName = 'usePaginationFragment()';
 
-  const {
-    connectionPathInFragmentData,
-    paginationRequest,
-    paginationMetadata,
-    identifierField,
-  } = getPaginationMetadata(fragmentNode, componentDisplayName);
+  const {connectionPathInFragmentData, paginationRequest, paginationMetadata} =
+    getPaginationMetadata(fragmentNode, componentDisplayName);
 
   const {fragmentData, fragmentRef, refetch} = useRefetchableFragmentInternal<
-    TQuery,
-    TKey,
+    {variables: TVariables, response: TData},
+    {data?: TData},
   >(fragmentNode, parentFragmentRef, componentDisplayName);
   const fragmentIdentifier = getFragmentIdentifier(fragmentNode, fragmentRef);
 
   // Backward pagination
   const [loadPrevious, hasPrevious, isLoadingPrevious, disposeFetchPrevious] =
-    useLoadMore<TQuery['variables']>({
+    useLoadMore<TVariables>({
       componentDisplayName,
       connectionPathInFragmentData,
       direction: 'backward',
@@ -95,29 +68,26 @@ function usePaginationFragment<
       fragmentIdentifier,
       fragmentNode,
       fragmentRef,
-      identifierField,
       paginationMetadata,
       paginationRequest,
     });
 
   // Forward pagination
-  const [loadNext, hasNext, isLoadingNext, disposeFetchNext] = useLoadMore<
-    TQuery['variables'],
-  >({
-    componentDisplayName,
-    connectionPathInFragmentData,
-    direction: 'forward',
-    fragmentData,
-    fragmentIdentifier,
-    fragmentNode,
-    fragmentRef,
-    identifierField,
-    paginationMetadata,
-    paginationRequest,
-  });
+  const [loadNext, hasNext, isLoadingNext, disposeFetchNext] =
+    useLoadMore<TVariables>({
+      componentDisplayName,
+      connectionPathInFragmentData,
+      direction: 'forward',
+      fragmentData,
+      fragmentIdentifier,
+      fragmentNode,
+      fragmentRef,
+      paginationMetadata,
+      paginationRequest,
+    });
 
-  const refetchPagination: RefetchFnDynamic<TQuery, TKey> = useCallback(
-    (variables: VariablesOf<TQuery>, options: void | Options) => {
+  const refetchPagination = useCallback(
+    (variables: TVariables, options: void | Options) => {
       disposeFetchNext();
       disposeFetchPrevious();
       return refetch(variables, {...options, __environment: undefined});
@@ -137,6 +107,7 @@ function usePaginationFragment<
     });
   }
   return {
+    // $FlowFixMe[incompatible-return]
     data: fragmentData,
     loadNext,
     loadPrevious,

package/relay-hooks/{react-cache/useRefetchableFragmentInternal_REACT_CACHE.js.flow → experimental/useRefetchableFragmentInternal_EXPERIMENTAL.js.flow}

@@ -11,6 +11,7 @@
 
 'use strict';
 
+import type {RefetchableIdentifierInfo} from '../../../relay-runtime/util/ReaderNode';
 import type {LoaderFn} from '../useQueryLoader';
 import type {
   ConcreteRequest,
@@ -30,8 +31,8 @@ const {getQueryResourceForEnvironment} = require('../QueryResource');
 const useIsMountedRef = require('../useIsMountedRef');
 const useQueryLoader = require('../useQueryLoader');
 const useRelayEnvironment = require('../useRelayEnvironment');
-const readFragmentInternal = require('./readFragmentInternal_REACT_CACHE');
-const useFragmentInternal = require('./useFragmentInternal_REACT_CACHE');
+const readFragmentInternal = require('./readFragmentInternal_EXPERIMENTAL');
+const useFragmentInternal = require('./useFragmentInternal_EXPERIMENTAL');
 const invariant = require('invariant');
 const {useCallback, useContext, useReducer} = require('react');
 const {
@@ -54,16 +55,13 @@ export type RefetchFn<
 //    /nullable/.
 //  - Or, expects /a subset/ of the query variables if the provided key type is
 //    /non-null/.
-// prettier-ignore
 export type RefetchFnDynamic<
   TQuery: OperationType,
-  TKey: ?{ +$data?: mixed, ... },
+  TKey: ?{+$data?: mixed, ...},
   TOptions = Options,
-> = $Call<
-  & (( { +$data?: mixed, ... }) => RefetchFnInexact<TQuery, TOptions>)
-  & ((?{ +$data?: mixed, ... }) => RefetchFnExact<TQuery, TOptions>),
-  TKey
->;
+> = [TKey] extends [{+$data?: mixed, ...}]
+  ? RefetchFnInexact<TQuery, TOptions>
+  : RefetchFnExact<TQuery, TOptions>;
 
 export type ReturnType<
   TQuery: OperationType,
@@ -98,7 +96,7 @@ type RefetchFnExact<TQuery: OperationType, TOptions = Options> = RefetchFnBase<
 type RefetchFnInexact<
   TQuery: OperationType,
   TOptions = Options,
-> = RefetchFnBase<Partial<VariablesOf<TQuery>>, TOptions>;
+> = RefetchFnBase<$ReadOnly<Partial<VariablesOf<TQuery>>>, TOptions>;
 
 type Action =
   | {
@@ -171,7 +169,7 @@ function useRefetchableFragmentNode<
   componentDisplayName: string,
 ): ReturnType<TQuery, TKey, InternalOptions> {
   const parentEnvironment = useRelayEnvironment();
-  const {refetchableRequest, fragmentRefPathInResponse, identifierField} =
+  const {refetchableRequest, fragmentRefPathInResponse, identifierInfo} =
     getRefetchMetadata(fragmentNode, componentDisplayName);
   const fragmentIdentifier = getFragmentIdentifier(
     fragmentNode,
@@ -236,6 +234,7 @@ function useRefetchableFragmentNode<
       debugPreviousIDAndTypename = debugFunctions.getInitialIDAndType(
         refetchQuery.request.variables,
         fragmentRefPathInResponse,
+        identifierInfo?.identifierQueryVariableName,
         environment,
       );
     }
@@ -343,7 +342,7 @@ function useRefetchableFragmentNode<
     fragmentIdentifier,
     fragmentNode,
     fragmentRefPathInResponse,
-    identifierField,
+    identifierInfo,
     loadQuery,
     parentFragmentRef,
     refetchableRequest,
@@ -351,6 +350,7 @@ function useRefetchableFragmentNode<
   return {
     fragmentData,
     fragmentRef,
+    // $FlowFixMe[incompatible-return] RefetchFn not compatible with RefetchFnDynamic
     refetch,
   };
 }
@@ -377,17 +377,17 @@ function useRefetchFunction<TQuery: OperationType>(
   fragmentIdentifier: string,
   fragmentNode: ReaderFragment,
   fragmentRefPathInResponse: $ReadOnlyArray<string | number>,
-  identifierField: ?string,
+  identifierInfo: ?RefetchableIdentifierInfo,
   loadQuery: LoaderFn<TQuery>,
   parentFragmentRef: mixed,
   refetchableRequest: ConcreteRequest,
 ): RefetchFn<TQuery, InternalOptions> {
   const isMountedRef = useIsMountedRef();
   const identifierValue =
-    identifierField != null &&
+    identifierInfo?.identifierField != null &&
     fragmentData != null &&
     typeof fragmentData === 'object'
-      ? fragmentData[identifierField]
+      ? fragmentData[identifierInfo.identifierField]
       : null;
   return useCallback(
     (
@@ -454,8 +454,10 @@ function useRefetchFunction<TQuery: OperationType>(
       // If the query needs an identifier value ('id' or similar) and one
       // was not explicitly provided, read it from the fragment data.
       if (
-        identifierField != null &&
-        !providedRefetchVariables.hasOwnProperty('id')
+        identifierInfo != null &&
+        !providedRefetchVariables.hasOwnProperty(
+          identifierInfo.identifierQueryVariableName,
+        )
       ) {
         // @refetchable fragments are guaranteed to have an `id` selection
         // if the type is Node, implements Node, or is @fetchable. Double-check
@@ -465,21 +467,25 @@ function useRefetchFunction<TQuery: OperationType>(
             false,
             'Relay: Expected result to have a string  ' +
               '`%s` in order to refetch, got `%s`.',
-            identifierField,
+            identifierInfo.identifierField,
             identifierValue,
           );
         }
-        (refetchVariables: $FlowFixMe).id = identifierValue;
+        (refetchVariables: $FlowFixMe)[
+          identifierInfo.identifierQueryVariableName
+        ] = identifierValue;
       }
 
       const refetchQuery = createOperationDescriptor(
         refetchableRequest,
         refetchVariables,
-        {force: true},
+        {
+          force: true,
+        },
       );
 
       // We call loadQuery which will start a network request if necessary
-      // and update the querRef from useQueryLoader.
+      // and update the queryRef from useQueryLoader.
       // Note the following:
       // - loadQuery will dispose of any previously refetched queries.
       // - We use the variables extracted off the OperationDescriptor
@@ -518,10 +524,11 @@ if (__DEV__) {
     getInitialIDAndType(
       memoRefetchVariables: ?Variables,
       fragmentRefPathInResponse: $ReadOnlyArray<string | number>,
+      identifierQueryVariableName: ?string,
       environment: IEnvironment,
     ): ?DebugIDandTypename {
       const {Record} = require('relay-runtime');
-      const id = memoRefetchVariables?.id;
+      const id = memoRefetchVariables?.[identifierQueryVariableName ?? 'id'];
       if (
         fragmentRefPathInResponse.length !== 1 ||
         fragmentRefPathInResponse[0] !== 'node' ||
@@ -531,7 +538,7 @@ if (__DEV__) {
       }
       const recordSource = environment.getStore().getSource();
       const record = recordSource.get(id);
-      const typename = record && Record.getType(record);
+      const typename = record == null ? null : Record.getType(record);
       if (typename == null) {
         return null;
       }

package/relay-hooks/experimental/useRefetchableFragment_EXPERIMENTAL.js.flow

@@ -0,0 +1,49 @@
+/**
+ * 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 {ReturnType} from '../useRefetchableFragment';
+import type {FragmentType, RefetchableFragment, Variables} from 'relay-runtime';
+
+const useStaticFragmentNodeWarning = require('../useStaticFragmentNodeWarning');
+const useRefetchableFragmentInternal = require('./useRefetchableFragmentInternal_EXPERIMENTAL');
+const {useDebugValue} = require('react');
+const {getFragment} = require('relay-runtime');
+
+function useRefetchableFragment<
+  TFragmentType: FragmentType,
+  TVariables: Variables,
+  TData,
+  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
+>(
+  fragmentInput: RefetchableFragment<TFragmentType, TData, TVariables>,
+  fragmentRef: TKey,
+): ReturnType<TVariables, TData, TKey> {
+  const fragmentNode = getFragment(fragmentInput);
+  useStaticFragmentNodeWarning(
+    fragmentNode,
+    'first argument of useRefetchableFragment()',
+  );
+  const {fragmentData, refetch} = useRefetchableFragmentInternal<
+    {variables: TVariables, response: TData},
+    {data?: TData},
+  >(fragmentNode, fragmentRef, 'useRefetchableFragment()');
+  if (__DEV__) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useDebugValue({fragment: fragmentNode.name, data: fragmentData});
+  }
+  // $FlowFixMe[incompatible-return]
+  // $FlowFixMe[prop-missing]
+  return [fragmentData, refetch];
+}
+
+module.exports = useRefetchableFragment;

package/relay-hooks/loadEntryPoint.js.flow

@@ -46,8 +46,10 @@ function loadEntryPoint<
   }
   const preloadProps = entryPoint.getPreloadProps(entryPointParams);
   const {queries, entryPoints, extraProps} = preloadProps;
-  const preloadedQueries: $Shape<TPreloadedQueries> = {};
-  const preloadedEntryPoints: $Shape<TPreloadedEntryPoints> = {};
+  // $FlowFixMe[incompatible-type]
+  const preloadedQueries: Partial<TPreloadedQueries> = {};
+  // $FlowFixMe[incompatible-type]
+  const preloadedEntryPoints: Partial<TPreloadedEntryPoints> = {};
   if (queries != null) {
     const queriesPropNames = Object.keys(queries);
     queriesPropNames.forEach(queryPropName => {

package/relay-hooks/loadQuery.js.flow

@@ -24,6 +24,7 @@ import type {
   IEnvironment,
   OperationDescriptor,
   OperationType,
+  Query,
   RequestIdentifier,
   RequestParameters,
 } from 'relay-runtime';
@@ -56,12 +57,31 @@ function useTrackLoadQueryInRender() {
   }
 }
 
+type QueryType<T> = T extends Query<infer V, infer D, infer RR>
+  ? {
+      variables: V,
+      response: D,
+      rawResponse?: $NonMaybeType<RR>,
+    }
+  : $Call<<T>(PreloadableConcreteRequest<T>) => T, T>;
+
+declare function loadQuery<
+  T,
+  TEnvironmentProviderOptions = EnvironmentProviderOptions,
+>(
+  environment: IEnvironment,
+  preloadableRequest: T,
+  variables: QueryType<T>['variables'],
+  options?: ?LoadQueryOptions,
+  environmentProviderOptions?: ?TEnvironmentProviderOptions,
+): PreloadedQueryInner<QueryType<T>, TEnvironmentProviderOptions>;
+
 function loadQuery<
   TQuery: OperationType,
   TEnvironmentProviderOptions = EnvironmentProviderOptions,
 >(
   environment: IEnvironment,
-  preloadableRequest: GraphQLTaggedNode | PreloadableConcreteRequest<TQuery>,
+  preloadableRequest: PreloadableConcreteRequest<TQuery>,
   variables: TQuery['variables'],
   options?: ?LoadQueryOptions,
   environmentProviderOptions?: ?TEnvironmentProviderOptions,

package/relay-hooks/prepareEntryPoint_DEPRECATED.js.flow

@@ -45,8 +45,10 @@ function prepareEntryPoint<
   }
   const preloadProps = entryPoint.getPreloadProps(entryPointParams);
   const {queries, entryPoints} = preloadProps;
-  const preloadedQueries: $Shape<TPreloadedQueries> = {};
-  const preloadedEntryPoints: $Shape<TPreloadedEntryPoints> = {};
+  // $FlowFixMe[incompatible-type]
+  const preloadedQueries: Partial<TPreloadedQueries> = {};
+  // $FlowFixMe[incompatible-type]
+  const preloadedEntryPoints: Partial<TPreloadedEntryPoints> = {};
   if (queries != null) {
     const queriesPropNames = Object.keys(queries);
     queriesPropNames.forEach(queryPropName => {

package/relay-hooks/useBlockingPaginationFragment.js.flow

@@ -34,15 +34,12 @@ const {
 } = require('relay-runtime');
 
 type RefetchVariables<TVariables, TKey> =
-  // NOTE: This $Call ensures that the type of the variables is either:
+  // NOTE: This type ensures that the type of the variables is either:
   //   - nullable if the provided ref type is non-nullable
   //   - non-nullable if the provided ref type is nullable, and the caller need to provide the full set of variables
-  // prettier-ignore
-  $Call<
-    & (<TFragmentType>( { +$fragmentSpreads: TFragmentType, ... }) => $Shape<TVariables>)
-    & (<TFragmentType>(?{ +$fragmentSpreads: TFragmentType, ... }) => TVariables),
-    TKey,
-  >;
+  [+key: TKey] extends [+key: {+$fragmentSpreads: mixed, ...}]
+    ? Partial<TVariables>
+    : TVariables;
 
 type RefetchFnBase<TVars, TOptions> = (
   vars: TVars,
@@ -55,15 +52,12 @@ type RefetchFn<TVariables, TKey, TOptions = Options> = RefetchFnBase<
 >;
 
 type ReturnType<TVariables, TData, TKey> = {
-  // NOTE: This $Call ensures that the type of the returned data is either:
+  // NOTE: This rtpw 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,
-  >,
+  data: [+key: TKey] extends [+key: {+$fragmentSpreads: mixed, ...}]
+    ? TData
+    : ?TData,
   loadNext: LoadMoreFn<TVariables>,
   loadPrevious: LoadMoreFn<TVariables>,
   hasNext: boolean,
@@ -89,7 +83,6 @@ function useBlockingPaginationFragment<
 
   const {
     connectionPathInFragmentData,
-    identifierField,
     paginationRequest,
     paginationMetadata,
     stream,
@@ -132,7 +125,6 @@ function useBlockingPaginationFragment<
     fragmentIdentifier,
     fragmentNode,
     fragmentRef,
-    identifierField,
     paginationMetadata,
     paginationRequest,
   });
@@ -148,7 +140,6 @@ function useBlockingPaginationFragment<
     fragmentIdentifier,
     fragmentNode,
     fragmentRef,
-    identifierField,
     paginationMetadata,
     paginationRequest,
   });
@@ -157,6 +148,7 @@ function useBlockingPaginationFragment<
     (variables: TVariables, options: void | Options) => {
       disposeFetchNext();
       disposeFetchPrevious();
+      // $FlowFixMe[incompatible-variance]
       return refetch(variables, {...options, __environment: undefined});
     },
     [disposeFetchNext, disposeFetchPrevious, refetch],
@@ -164,6 +156,7 @@ function useBlockingPaginationFragment<
 
   return {
     // $FlowFixMe[incompatible-cast]
+    // $FlowFixMe[incompatible-return]
     data: (fragmentData: TData),
     loadNext,
     loadPrevious,

package/relay-hooks/useClientQuery.js.flow

@@ -20,8 +20,8 @@ const useLazyLoadQuery = require('./useLazyLoadQuery');
  * These queries are consist of queries for client-only data,
  * schematized via local schema extensions and/or Relay resolvers.
  */
-function useClientQuery<TVariables: Variables, TData>(
-  gqlQuery: ClientQuery<TVariables, TData>,
+function useClientQuery<TVariables: Variables, TData, TRawResponse>(
+  gqlQuery: ClientQuery<TVariables, TData, TRawResponse>,
   variables: TVariables,
   options?: {
     UNSTABLE_renderPolicy?: RenderPolicy,

package/relay-hooks/useFragmentNode.js.flow

@@ -17,7 +17,7 @@ const {getFragmentResourceForEnvironment} = require('./FragmentResource');
 const useRelayEnvironment = require('./useRelayEnvironment');
 const useUnsafeRef_DEPRECATED = require('./useUnsafeRef_DEPRECATED');
 const {useEffect, useState} = require('react');
-const {getFragmentIdentifier} = require('relay-runtime');
+const {RelayFeatureFlags, getFragmentIdentifier} = require('relay-runtime');
 const warning = require('warning');
 
 type ReturnType<TFragmentData: mixed> = {
@@ -99,7 +99,7 @@ function useFragmentNode<TFragmentData: mixed>(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [environment, fragmentIdentifier]);
 
-  if (__DEV__) {
+  if (RelayFeatureFlags.LOG_MISSING_RECORDS_IN_PROD || __DEV__) {
     if (
       fragmentRef != null &&
       (fragmentResult.data === undefined ||

package/relay-hooks/useLazyLoadQueryNode.js.flow

@@ -19,7 +19,9 @@ import type {
   OperationType,
   RenderPolicy,
 } from 'relay-runtime';
+import type {ReaderFragment} from 'relay-runtime/util/ReaderNode';
 
+const HooksImplementation = require('./HooksImplementation');
 const ProfilerContext = require('./ProfilerContext');
 const {
   getQueryCacheIdentifier,
@@ -125,7 +127,7 @@ function useLazyLoadQueryNode<TQuery: OperationType>({
   });
 
   const {fragmentNode, fragmentRef} = preparedQueryResult;
-  const {data} = useFragmentNode<$FlowFixMe>(
+  const data = useFragmentNodeImpl(
     fragmentNode,
     fragmentRef,
     componentDisplayName,
@@ -133,4 +135,18 @@ function useLazyLoadQueryNode<TQuery: OperationType>({
   return data;
 }
 
+function useFragmentNodeImpl(
+  fragment: ReaderFragment,
+  key: mixed,
+  componentDisplayName: string,
+): mixed {
+  const impl = HooksImplementation.get();
+  if (impl && impl.useFragment__internal) {
+    return impl.useFragment__internal(fragment, key, componentDisplayName);
+  } else {
+    const {data} = useFragmentNode<mixed>(fragment, key, componentDisplayName);
+    return data;
+  }
+}
+
 module.exports = useLazyLoadQueryNode;

package/relay-hooks/useLoadMoreFunction.js.flow

@@ -33,6 +33,7 @@ const {
   ConnectionInterface,
   createOperationDescriptor,
   getPaginationVariables,
+  getRefetchMetadata,
   getSelector,
   getValueAtPath,
 } = require('relay-runtime');
@@ -42,7 +43,7 @@ export type LoadMoreFn<TVariables: Variables> = (
   count: number,
   options?: {
     onComplete?: (Error | null) => void,
-    UNSTABLE_extraVariables?: $Shape<TVariables>,
+    UNSTABLE_extraVariables?: Partial<TVariables>,
   },
 ) => Disposable;
 
@@ -53,7 +54,6 @@ export type UseLoadMoreFunctionArgs = {
   fragmentIdentifier: string,
   fragmentData: mixed,
   connectionPathInFragmentData: $ReadOnlyArray<string | number>,
-  identifierField: ?string,
   paginationRequest: ConcreteRequest,
   paginationMetadata: ReaderPaginationMetadata,
   componentDisplayName: string,
@@ -76,17 +76,22 @@ function useLoadMoreFunction<TVariables: Variables>(
     componentDisplayName,
     observer,
     onReset,
-    identifierField,
   } = args;
   const environment = useRelayEnvironment();
   const {isFetchingRef, startFetch, disposeFetch, completeFetch} =
     useFetchTrackingRef();
+
+  const {identifierInfo} = getRefetchMetadata(
+    fragmentNode,
+    componentDisplayName,
+  );
   const identifierValue =
-    identifierField != null &&
+    identifierInfo?.identifierField != null &&
     fragmentData != null &&
     typeof fragmentData === 'object'
-      ? fragmentData[identifierField]
+      ? fragmentData[identifierInfo.identifierField]
       : null;
+
   const isMountedRef = useIsMountedRef();
   const [mirroredEnvironment, setMirroredEnvironment] = useState(environment);
   const [mirroredFragmentIdentifier, setMirroredFragmentIdentifier] =
@@ -125,7 +130,7 @@ function useLoadMoreFunction<TVariables: Variables>(
     (
       count: number,
       options: void | {
-        UNSTABLE_extraVariables?: $Shape<TVariables>,
+        UNSTABLE_extraVariables?: Partial<TVariables>,
         onComplete?: (Error | null) => void,
       },
     ) => {
@@ -201,7 +206,7 @@ function useLoadMoreFunction<TVariables: Variables>(
 
       // If the query needs an identifier value ('id' or similar) and one
       // was not explicitly provided, read it from the fragment data.
-      if (identifierField != null) {
+      if (identifierInfo != null) {
         // @refetchable fragments are guaranteed to have an `id` selection
         // if the type is Node, implements Node, or is @fetchable. Double-check
         // that there actually is a value at runtime.
@@ -210,11 +215,12 @@ function useLoadMoreFunction<TVariables: Variables>(
             false,
             'Relay: Expected result to have a string  ' +
               '`%s` in order to refetch, got `%s`.',
-            identifierField,
+            identifierInfo.identifierField,
             identifierValue,
           );
         }
-        paginationVariables.id = identifierValue;
+        paginationVariables[identifierInfo.identifierQueryVariableName] =
+          identifierValue;
       }
 
       const paginationQuery = createOperationDescriptor(