react-relay 14.1.0 → 15.0.0

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, ... }) => $Shape<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,
@@ -86,33 +106,39 @@ 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,
+    identifierField,
+    paginationMetadata,
+    paginationRequest,
+  });
 
   // Forward pagination
-  const [loadNext, hasNext, disposeFetchNext] = useLoadMore<TQuery>({
+  const [loadNext, hasNext, disposeFetchNext] = useLoadMore<TVariables, TData>({
     componentDisplayName,
     connectionPathInFragmentData,
     direction: 'forward',
@@ -127,8 +153,8 @@ function useBlockingPaginationFragment<
     paginationRequest,
   });
 
-  const refetchPagination: RefetchFnDynamic<TQuery, TKey> = useCallback(
-    (variables, options) => {
+  const refetchPagination: RefetchFn<TVariables, TKey> = useCallback(
+    (variables: TVariables, options: void | Options) => {
       disposeFetchNext();
       disposeFetchPrevious();
       return refetch(variables, {...options, __environment: undefined});
@@ -137,7 +163,8 @@ function useBlockingPaginationFragment<
   );
 
   return {
-    data: fragmentData,
+    // $FlowFixMe[incompatible-cast]
+    data: (fragmentData: TData),
     loadNext,
     loadPrevious,
     hasNext,
@@ -146,7 +173,7 @@ function useBlockingPaginationFragment<
   };
 }
 
-function useLoadMore<TQuery: OperationType>(args: {
+function useLoadMore<TVariables: Variables>(args: {
   disableStoreUpdates: () => void,
   enableStoreUpdates: () => void,
   ...$Exact<
@@ -159,11 +186,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 +237,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';

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,7 +15,8 @@ import type {ReaderFragment} from 'relay-runtime';
 
 const {getFragmentResourceForEnvironment} = require('./FragmentResource');
 const useRelayEnvironment = require('./useRelayEnvironment');
-const {useEffect, useRef, useState} = require('react');
+const useUnsafeRef_DEPRECATED = require('./useUnsafeRef_DEPRECATED');
+const {useEffect, useState} = require('react');
 const {getFragmentIdentifier} = require('relay-runtime');
 const warning = require('warning');
 
@@ -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 =

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,8 +29,8 @@ const useRelayEnvironment = require('./useRelayEnvironment');
 const invariant = require('invariant');
 const {useCallback, useEffect, useState} = require('react');
 const {
-  ConnectionInterface,
   __internal: {fetchQuery},
+  ConnectionInterface,
   createOperationDescriptor,
   getPaginationVariables,
   getSelector,
@@ -39,11 +38,11 @@ const {
 } = 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?: $Shape<TVariables>,
   },
 ) => Disposable;
 
@@ -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,
@@ -123,7 +122,13 @@ function useLoadMoreFunction<TQuery: OperationType>(
   }, [disposeFetch]);
 
   const loadMore = useCallback(
-    (count, options) => {
+    (
+      count: number,
+      options: void | {
+        UNSTABLE_extraVariables?: $Shape<TVariables>,
+        onComplete?: (Error | null) => void,
+      },
+    ) => {
       // TODO(T41131846): Fetch/Caching policies for loadMore
 
       const onComplete = options?.onComplete;

package/relay-hooks/useMemoOperationDescriptor.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';
@@ -29,8 +29,8 @@ function useMemoOperationDescriptor(
   variables: Variables,
   cacheConfig?: ?CacheConfig,
 ): OperationDescriptor {
-  const [memoVariables] = useMemoVariables(variables);
-  const [memoCacheConfig] = useMemoVariables(cacheConfig || {});
+  const memoVariables = useMemoVariables(variables);
+  const memoCacheConfig = useMemoVariables(cacheConfig || {});
   return useMemo(
     () =>
       createOperationDescriptor(

package/relay-hooks/useMemoVariables.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';
@@ -14,39 +14,23 @@
 import type {Variables} from 'relay-runtime';
 
 const areEqual = require('areEqual');
-const React = require('react');
-
-const {useMemo, useRef, useState} = React;
+const {useState} = require('react');
 
+/**
+ * Memoizes the passed in `variables` object based on `areEqual` equality.
+ * This is useful when a `variables` object is used as a value in a depencency
+ * array as it might often be constructed during render.
+ */
 function useMemoVariables<TVariables: Variables | null>(
   variables: TVariables,
-): [TVariables, number] {
-  // The value of this ref is a counter that should be incremented when
-  // variables change. This allows us to use the counter as a
-  // memoization value to indicate if the computation for useMemo
-  // should be re-executed.
-  const variablesChangedGenerationRef = useRef(0);
-
-  // We mirror the variables to check if they have changed between renders
-  const [mirroredVariables, setMirroredVariables] = useState<Variables | null>(
-    variables,
-  );
-
-  const variablesChanged = !areEqual(variables, mirroredVariables);
-  if (variablesChanged) {
-    variablesChangedGenerationRef.current =
-      (variablesChangedGenerationRef.current ?? 0) + 1;
+): TVariables {
+  const [mirroredVariables, setMirroredVariables] = useState(variables);
+  if (areEqual(variables, mirroredVariables)) {
+    return mirroredVariables;
+  } else {
     setMirroredVariables(variables);
+    return variables;
   }
-
-  // NOTE: We disable react-hooks-deps warning because we explicitly
-  // don't want to memoize on object identity
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const memoVariables = useMemo(
-    () => variables,
-    [variablesChangedGenerationRef.current],
-  );
-  return [memoVariables, variablesChangedGenerationRef.current ?? 0];
 }
 
 module.exports = useMemoVariables;

package/relay-hooks/useMutation.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';
@@ -61,11 +61,11 @@ function useMutation<TMutation: MutationParameters>(
   const isMountedRef = useIsMountedRef();
   const environmentRef = useRef(environment);
   const mutationRef = useRef(mutation);
-  const inFlightMutationsRef = useRef(new Set());
+  const inFlightMutationsRef = useRef(new Set<Disposable>());
   const [isMutationInFlight, setMutationInFlight] = useState(false);
 
   const cleanup = useCallback(
-    disposable => {
+    (disposable: Disposable) => {
       if (
         environmentRef.current === environment &&
         mutationRef.current === mutation
@@ -98,7 +98,7 @@ function useMutation<TMutation: MutationParameters>(
       if (isMountedRef.current) {
         setMutationInFlight(true);
       }
-      const disposable = commitMutationFn(environment, {
+      const disposable: Disposable = commitMutationFn(environment, {
         ...config,
         mutation,
         onCompleted: (response, errors) => {