react-relay 14.0.0 → 15.0.0

package/relay-hooks/useLoadMoreFunction.js.flow

@@ -4,13 +4,11 @@
  * 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
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {
@@ -19,10 +17,9 @@ import type {
   Disposable,
   GraphQLResponse,
   Observer,
-  OperationType,
   ReaderFragment,
   ReaderPaginationMetadata,
-  VariablesOf,
+  Variables,
 } from 'relay-runtime';
 
 const useFetchTrackingRef = require('./useFetchTrackingRef');
@@ -32,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,
@@ -41,15 +38,15 @@ const {
 } = require('relay-runtime');
 const warning = require('warning');
 
-export type LoadMoreFn<TQuery: OperationType> = (
+export type LoadMoreFn<TVariables: Variables> = (
   count: number,
-  options?: {|
+  options?: {
     onComplete?: (Error | null) => void,
-    UNSTABLE_extraVariables?: $Shape<VariablesOf<TQuery>>,
-  |},
+    UNSTABLE_extraVariables?: $Shape<TVariables>,
+  },
 ) => Disposable;
 
-export type UseLoadMoreFunctionArgs = {|
+export type UseLoadMoreFunctionArgs = {
   direction: Direction,
   fragmentNode: ReaderFragment,
   fragmentRef: mixed,
@@ -62,11 +59,11 @@ export type UseLoadMoreFunctionArgs = {|
   componentDisplayName: string,
   observer: Observer<GraphQLResponse>,
   onReset: () => void,
-|};
+};
 
-function useLoadMoreFunction<TQuery: OperationType>(
+function useLoadMoreFunction<TVariables: Variables>(
   args: UseLoadMoreFunctionArgs,
-): [LoadMoreFn<TQuery>, boolean, () => void] {
+): [LoadMoreFn<TVariables>, boolean, () => void] {
   const {
     direction,
     fragmentNode,
@@ -125,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;
@@ -265,10 +268,10 @@ function getConnectionState(
   fragmentNode: ReaderFragment,
   fragmentData: mixed,
   connectionPathInFragmentData: $ReadOnlyArray<string | number>,
-): {|
+): {
   cursor: ?string,
   hasMore: boolean,
-|} {
+} {
   const {
     EDGES,
     PAGE_INFO,

package/relay-hooks/useMemoOperationDescriptor.js.flow

@@ -4,13 +4,11 @@
  * 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
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {
@@ -31,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,51 +4,33 @@
  * 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
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 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,13 +4,11 @@
  * 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
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {
@@ -32,7 +30,7 @@ const {commitMutation: defaultCommitMutation} = require('relay-runtime');
 
 const {useState, useEffect, useRef, useCallback} = React;
 
-export type UseMutationConfig<TMutation: MutationParameters> = {|
+export type UseMutationConfig<TMutation: MutationParameters> = {
   configs?: Array<DeclarativeMutationConfig>,
   onError?: ?(error: Error) => void,
   onCompleted?: ?(
@@ -50,7 +48,7 @@ export type UseMutationConfig<TMutation: MutationParameters> = {|
   updater?: ?SelectorStoreUpdater<TMutation['response']>,
   uploadables?: UploadableMap,
   variables: TMutation['variables'],
-|};
+};
 
 function useMutation<TMutation: MutationParameters>(
   mutation: GraphQLTaggedNode,
@@ -63,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
@@ -100,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) => {

package/relay-hooks/usePaginationFragment.js.flow

@@ -4,25 +4,25 @@
  * 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
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {LoadMoreFn, UseLoadMoreFunctionArgs} from './useLoadMoreFunction';
-import type {RefetchFnDynamic} from './useRefetchableFragmentNode';
+import type {RefetchFn} from './useRefetchableFragment';
+import type {Options} from './useRefetchableFragmentNode';
 import type {
   FragmentType,
   GraphQLResponse,
-  GraphQLTaggedNode,
   Observer,
-  OperationType,
+  RefetchableFragment,
+  Variables,
 } from 'relay-runtime';
 
+const HooksImplementation = require('./HooksImplementation');
 const useLoadMoreFunction = require('./useLoadMoreFunction');
 const useRefetchableFragmentNode = require('./useRefetchableFragmentNode');
 const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
@@ -33,36 +33,28 @@ const {
   getPaginationMetadata,
 } = require('relay-runtime');
 
-export type ReturnType<TQuery: OperationType, TKey, TFragmentData> = {|
-  data: TFragmentData,
-  loadNext: LoadMoreFn<TQuery>,
-  loadPrevious: LoadMoreFn<TQuery>,
-  hasNext: boolean,
-  hasPrevious: boolean,
-  isLoadingNext: boolean,
-  isLoadingPrevious: boolean,
-  refetch: RefetchFnDynamic<TQuery, TKey>,
-|};
+// This separate type export is only needed as long as we are injecting
+// a separate hooks implementation in ./HooksImplementation -- it can
+// be removed after we stop doing that.
+export type UsePaginationFragmentType = <
+  TFragmentType: FragmentType,
+  TVariables: Variables,
+  TData,
+  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
+>(
+  fragmentInput: RefetchableFragment<TFragmentType, TData, TVariables>,
+  parentFragmentRef: TKey,
+) => ReturnType<TVariables, TData, TKey>;
 
-function usePaginationFragment<
-  TQuery: OperationType,
-  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
+function usePaginationFragment_LEGACY<
+  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,
@@ -78,14 +70,14 @@ function usePaginationFragment<
   } = getPaginationMetadata(fragmentNode, componentDisplayName);
 
   const {fragmentData, fragmentRef, refetch} = useRefetchableFragmentNode<
-    TQuery,
-    TKey,
+    $FlowFixMe,
+    $FlowFixMe,
   >(fragmentNode, parentFragmentRef, componentDisplayName);
   const fragmentIdentifier = getFragmentIdentifier(fragmentNode, fragmentRef);
 
   // Backward pagination
   const [loadPrevious, hasPrevious, isLoadingPrevious, disposeFetchPrevious] =
-    useLoadMore<TQuery>({
+    useLoadMore<TVariables>({
       componentDisplayName,
       connectionPathInFragmentData,
       direction: 'backward',
@@ -100,7 +92,7 @@ function usePaginationFragment<
 
   // Forward pagination
   const [loadNext, hasNext, isLoadingNext, disposeFetchNext] =
-    useLoadMore<TQuery>({
+    useLoadMore<TVariables>({
       componentDisplayName,
       connectionPathInFragmentData,
       direction: 'forward',
@@ -113,8 +105,8 @@ function usePaginationFragment<
       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});
@@ -134,7 +126,7 @@ function usePaginationFragment<
     });
   }
   return {
-    data: fragmentData,
+    data: (fragmentData: $FlowFixMe),
     loadNext,
     loadPrevious,
     hasNext,
@@ -145,7 +137,7 @@ function usePaginationFragment<
   };
 }
 
-function useLoadMore<TQuery: OperationType>(
+function useLoadMore<TVariables: Variables>(
   args: $Diff<
     UseLoadMoreFunctionArgs,
     {
@@ -154,7 +146,7 @@ function useLoadMore<TQuery: OperationType>(
       ...
     },
   >,
-): [LoadMoreFn<TQuery>, boolean, boolean, () => void] {
+): [LoadMoreFn<TVariables>, boolean, boolean, () => void] {
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const observer = {
     start: () => setIsLoadingMore(true),
@@ -162,7 +154,7 @@ function useLoadMore<TQuery: OperationType>(
     error: () => setIsLoadingMore(false),
   };
   const handleReset = () => setIsLoadingMore(false);
-  const [loadMore, hasMore, disposeFetch] = useLoadMoreFunction({
+  const [loadMore, hasMore, disposeFetch] = useLoadMoreFunction<TVariables>({
     ...args,
     observer,
     onReset: handleReset,
@@ -170,4 +162,44 @@ function useLoadMore<TQuery: OperationType>(
   return [loadMore, hasMore, isLoadingMore, disposeFetch];
 }
 
+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
+  // prettier-ignore
+  data: $Call<
+    & (<TFragmentType>( { +$fragmentSpreads: TFragmentType, ... }) =>  TData)
+    & (<TFragmentType>(?{ +$fragmentSpreads: TFragmentType, ... }) => ?TData),
+    TKey,
+  >,
+  loadNext: LoadMoreFn<TVariables>,
+  loadPrevious: LoadMoreFn<TVariables>,
+  hasNext: boolean,
+  hasPrevious: boolean,
+  isLoadingNext: boolean,
+  isLoadingPrevious: boolean,
+  refetch: RefetchFn<TVariables, TKey>,
+};
+
+function usePaginationFragment<
+  TFragmentType: FragmentType,
+  TVariables: Variables,
+  TData,
+  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
+>(
+  fragmentInput: RefetchableFragment<TFragmentType, TData, TVariables>,
+  parentFragmentRef: TKey,
+): ReturnType<TVariables, TData, TKey> {
+  const impl = HooksImplementation.get();
+  if (impl) {
+    return impl.usePaginationFragment<TFragmentType, TVariables, TData, TKey>(
+      fragmentInput,
+      parentFragmentRef,
+    );
+  } else {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return usePaginationFragment_LEGACY(fragmentInput, parentFragmentRef);
+  }
+}
+
 module.exports = usePaginationFragment;

package/relay-hooks/usePreloadedQuery.js.flow

@@ -4,23 +4,20 @@
  * 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
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
-import type {PreloadedQuery} from './EntryPointTypes.flow';
 import type {
-  GraphQLTaggedNode,
-  OperationType,
-  RenderPolicy,
-} from 'relay-runtime';
+  EnvironmentProviderOptions,
+  PreloadedQueryInner,
+  PreloadedQueryInner_DEPRECATED,
+} from './EntryPointTypes.flow';
+import type {Query, RenderPolicy, Variables} from 'relay-runtime';
 
-const HooksImplementation = require('./HooksImplementation');
 const {useTrackLoadQueryInRender} = require('./loadQuery');
 const useLazyLoadQueryNode = require('./useLazyLoadQueryNode');
 const useMemoOperationDescriptor = require('./useMemoOperationDescriptor');
@@ -32,24 +29,44 @@ const {
 } = require('relay-runtime');
 const warning = require('warning');
 
-// This separate type export is only needed as long as we are injecting
-// a separate hooks implementation in ./HooksImplementation -- it can
-// be removed after we stop doing that.
-export type UsePreloadedQueryHookType = <TQuery: OperationType>(
-  gqlQuery: GraphQLTaggedNode,
-  preloadedQuery: PreloadedQuery<TQuery>,
-  options?: {|
-    UNSTABLE_renderPolicy?: RenderPolicy,
-  |},
-) => TQuery['response'];
+type PreloadedQuery<
+  TVariables: Variables,
+  TData,
+  TRawResponse,
+  TEnvironmentProviderOptions = EnvironmentProviderOptions,
+> =
+  | PreloadedQueryInner_DEPRECATED<
+      {
+        variables: TVariables,
+        response: TData,
+        rawResponse?: TRawResponse,
+      },
+      TEnvironmentProviderOptions,
+    >
+  | PreloadedQueryInner<
+      {
+        variables: TVariables,
+        response: TData,
+        rawResponse?: TRawResponse,
+      },
+      TEnvironmentProviderOptions,
+    >;
 
-function usePreloadedQuery_LEGACY<TQuery: OperationType>(
-  gqlQuery: GraphQLTaggedNode,
-  preloadedQuery: PreloadedQuery<TQuery>,
-  options?: {|
+function usePreloadedQuery<
+  TVariables: Variables,
+  TData,
+  TRawResponse: ?{...} = void,
+>(
+  gqlQuery: Query<TVariables, TData, TRawResponse>,
+  preloadedQuery: PreloadedQuery<
+    TVariables,
+    TData,
+    $NonMaybeType<TRawResponse>,
+  >,
+  options?: {
     UNSTABLE_renderPolicy?: RenderPolicy,
-  |},
-): TQuery['response'] {
+  },
+): TData {
   // We need to use this hook in order to be able to track if
   // loadQuery was called during render
   useTrackLoadQueryInRender();
@@ -139,7 +156,12 @@ function usePreloadedQuery_LEGACY<TQuery: OperationType>(
     };
   }
 
-  const data = useLazyLoadQueryNode(useLazyLoadQueryNodeParams);
+  const data = useLazyLoadQueryNode<{
+    variables: TVariables,
+    response: TData,
+    rawResponse?: $NonMaybeType<TRawResponse>,
+  }>(useLazyLoadQueryNodeParams);
+
   if (__DEV__) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useDebugValue({
@@ -154,20 +176,4 @@ function usePreloadedQuery_LEGACY<TQuery: OperationType>(
   return data;
 }
 
-function usePreloadedQuery<TQuery: OperationType>(
-  gqlQuery: GraphQLTaggedNode,
-  preloadedQuery: PreloadedQuery<TQuery>,
-  options?: {|
-    UNSTABLE_renderPolicy?: RenderPolicy,
-  |},
-): TQuery['response'] {
-  const impl = HooksImplementation.get();
-  if (impl) {
-    return impl.usePreloadedQuery(gqlQuery, preloadedQuery, options);
-  } else {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return usePreloadedQuery_LEGACY(gqlQuery, preloadedQuery, options);
-  }
-}
-
-module.exports = (usePreloadedQuery: UsePreloadedQueryHookType);
+module.exports = usePreloadedQuery;