react-relay 15.0.0 → 16.0.0

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

@@ -11,55 +11,39 @@
 
 '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 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

@@ -39,7 +39,7 @@ type RefetchVariables<TVariables, TKey> =
   //   - 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, ... }) => Partial<TVariables>)
     & (<TFragmentType>(?{ +$fragmentSpreads: TFragmentType, ... }) => TVariables),
     TKey,
   >;
@@ -89,7 +89,6 @@ function useBlockingPaginationFragment<
 
   const {
     connectionPathInFragmentData,
-    identifierField,
     paginationRequest,
     paginationMetadata,
     stream,
@@ -132,7 +131,6 @@ function useBlockingPaginationFragment<
     fragmentIdentifier,
     fragmentNode,
     fragmentRef,
-    identifierField,
     paginationMetadata,
     paginationRequest,
   });
@@ -148,7 +146,6 @@ function useBlockingPaginationFragment<
     fragmentIdentifier,
     fragmentNode,
     fragmentRef,
-    identifierField,
     paginationMetadata,
     paginationRequest,
   });
@@ -157,6 +154,7 @@ function useBlockingPaginationFragment<
     (variables: TVariables, options: void | Options) => {
       disposeFetchNext();
       disposeFetchPrevious();
+      // $FlowFixMe[incompatible-variance]
       return refetch(variables, {...options, __environment: undefined});
     },
     [disposeFetchNext, disposeFetchPrevious, refetch],

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/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(

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,
     });

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

@@ -31,7 +31,7 @@ type RefetchVariables<TVariables, TKey> =
   //   - non-nullable if the provided ref type is non-nullable
   // prettier-ignore
   $Call<
-    & (<TFragmentType>( { +$fragmentSpreads: TFragmentType, ... }) => $Shape<TVariables>)
+    & (<TFragmentType>( { +$fragmentSpreads: TFragmentType, ... }) => Partial<TVariables>)
     & (<TFragmentType>(?{ +$fragmentSpreads: TFragmentType, ... }) => TVariables),
     TKey,
   >;
@@ -46,7 +46,7 @@ export type RefetchFn<TVariables, TKey, TOptions = Options> = RefetchFnBase<
   TOptions,
 >;
 
-type ReturnType<TVariables, TData, TKey> = [
+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
@@ -100,6 +100,7 @@ function useRefetchableFragment_LEGACY<
 
   // $FlowFixMe[incompatible-return]
   // $FlowFixMe[prop-missing]
+  // $FlowFixMe[incompatible-variance]
   return [fragmentData, refetch];
 }
 

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,
@@ -100,7 +101,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 +174,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 +217,12 @@ function useRefetchableFragmentNode<
   >((refetchableRequest: $FlowFixMe));
 
   let fragmentRef = parentFragmentRef;
+
+  const {identifierInfo} = getRefetchMetadata(
+    fragmentNode,
+    componentDisplayName,
+  );
+
   if (shouldReset) {
     dispatch({
       type: 'reset',
@@ -239,6 +248,7 @@ function useRefetchableFragmentNode<
       debugPreviousIDAndTypename = debugFunctions.getInitialIDAndType(
         refetchQuery.request.variables,
         fragmentRefPathInResponse,
+        identifierInfo?.identifierQueryVariableName,
         environment,
       );
     }
@@ -345,7 +355,7 @@ function useRefetchableFragmentNode<
     fragmentIdentifier,
     fragmentNode,
     fragmentRefPathInResponse,
-    identifierField,
+    identifierInfo,
     loadQuery,
     parentFragmentRef,
     refetchableRequest,
@@ -381,17 +391,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 +468,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 +481,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 +536,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 +550,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;
       }