react-relay 15.0.0 → 16.0.0

package/relay-hooks/LazyLoadEntryPointContainer_DEPRECATED.react.js.flow

@@ -85,8 +85,10 @@ function prepareEntryPoint<
   }
   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/NestedRelayEntryPointBuilderUtils.js.flow

@@ -0,0 +1,51 @@
+/**
+ * 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 {
+  InternalEntryPointRepresentation,
+  ThinNestedEntryPointParams,
+} from './EntryPointTypes.flow';
+
+/**
+ * This is an identity function to construct a type safe nested entrypoint.
+ * By calling this function, we ensure that the type of entryPointParams matches
+ * exactly the type of preloadProps of the entrypoint.
+ *
+ * We make the type of `ThinNestedEntryPointParams` opaque, so that the only way
+ * to construct a `ThinNestedEntryPointParams` is by calling this function.
+ */
+declare function NestedRelayEntryPoint<
+  TEntryPointParams,
+  TPreloadedQueries,
+  TPreloadedEntryPoints,
+  TRuntimeProps,
+  TExtraProps,
+>(
+  $ReadOnly<{
+    entryPoint: InternalEntryPointRepresentation<
+      TEntryPointParams,
+      TPreloadedQueries,
+      TPreloadedEntryPoints,
+      TRuntimeProps,
+      TExtraProps,
+    >,
+    entryPointParams: TEntryPointParams,
+  }>,
+): ThinNestedEntryPointParams;
+
+// eslint-disable-next-line no-redeclare
+function NestedRelayEntryPoint<P>(params: P): P {
+  return params;
+}
+
+export {NestedRelayEntryPoint};

package/relay-hooks/__flowtests__/EntryPointTypes/NestedEntrypoints-flowtest.js.flow

@@ -18,6 +18,8 @@ import type {
 } from '../../EntryPointTypes.flow';
 import type {JSResourceReference} from 'JSResourceReference';
 
+import {NestedRelayEntryPoint} from '../../NestedRelayEntryPointBuilderUtils';
+
 declare function mockJSResource<TModule>(
   module: TModule,
 ): JSResourceReference<TModule>;
@@ -65,14 +67,14 @@ type BadParentEntrypointParams = $ReadOnly<{}>;
   getPreloadProps(_params: BadParentEntrypointParams) {
     return {
       entryPoints: {
-        nestedComponent: {
-          entryPoint: NestedEntryPoint,
+        nestedComponent: NestedRelayEntryPoint({
           /**
            $FlowExpectedError The entryPointParams here should be of type
             NestedEntrypointPreloadParams, but it does not contain subEntrypointPreloadParam
           */
+          entryPoint: NestedEntryPoint,
           entryPointParams: Object.freeze({}),
-        },
+        }),
       },
     };
   },
@@ -90,13 +92,13 @@ type GoodParentEntrypointParams = $ReadOnly<{}>;
   getPreloadProps(_params: GoodParentEntrypointParams) {
     return {
       entryPoints: {
-        nestedComponent: {
+        nestedComponent: NestedRelayEntryPoint({
           entryPoint: NestedEntryPoint,
           // No flow error since this matches NestedEntrypointPreloadParams
           entryPointParams: {
             subEntrypointPreloadParam: 'test',
           },
-        },
+        }),
       },
     };
   },

package/relay-hooks/__flowtests__/useBlockingPaginationFragment-flowtest.js.flow

@@ -45,6 +45,8 @@ type ExpectedReturnType<
 /* eslint-disable react-hooks/rules-of-hooks */
 
 // Nullability of returned data type is correct
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-cast]
 (useBlockingPaginationFragment(
   refetchableFragmentInput,
   keyNonNullable,
@@ -112,9 +114,12 @@ const {loadNext} = useBlockingPaginationFragment(
 );
 // Accepts extraVariables
 loadNext(10, {
+  // $FlowFixMe[prop-missing]
+  // $FlowFixMe[incompatible-call]
   UNSTABLE_extraVariables: extraVariables,
 });
 
+// $FlowFixMe[prop-missing]
 loadNext(10, {
   // $FlowExpectedError: doesn't accept variables not available in the Flow type
   UNSTABLE_extraVariables: invalidVariables,

package/relay-hooks/__flowtests__/usePaginationFragment-flowtest.js.flow

@@ -47,6 +47,8 @@ type ExpectedReturnType<
 /* eslint-disable react-hooks/rules-of-hooks */
 
 // Nullability of returned data type is correct
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-cast]
 (usePaginationFragment(
   refetchableFragmentInput,
   keyNonNullable,
@@ -113,9 +115,12 @@ const {loadNext} = usePaginationFragment(
 );
 // Accepts extraVariables
 loadNext(10, {
+  // $FlowFixMe[prop-missing]
+  // $FlowFixMe[incompatible-call]
   UNSTABLE_extraVariables: extraVariables,
 });
 
+// $FlowFixMe[prop-missing]
 loadNext(10, {
   // $FlowExpectedError: doesn't accept variables not available in the Flow type
   UNSTABLE_extraVariables: invalidVariables,

package/relay-hooks/__flowtests__/useRefetchableFragment-flowtest.js.flow

@@ -31,6 +31,8 @@ import {
 /* eslint-disable react-hooks/rules-of-hooks */
 
 // Nullability of returned data type is correct
+// $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-cast]
 (useRefetchableFragment(refetchableFragmentInput, keyNonNullable): [
   NonNullableData,
   FetchFn<QueryVariablesSubset>,

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/react-cache/readFragmentInternal_REACT_CACHE.js.flow

@@ -27,6 +27,7 @@ const {getQueryResourceForEnvironment} = require('../QueryResource');
 const invariant = require('invariant');
 const {
   __internal: {fetchQuery: fetchQueryInternal},
+  RelayFeatureFlags,
   createOperationDescriptor,
   getPendingOperationsForFragment,
   getSelector,
@@ -268,7 +269,7 @@ function readFragmentInternal_REACT_CACHE(
     data = state.snapshots.map(s => s.data);
   }
 
-  if (__DEV__) {
+  if (RelayFeatureFlags.LOG_MISSING_RECORDS_IN_PROD || __DEV__) {
     if (
       fragmentRef != null &&
       (data === undefined ||

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

@@ -32,6 +32,7 @@ const invariant = require('invariant');
 const {useDebugValue, useEffect, useMemo, useRef, useState} = require('react');
 const {
   __internal: {fetchQuery: fetchQueryInternal},
+  RelayFeatureFlags,
   areEqualSelectors,
   createOperationDescriptor,
   getPendingOperationsForFragment,
@@ -256,7 +257,17 @@ function subscribeToSnapshot(
           prevState.kind !== 'singular' ||
           prevState.snapshot.selector !== latestSnapshot.selector
         ) {
-          return prevState;
+          const updates = handleMissedUpdates(environment, prevState);
+          if (updates != null) {
+            const [dataChanged, nextState] = updates;
+            environment.__log({
+              name: 'useFragment.subscription.missedUpdates',
+              hasDataChanges: dataChanged,
+            });
+            return dataChanged ? nextState : prevState;
+          } else {
+            return prevState;
+          }
         }
         return {
           kind: 'singular',
@@ -279,7 +290,17 @@ function subscribeToSnapshot(
             prevState.kind !== 'plural' ||
             prevState.snapshots[index]?.selector !== latestSnapshot.selector
           ) {
-            return prevState;
+            const updates = handleMissedUpdates(environment, prevState);
+            if (updates != null) {
+              const [dataChanged, nextState] = updates;
+              environment.__log({
+                name: 'useFragment.subscription.missedUpdates',
+                hasDataChanges: dataChanged,
+              });
+              return dataChanged ? nextState : prevState;
+            } else {
+              return prevState;
+            }
           }
           const updated = [...prevState.snapshots];
           updated[index] = latestSnapshot;
@@ -328,7 +349,6 @@ function useFragmentInternal_REACT_CACHE(
   fragmentRef: mixed,
   hookDisplayName: string,
   queryOptions?: FragmentQueryOptions,
-  fragmentKey?: string,
 ): ?SelectorData | Array<?SelectorData> {
   const fragmentSelector = useMemo(
     () => getSelector(fragmentNode, fragmentRef),
@@ -343,7 +363,6 @@ function useFragmentInternal_REACT_CACHE(
       'Relay: Expected fragment pointer%s for fragment `%s` to be ' +
         'an array, instead got `%s`. Remove `@relay(plural: true)` ' +
         'from fragment `%s` to allow the prop to be an object.',
-      fragmentKey != null ? ` for key \`${fragmentKey}\`` : '',
       fragmentNode.name,
       typeof fragmentRef,
       fragmentNode.name,
@@ -354,7 +373,6 @@ function useFragmentInternal_REACT_CACHE(
       'Relay: Expected fragment pointer%s for fragment `%s` not to be ' +
         'an array, instead got `%s`. Add `@relay(plural: true)` ' +
         'to fragment `%s` to allow the prop to be an array.',
-      fragmentKey != null ? ` for key \`${fragmentKey}\`` : '',
       fragmentNode.name,
       typeof fragmentRef,
       fragmentNode.name,
@@ -378,7 +396,6 @@ function useFragmentInternal_REACT_CACHE(
     fragmentNode.name,
     hookDisplayName,
     fragmentNode.name,
-    fragmentKey == null ? 'a fragment reference' : `the \`${fragmentKey}\``,
     hookDisplayName,
   );
 
@@ -505,11 +522,12 @@ function useFragmentInternal_REACT_CACHE(
         throw pendingOperationsResult.promise;
       }
     }
-    // Report required fields only if we're not suspending, since that means
-    // they're missing even though we are out of options for possibly fetching them:
-    handlePotentialSnapshotErrorsForState(environment, state);
   }
 
+  // Report required fields only if we're not suspending, since that means
+  // they're missing even though we are out of options for possibly fetching them:
+  handlePotentialSnapshotErrorsForState(environment, state);
+
   useEffect(() => {
     // Check for updates since the state was rendered
     let currentState = subscribedState;
@@ -565,7 +583,7 @@ function useFragmentInternal_REACT_CACHE(
     data = state.snapshot.data;
   }
 
-  if (__DEV__) {
+  if (RelayFeatureFlags.LOG_MISSING_RECORDS_IN_PROD || __DEV__) {
     if (
       fragmentRef != null &&
       (data === undefined ||

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

@@ -30,23 +30,17 @@ declare function useFragment<TFragmentType: FragmentType, TData>(
   key: HasSpread<TFragmentType>,
 ): TData;
 
-// if the key is nullable, return nullable value
-declare function useFragment<TFragmentType: FragmentType, TData>(
-  fragment: Fragment<TFragmentType, TData>,
-  key: ?HasSpread<TFragmentType>,
-): ?TData;
-
 // if the key is a non-nullable array of keys, return non-nullable array
 declare function useFragment<TFragmentType: FragmentType, TData>(
   fragment: Fragment<TFragmentType, TData>,
   key: $ReadOnlyArray<HasSpread<TFragmentType>>,
 ): TData;
 
-// if the key is a nullable array of keys, return nullable array
+// if the key is null/void, return null/void value
 declare function useFragment<TFragmentType: FragmentType, TData>(
   fragment: Fragment<TFragmentType, TData>,
-  key: ?$ReadOnlyArray<HasSpread<TFragmentType>>,
-): ?TData;
+  key: null | void,
+): null | void;
 
 function useFragment(fragment: GraphQLTaggedNode, key: mixed): mixed {
   // We need to use this hook in order to be able to track if

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

@@ -12,17 +12,15 @@
 'use strict';
 
 import type {LoadMoreFn, UseLoadMoreFunctionArgs} from '../useLoadMoreFunction';
+import type {ReturnType} from '../usePaginationFragment';
 import type {Options} from './useRefetchableFragmentInternal_REACT_CACHE';
-import type {RefetchFnDynamic} from './useRefetchableFragmentInternal_REACT_CACHE';
 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');
@@ -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

@@ -11,6 +11,7 @@
 
 'use strict';
 
+import type {RefetchableIdentifierInfo} from '../../../relay-runtime/util/ReaderNode';
 import type {LoaderFn} from '../useQueryLoader';
 import type {
   ConcreteRequest,
@@ -98,7 +99,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 +172,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 +237,7 @@ function useRefetchableFragmentNode<
       debugPreviousIDAndTypename = debugFunctions.getInitialIDAndType(
         refetchQuery.request.variables,
         fragmentRefPathInResponse,
+        identifierInfo?.identifierQueryVariableName,
         environment,
       );
     }
@@ -343,7 +345,7 @@ function useRefetchableFragmentNode<
     fragmentIdentifier,
     fragmentNode,
     fragmentRefPathInResponse,
-    identifierField,
+    identifierInfo,
     loadQuery,
     parentFragmentRef,
     refetchableRequest,
@@ -377,17 +379,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 +456,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,11 +469,13 @@ 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(
@@ -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;
       }