react-relay 14.1.0 → 16.0.0

package/relay-hooks/react-cache/useRefetchableFragment_REACT_CACHE.js.flow

@@ -4,62 +4,46 @@
  * 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 './useRefetchableFragmentInternal_REACT_CACHE';
-import type {
-  FragmentType,
-  GraphQLTaggedNode,
-  OperationType,
-} from 'relay-runtime';
+import type {ReturnType} from '../useRefetchableFragment';
+import type {FragmentType, RefetchableFragment, Variables} from 'relay-runtime';
 
-const useRefetchableFragmentInternal = require('./useRefetchableFragmentInternal_REACT_CACHE');
 const useStaticFragmentNodeWarning = require('../useStaticFragmentNodeWarning');
+const useRefetchableFragmentInternal = require('./useRefetchableFragmentInternal_REACT_CACHE');
 const {useDebugValue} = require('react');
 const {getFragment} = require('relay-runtime');
 
-type ReturnType<TQuery: OperationType, TKey: ?{+$data?: mixed, ...}> = [
-  // 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,
-  >,
-  RefetchFnDynamic<TQuery, TKey>,
-];
-
 function useRefetchableFragment<
-  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} = useRefetchableFragmentInternal<TQuery, TKey>(
-    fragmentNode,
-    fragmentRef,
-    '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});
   }
-  /* $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];
 }
 
 module.exports = useRefetchableFragment;

package/relay-hooks/useBlockingPaginationFragment.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 {RefetchableFragment} from '../../relay-runtime/util/RelayRuntimeTypes';
 import type {LoadMoreFn, UseLoadMoreFunctionArgs} from './useLoadMoreFunction';
-import type {RefetchFnDynamic} from './useRefetchableFragmentNode';
+import type {Options} from './useRefetchableFragmentNode';
 import type {
+  Disposable,
   FragmentType,
   GraphQLResponse,
-  GraphQLTaggedNode,
   Observer,
-  OperationType,
+  Variables,
 } from 'relay-runtime';
 
 const useLoadMoreFunction = require('./useLoadMoreFunction');
@@ -32,35 +33,54 @@ const {
   getPaginationMetadata,
 } = require('relay-runtime');
 
-export type ReturnType<TQuery: OperationType, TKey, TFragmentData> = {
-  data: TFragmentData,
-  loadNext: LoadMoreFn<TQuery>,
-  loadPrevious: LoadMoreFn<TQuery>,
+type RefetchVariables<TVariables, TKey> =
+  // NOTE: This $Call 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, ... }) => Partial<TVariables>)
+    & (<TFragmentType>(?{ +$fragmentSpreads: TFragmentType, ... }) => TVariables),
+    TKey,
+  >;
+
+type RefetchFnBase<TVars, TOptions> = (
+  vars: TVars,
+  options?: TOptions,
+) => Disposable;
+
+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
+  data: $Call<
+    & (<TFragmentType>( { +$fragmentSpreads: TFragmentType, ... }) =>  TData)
+    & (<TFragmentType>(?{ +$fragmentSpreads: TFragmentType, ... }) => ?TData),
+    TKey,
+  >,
+  loadNext: LoadMoreFn<TVariables>,
+  loadPrevious: LoadMoreFn<TVariables>,
   hasNext: boolean,
   hasPrevious: boolean,
-  refetch: RefetchFnDynamic<TQuery, TKey>,
+  refetch: RefetchFn<TVariables, TKey>,
 };
 
 function useBlockingPaginationFragment<
-  TQuery: OperationType,
-  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
+  TFragmentType: FragmentType,
+  TVariables: Variables,
+  TData,
+  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
 >(
-  fragmentInput: GraphQLTaggedNode,
+  fragmentInput: RefetchableFragment<TFragmentType, TData, TVariables>,
   parentFragmentRef: TKey,
   componentDisplayName: string = 'useBlockingPaginationFragment()',
-): 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,
@@ -69,7 +89,6 @@ function useBlockingPaginationFragment<
 
   const {
     connectionPathInFragmentData,
-    identifierField,
     paginationRequest,
     paginationMetadata,
     stream,
@@ -86,33 +105,38 @@ function useBlockingPaginationFragment<
     refetch,
     disableStoreUpdates,
     enableStoreUpdates,
-  } = useRefetchableFragmentNode<TQuery, TKey>(
-    fragmentNode,
-    parentFragmentRef,
-    componentDisplayName,
-  );
+  } = useRefetchableFragmentNode<
+    {
+      response: TData,
+      variables: TVariables,
+    },
+    {
+      +$data: mixed,
+      ...
+    },
+  >(fragmentNode, parentFragmentRef, componentDisplayName);
   const fragmentIdentifier = getFragmentIdentifier(fragmentNode, fragmentRef);
 
   // Backward pagination
-  const [loadPrevious, hasPrevious, disposeFetchPrevious] = useLoadMore<TQuery>(
-    {
-      componentDisplayName,
-      connectionPathInFragmentData,
-      direction: 'backward',
-      disableStoreUpdates,
-      enableStoreUpdates,
-      fragmentData,
-      fragmentIdentifier,
-      fragmentNode,
-      fragmentRef,
-      identifierField,
-      paginationMetadata,
-      paginationRequest,
-    },
-  );
+  const [loadPrevious, hasPrevious, disposeFetchPrevious] = useLoadMore<
+    TVariables,
+    TData,
+  >({
+    componentDisplayName,
+    connectionPathInFragmentData,
+    direction: 'backward',
+    disableStoreUpdates,
+    enableStoreUpdates,
+    fragmentData,
+    fragmentIdentifier,
+    fragmentNode,
+    fragmentRef,
+    paginationMetadata,
+    paginationRequest,
+  });
 
   // Forward pagination
-  const [loadNext, hasNext, disposeFetchNext] = useLoadMore<TQuery>({
+  const [loadNext, hasNext, disposeFetchNext] = useLoadMore<TVariables, TData>({
     componentDisplayName,
     connectionPathInFragmentData,
     direction: 'forward',
@@ -122,22 +146,23 @@ function useBlockingPaginationFragment<
     fragmentIdentifier,
     fragmentNode,
     fragmentRef,
-    identifierField,
     paginationMetadata,
     paginationRequest,
   });
 
-  const refetchPagination: RefetchFnDynamic<TQuery, TKey> = useCallback(
-    (variables, options) => {
+  const refetchPagination: RefetchFn<TVariables, TKey> = useCallback(
+    (variables: TVariables, options: void | Options) => {
       disposeFetchNext();
       disposeFetchPrevious();
+      // $FlowFixMe[incompatible-variance]
       return refetch(variables, {...options, __environment: undefined});
     },
     [disposeFetchNext, disposeFetchPrevious, refetch],
   );
 
   return {
-    data: fragmentData,
+    // $FlowFixMe[incompatible-cast]
+    data: (fragmentData: TData),
     loadNext,
     loadPrevious,
     hasNext,
@@ -146,7 +171,7 @@ function useBlockingPaginationFragment<
   };
 }
 
-function useLoadMore<TQuery: OperationType>(args: {
+function useLoadMore<TVariables: Variables>(args: {
   disableStoreUpdates: () => void,
   enableStoreUpdates: () => void,
   ...$Exact<
@@ -159,11 +184,13 @@ function useLoadMore<TQuery: OperationType>(args: {
       },
     >,
   >,
-}): [LoadMoreFn<TQuery>, boolean, () => void] {
+}): [LoadMoreFn<TVariables>, boolean, () => void] {
   const {disableStoreUpdates, enableStoreUpdates, ...loadMoreArgs} = args;
-  const [requestPromise, setRequestPromise] = useState(null);
-  const requestPromiseRef = useRef(null);
-  const promiseResolveRef = useRef(null);
+  const [requestPromise, setRequestPromise] = useState<null | Promise<mixed>>(
+    null,
+  );
+  const requestPromiseRef = useRef<null | Promise<mixed>>(null);
+  const promiseResolveRef = useRef<null | (() => void)>(null);
 
   const promiseResolve = () => {
     if (promiseResolveRef.current != null) {
@@ -208,7 +235,7 @@ function useLoadMore<TQuery: OperationType>(args: {
     // and blow away the whole list of items.
     error: promiseResolve,
   };
-  const [loadMore, hasMore, disposeFetch] = useLoadMoreFunction<TQuery>({
+  const [loadMore, hasMore, disposeFetch] = useLoadMoreFunction<TVariables>({
     ...loadMoreArgs,
     observer,
     onReset: handleReset,

package/relay-hooks/useClientQuery.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';
@@ -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/useEntryPointLoader.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';
@@ -134,11 +134,15 @@ function useLoadEntryPoint<
   const entryPointLoaderCallback = useCallback(
     (params: TEntryPointParams) => {
       if (isMountedRef.current) {
-        const updatedEntryPointReference = loadEntryPoint(
-          environmentProvider,
-          entryPoint,
-          params,
-        );
+        const updatedEntryPointReference = loadEntryPoint<
+          TEntryPointParams,
+          TPreloadedQueries,
+          TPreloadedEntryPoints,
+          TRuntimeProps,
+          TExtraProps,
+          TEntryPointComponent,
+          TEntryPoint,
+        >(environmentProvider, entryPoint, params);
         undisposedEntryPointReferencesRef.current.add(
           updatedEntryPointReference,
         );

package/relay-hooks/useFetchTrackingRef.js.flow

@@ -4,16 +4,17 @@
  * 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 {Subscription} from 'relay-runtime';
 
-const {useCallback, useEffect, useRef} = require('react');
+const useUnsafeRef_DEPRECATED = require('./useUnsafeRef_DEPRECATED');
+const {useCallback, useEffect} = require('react');
 
 /**
  * This hook returns a mutable React ref that holds the value of whether a
@@ -33,8 +34,8 @@ function useFetchTrackingRef(): {
   disposeFetch: () => void,
   completeFetch: () => void,
 } {
-  const subscriptionRef = useRef<?Subscription>(null);
-  const isFetchingRef = useRef<?boolean>(false);
+  const subscriptionRef = useUnsafeRef_DEPRECATED<?Subscription>(null);
+  const isFetchingRef = useUnsafeRef_DEPRECATED<?boolean>(false);
 
   const disposeFetch = useCallback(() => {
     if (subscriptionRef.current != null) {

package/relay-hooks/useFragment.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';
@@ -50,7 +50,7 @@ function useFragment_LEGACY(fragment: GraphQLTaggedNode, key: mixed): mixed {
 
   const fragmentNode = getFragment(fragment);
   useStaticFragmentNodeWarning(fragmentNode, 'first argument of useFragment()');
-  const {data} = useFragmentNode<_>(fragmentNode, key, 'useFragment()');
+  const {data} = useFragmentNode<mixed>(fragmentNode, key, 'useFragment()');
   if (__DEV__) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useDebugValue({fragment: fragmentNode.name, data});

package/relay-hooks/useFragmentNode.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';
@@ -15,8 +15,9 @@ import type {ReaderFragment} from 'relay-runtime';
 
 const {getFragmentResourceForEnvironment} = require('./FragmentResource');
 const useRelayEnvironment = require('./useRelayEnvironment');
-const {useEffect, useRef, useState} = require('react');
-const {getFragmentIdentifier} = require('relay-runtime');
+const useUnsafeRef_DEPRECATED = require('./useUnsafeRef_DEPRECATED');
+const {useEffect, useState} = require('react');
+const {RelayFeatureFlags, getFragmentIdentifier} = require('relay-runtime');
 const warning = require('warning');
 
 type ReturnType<TFragmentData: mixed> = {
@@ -33,7 +34,7 @@ function useFragmentNode<TFragmentData: mixed>(
   const environment = useRelayEnvironment();
   const FragmentResource = getFragmentResourceForEnvironment(environment);
 
-  const isMountedRef = useRef(false);
+  const isMountedRef = useUnsafeRef_DEPRECATED(false);
   const [, forceUpdate] = useState(0);
   const fragmentIdentifier = getFragmentIdentifier(fragmentNode, fragmentRef);
 
@@ -45,7 +46,7 @@ function useFragmentNode<TFragmentData: mixed>(
     componentDisplayName,
   );
 
-  const isListeningForUpdatesRef = useRef(true);
+  const isListeningForUpdatesRef = useUnsafeRef_DEPRECATED(true);
   function enableStoreUpdates() {
     isListeningForUpdatesRef.current = true;
     const didMissUpdates =
@@ -98,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/useIsMountedRef.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';

package/relay-hooks/useIsOperationNodeActive.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';

package/relay-hooks/useIsParentQueryActive.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';

package/relay-hooks/useLazyLoadQuery.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';
@@ -64,7 +64,7 @@ function useLazyLoadQuery<TVariables: Variables, TData>(
       ? options.networkCacheConfig
       : {force: true},
   );
-  const data = useLazyLoadQueryNode({
+  const data = useLazyLoadQueryNode<$FlowFixMe>({
     componentDisplayName: 'useLazyLoadQuery()',
     fetchKey: options?.fetchKey,
     fetchObservable: fetchQuery(environment, query),

package/relay-hooks/useLazyLoadQueryNode.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';
@@ -125,7 +125,7 @@ function useLazyLoadQueryNode<TQuery: OperationType>({
   });
 
   const {fragmentNode, fragmentRef} = preparedQueryResult;
-  const {data} = useFragmentNode(
+  const {data} = useFragmentNode<$FlowFixMe>(
     fragmentNode,
     fragmentRef,
     componentDisplayName,

package/relay-hooks/useLoadMoreFunction.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,10 +17,9 @@ import type {
   Disposable,
   GraphQLResponse,
   Observer,
-  OperationType,
   ReaderFragment,
   ReaderPaginationMetadata,
-  VariablesOf,
+  Variables,
 } from 'relay-runtime';
 
 const useFetchTrackingRef = require('./useFetchTrackingRef');
@@ -30,20 +29,21 @@ const useRelayEnvironment = require('./useRelayEnvironment');
 const invariant = require('invariant');
 const {useCallback, useEffect, useState} = require('react');
 const {
-  ConnectionInterface,
   __internal: {fetchQuery},
+  ConnectionInterface,
   createOperationDescriptor,
   getPaginationVariables,
+  getRefetchMetadata,
   getSelector,
   getValueAtPath,
 } = require('relay-runtime');
 const warning = require('warning');
 
-export type LoadMoreFn<TQuery: OperationType> = (
+export type LoadMoreFn<TVariables: Variables> = (
   count: number,
   options?: {
     onComplete?: (Error | null) => void,
-    UNSTABLE_extraVariables?: $Shape<VariablesOf<TQuery>>,
+    UNSTABLE_extraVariables?: Partial<TVariables>,
   },
 ) => Disposable;
 
@@ -54,7 +54,6 @@ export type UseLoadMoreFunctionArgs = {
   fragmentIdentifier: string,
   fragmentData: mixed,
   connectionPathInFragmentData: $ReadOnlyArray<string | number>,
-  identifierField: ?string,
   paginationRequest: ConcreteRequest,
   paginationMetadata: ReaderPaginationMetadata,
   componentDisplayName: string,
@@ -62,9 +61,9 @@ export type UseLoadMoreFunctionArgs = {
   onReset: () => void,
 };
 
-function useLoadMoreFunction<TQuery: OperationType>(
+function useLoadMoreFunction<TVariables: Variables>(
   args: UseLoadMoreFunctionArgs,
-): [LoadMoreFn<TQuery>, boolean, () => void] {
+): [LoadMoreFn<TVariables>, boolean, () => void] {
   const {
     direction,
     fragmentNode,
@@ -77,17 +76,22 @@ function useLoadMoreFunction<TQuery: OperationType>(
     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] =
@@ -123,7 +127,13 @@ function useLoadMoreFunction<TQuery: OperationType>(
   }, [disposeFetch]);
 
   const loadMore = useCallback(
-    (count, options) => {
+    (
+      count: number,
+      options: void | {
+        UNSTABLE_extraVariables?: Partial<TVariables>,
+        onComplete?: (Error | null) => void,
+      },
+    ) => {
       // TODO(T41131846): Fetch/Caching policies for loadMore
 
       const onComplete = options?.onComplete;
@@ -196,7 +206,7 @@ function useLoadMoreFunction<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) {
+      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.
@@ -205,11 +215,12 @@ function useLoadMoreFunction<TQuery: OperationType>(
             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(