react-relay 15.0.0 → 16.1.0

package/relay-hooks/useMutation.js.flow

@@ -12,15 +12,16 @@
 'use strict';
 
 import type {
+  CommitMutationConfig,
   DeclarativeMutationConfig,
   Disposable,
-  GraphQLTaggedNode,
   IEnvironment,
-  MutationConfig,
+  Mutation,
   MutationParameters,
   PayloadError,
   SelectorStoreUpdater,
   UploadableMap,
+  Variables,
 } from 'relay-runtime';
 
 const useIsMountedRef = require('./useIsMountedRef');
@@ -50,13 +51,29 @@ export type UseMutationConfig<TMutation: MutationParameters> = {
   variables: TMutation['variables'],
 };
 
-function useMutation<TMutation: MutationParameters>(
-  mutation: GraphQLTaggedNode,
+type UseMutationConfigInternal<TVariables, TData, TRawResponse> = {
+  configs?: Array<DeclarativeMutationConfig>,
+  onError?: ?(error: Error) => void,
+  onCompleted?: ?(response: TData, errors: ?Array<PayloadError>) => void,
+  onNext?: ?() => void,
+  onUnsubscribe?: ?() => void,
+  optimisticResponse?: TRawResponse,
+  optimisticUpdater?: ?SelectorStoreUpdater<TData>,
+  updater?: ?SelectorStoreUpdater<TData>,
+  uploadables?: UploadableMap,
+  variables: TVariables,
+};
+
+function useMutation<TVariables: Variables, TData, TRawResponse = {...}>(
+  mutation: Mutation<TVariables, TData, TRawResponse>,
   commitMutationFn?: (
     environment: IEnvironment,
-    config: MutationConfig<TMutation>,
+    config: CommitMutationConfig<TVariables, TData, TRawResponse>,
   ) => Disposable = defaultCommitMutation,
-): [(UseMutationConfig<TMutation>) => Disposable, boolean] {
+): [
+  (UseMutationConfigInternal<TVariables, TData, TRawResponse>) => Disposable,
+  boolean,
+] {
   const environment = useRelayEnvironment();
   const isMountedRef = useIsMountedRef();
   const environmentRef = useRef(environment);
@@ -94,18 +111,18 @@ function useMutation<TMutation: MutationParameters>(
   }, [environment, isMountedRef, mutation]);
 
   const commit = useCallback(
-    (config: UseMutationConfig<TMutation>) => {
+    (config: UseMutationConfigInternal<TVariables, TData, TRawResponse>) => {
       if (isMountedRef.current) {
         setMutationInFlight(true);
       }
       const disposable: Disposable = commitMutationFn(environment, {
         ...config,
         mutation,
-        onCompleted: (response, errors) => {
+        onCompleted: (response: TData, errors: ?Array<PayloadError>) => {
           cleanup(disposable);
           config.onCompleted?.(response, errors);
         },
-        onError: error => {
+        onError: (error: Error) => {
           cleanup(disposable);
           config.onError?.(error);
         },

package/relay-hooks/usePaginationFragment.js.flow

@@ -62,12 +62,8 @@ function usePaginationFragment_LEGACY<
   );
   const componentDisplayName = 'usePaginationFragment()';
 
-  const {
-    connectionPathInFragmentData,
-    paginationRequest,
-    paginationMetadata,
-    identifierField,
-  } = getPaginationMetadata(fragmentNode, componentDisplayName);
+  const {connectionPathInFragmentData, paginationRequest, paginationMetadata} =
+    getPaginationMetadata(fragmentNode, componentDisplayName);
 
   const {fragmentData, fragmentRef, refetch} = useRefetchableFragmentNode<
     $FlowFixMe,
@@ -85,7 +81,6 @@ function usePaginationFragment_LEGACY<
       fragmentIdentifier,
       fragmentNode,
       fragmentRef,
-      identifierField,
       paginationMetadata,
       paginationRequest,
     });
@@ -100,7 +95,6 @@ function usePaginationFragment_LEGACY<
       fragmentIdentifier,
       fragmentNode,
       fragmentRef,
-      identifierField,
       paginationMetadata,
       paginationRequest,
     });
@@ -163,15 +157,12 @@ function useLoadMore<TVariables: Variables>(
 }
 
 export type ReturnType<TVariables, TData, TKey> = {
-  // NOTE: This $Call ensures that the type of the returned data is either:
+  // NOTE: This type ensures that the type of the returned data is either:
   //   - nullable if the provided ref type is nullable
   //   - non-nullable if the provided ref type is non-nullable
-  // 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,
@@ -192,6 +183,7 @@ function usePaginationFragment<
 ): ReturnType<TVariables, TData, TKey> {
   const impl = HooksImplementation.get();
   if (impl) {
+    // $FlowExpectedError[incompatible-return] Flow cannot prove that two conditional type satisfy each other
     return impl.usePaginationFragment<TFragmentType, TVariables, TData, TKey>(
       fragmentInput,
       parentFragmentRef,

package/relay-hooks/useQueryLoader.js.flow

@@ -82,9 +82,6 @@ type UseQueryLoaderHookReturnType<
   () => void,
 ];
 
-type ExtractVariablesType = <T>({+variables: T, ...}) => T;
-type ExtractResponseType = <T>({+response: T, ...}) => T;
-
 declare function useQueryLoader<
   TVariables: Variables,
   TData,
@@ -109,10 +106,7 @@ declare function useQueryLoader<
 declare function useQueryLoader<TQuery: OperationType>(
   preloadableRequest: PreloadableConcreteRequest<TQuery>,
   initialQueryReference?: ?PreloadedQuery<TQuery>,
-): UseQueryLoaderHookReturnType<
-  $Call<ExtractVariablesType, TQuery>,
-  $Call<ExtractResponseType, TQuery>,
->;
+): UseQueryLoaderHookReturnType<TQuery['variables'], TQuery['response']>;
 
 function useQueryLoader<
   TVariables: Variables,
@@ -201,7 +195,7 @@ function useQueryLoader<
             }
           : options;
       if (isMountedRef.current) {
-        const updatedQueryReference = loadQuery<QueryType>(
+        const updatedQueryReference = loadQuery(
           options?.__environment ?? environment,
           preloadableRequest,
           variables,

package/relay-hooks/useRefetchableFragment.js.flow

@@ -25,16 +25,13 @@ const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
 const {useDebugValue} = require('react');
 const {getFragment} = require('relay-runtime');
 
-type RefetchVariables<TVariables, TKey> =
-  // NOTE: This $Call ensures that the type of the returned variables is either:
+type RefetchVariables<TVariables, TKey: ?{+$fragmentSpreads: mixed, ...}> =
+  // NOTE: This type ensures that the type of the returned variables is either:
   //   - nullable if the provided ref type is nullable
   //   - non-nullable if the provided ref type is non-nullable
-  // 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,
@@ -46,16 +43,15 @@ export type RefetchFn<TVariables, TKey, TOptions = Options> = RefetchFnBase<
   TOptions,
 >;
 
-type ReturnType<TVariables, TData, TKey> = [
-  // NOTE: This $Call ensures that the type of the returned data is either:
+export type ReturnType<
+  TVariables,
+  TData,
+  TKey: ?{+$fragmentSpreads: mixed, ...},
+> = [
+  // NOTE: This type ensures that the type of the returned data is either:
   //   - nullable if the provided ref type is nullable
   //   - non-nullable if the provided ref type is non-nullable
-  // prettier-ignore
-  $Call<
-    & (<TFragmentType>( { +$fragmentSpreads: TFragmentType, ... }) =>  TData)
-    & (<TFragmentType>(?{ +$fragmentSpreads: TFragmentType, ... }) => ?TData),
-    TKey,
-  >,
+  [+key: TKey] extends [+key: {+$fragmentSpreads: mixed, ...}] ? TData : ?TData,
   RefetchFn<TVariables, TKey>,
 ];
 
@@ -100,6 +96,7 @@ function useRefetchableFragment_LEGACY<
 
   // $FlowFixMe[incompatible-return]
   // $FlowFixMe[prop-missing]
+  // $FlowFixMe[incompatible-variance]
   return [fragmentData, refetch];
 }
 
@@ -114,6 +111,7 @@ function useRefetchableFragment<
 ): ReturnType<TVariables, TData, TKey> {
   const impl = HooksImplementation.get();
   if (impl) {
+    // $FlowExpectedError[incompatible-return] Flow cannot prove that two conditional type satisfy each other
     return impl.useRefetchableFragment<TFragmentType, TVariables, TData, TKey>(
       fragmentInput,
       parentFragmentRef,

package/relay-hooks/useRefetchableFragmentNode.js.flow

@@ -11,6 +11,7 @@
 
 'use strict';
 
+import type {RefetchableIdentifierInfo} from '../../relay-runtime/util/ReaderNode';
 import type {LoaderFn} from './useQueryLoader';
 import type {
   ConcreteRequest,
@@ -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,
@@ -100,7 +98,7 @@ type RefetchFnExact<TQuery: OperationType, TOptions = Options> = RefetchFnBase<
 type RefetchFnInexact<
   TQuery: OperationType,
   TOptions = Options,
-> = RefetchFnBase<$Shape<VariablesOf<TQuery>>, TOptions>;
+> = RefetchFnBase<Partial<VariablesOf<TQuery>>, TOptions>;
 
 type Action =
   | {
@@ -173,8 +171,10 @@ function useRefetchableFragmentNode<
   componentDisplayName: string,
 ): ReturnType<TQuery, TKey, InternalOptions> {
   const parentEnvironment = useRelayEnvironment();
-  const {refetchableRequest, fragmentRefPathInResponse, identifierField} =
-    getRefetchMetadata(fragmentNode, componentDisplayName);
+  const {refetchableRequest, fragmentRefPathInResponse} = getRefetchMetadata(
+    fragmentNode,
+    componentDisplayName,
+  );
   const fragmentIdentifier = getFragmentIdentifier(
     fragmentNode,
     parentFragmentRef,
@@ -214,6 +214,12 @@ function useRefetchableFragmentNode<
   >((refetchableRequest: $FlowFixMe));
 
   let fragmentRef = parentFragmentRef;
+
+  const {identifierInfo} = getRefetchMetadata(
+    fragmentNode,
+    componentDisplayName,
+  );
+
   if (shouldReset) {
     dispatch({
       type: 'reset',
@@ -239,6 +245,7 @@ function useRefetchableFragmentNode<
       debugPreviousIDAndTypename = debugFunctions.getInitialIDAndType(
         refetchQuery.request.variables,
         fragmentRefPathInResponse,
+        identifierInfo?.identifierQueryVariableName,
         environment,
       );
     }
@@ -345,7 +352,7 @@ function useRefetchableFragmentNode<
     fragmentIdentifier,
     fragmentNode,
     fragmentRefPathInResponse,
-    identifierField,
+    identifierInfo,
     loadQuery,
     parentFragmentRef,
     refetchableRequest,
@@ -353,6 +360,7 @@ function useRefetchableFragmentNode<
   return {
     fragmentData,
     fragmentRef,
+    // $FlowFixMe[incompatible-return] RefetchFn not compatible with RefetchFnDynamic
     refetch,
     disableStoreUpdates,
     enableStoreUpdates,
@@ -381,17 +389,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(
     (
@@ -458,8 +466,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
@@ -469,11 +479,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(
@@ -522,10 +534,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' ||
@@ -535,7 +548,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/lib/relay-hooks/react-cache/RelayReactCache.js

@@ -1,32 +0,0 @@
-/**
- * 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.
- *
- * 
- * @format
- * @oncall relay
- */
-
-'use strict';
-
-var invariant = require('invariant');
-// $FlowFixMe[prop-missing] These exist in experimental builds but aren't in React's types yet.
-var _require = require('react'),
-  unstable_getCacheForType = _require.unstable_getCacheForType,
-  unstable_getCacheSignal = _require.unstable_getCacheSignal;
-var _require2 = require('relay-runtime'),
-  RelayFeatureFlags = _require2.RelayFeatureFlags;
-function getCacheForType(factory) {
-  !(typeof unstable_getCacheForType === 'function' && RelayFeatureFlags.USE_REACT_CACHE) ? process.env.NODE_ENV !== "production" ? invariant(false, 'RelayReactCache.getCacheForType should only be called when the USE_REACT_CACHE feature flag is enabled and when on an experimental React build that supports it.') : invariant(false) : void 0;
-  return unstable_getCacheForType(factory);
-}
-function getCacheSignal() {
-  !(typeof unstable_getCacheSignal === 'function' && RelayFeatureFlags.USE_REACT_CACHE) ? process.env.NODE_ENV !== "production" ? invariant(false, 'RelayReactCache.getCacheSignal should only be called when the USE_REACT_CACHE feature flag is enabled and when on an experimental React build that supports it.') : invariant(false) : void 0;
-  return unstable_getCacheSignal();
-}
-module.exports = {
-  getCacheForType: getCacheForType,
-  getCacheSignal: getCacheSignal
-};