react-relay 13.1.1 → 14.1.0

package/relay-hooks/useClientQuery.js.flow

@@ -0,0 +1,39 @@
+/**
+ * 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.
+ *
+ * @emails oncall+relay
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+import type {ClientQuery, Query, RenderPolicy, Variables} from 'relay-runtime';
+
+const useLazyLoadQuery = require('./useLazyLoadQuery');
+
+/**
+ * This hook can be used to render client-only queries.
+ * 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>,
+  variables: TVariables,
+  options?: {
+    UNSTABLE_renderPolicy?: RenderPolicy,
+  },
+): TData {
+  // $FlowFixMe[incompatible-type] client queries can be used with useLazyLoadQuery, but only with `store-only` policy.
+  const query: Query<TVariables, TData> = gqlQuery;
+
+  return useLazyLoadQuery(query, variables, {
+    ...options,
+    fetchPolicy: 'store-only',
+  });
+}
+
+module.exports = useClientQuery;

package/relay-hooks/useEntryPointLoader.js.flow

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {
@@ -47,9 +45,9 @@ type UseEntryPointLoaderHookReturnType<
 // NullEntryPointReference needs to implement referential equality,
 // so that multiple NullEntryPointReferences can be in the same set
 // (corresponding to multiple calls to disposeEntryPoint).
-type NullEntryPointReference = {|
+type NullEntryPointReference = {
   kind: 'NullEntryPointReference',
-|};
+};
 const initialNullEntryPointReferenceState = {kind: 'NullEntryPointReference'};
 
 function useLoadEntryPoint<
@@ -68,14 +66,14 @@ function useLoadEntryPoint<
 >(
   environmentProvider: IEnvironmentProvider<EnvironmentProviderOptions>,
   entryPoint: TEntryPoint,
-  options?: ?{|
+  options?: ?{
     // TODO(T83890478): Remove once Offscreen API lands in xplat
     // and we can use it in tests
-    TEST_ONLY__initialEntryPointData?: ?{|
+    TEST_ONLY__initialEntryPointData?: ?{
       entryPointReference: ?PreloadedEntryPoint<TEntryPointComponent>,
       entryPointParams: ?TEntryPointParams,
-    |},
-  |},
+    },
+  },
 ): UseEntryPointLoaderHookReturnType<
   TEntryPointParams,
   TPreloadedQueries,

package/relay-hooks/useFetchTrackingRef.js.flow

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {Subscription} from 'relay-runtime';
@@ -29,12 +27,12 @@ const {useCallback, useEffect, useRef} = require('react');
  * The additional functions returned by this Hook can be used to mutate
  * the ref.
  */
-function useFetchTrackingRef(): {|
+function useFetchTrackingRef(): {
   isFetchingRef: {current: ?boolean, ...},
   startFetch: Subscription => void,
   disposeFetch: () => void,
   completeFetch: () => void,
-|} {
+} {
   const subscriptionRef = useRef<?Subscription>(null);
   const isFetchingRef = useRef<?boolean>(false);
 

package/relay-hooks/useFragment.js.flow

@@ -9,12 +9,11 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {Fragment, FragmentType, GraphQLTaggedNode} from 'relay-runtime';
 
+const HooksImplementation = require('./HooksImplementation');
 const {useTrackLoadQueryInRender} = require('./loadQuery');
 const useFragmentNode = require('./useFragmentNode');
 const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
@@ -32,25 +31,19 @@ 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 {
+function useFragment_LEGACY(fragment: GraphQLTaggedNode, key: mixed): mixed {
   // We need to use this hook in order to be able to track if
   // loadQuery was called during render
   useTrackLoadQueryInRender();
@@ -65,4 +58,16 @@ function useFragment(fragment: GraphQLTaggedNode, key: mixed): mixed {
   return data;
 }
 
+function useFragment(fragment: GraphQLTaggedNode, key: mixed): mixed {
+  const impl = HooksImplementation.get();
+  if (impl) {
+    // $FlowFixMe This is safe because impl.useFragment has the type of useFragment...
+    return impl.useFragment(fragment, key);
+    // (i.e. type declared above, but not the supertype used in this function definition)
+  } else {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useFragment_LEGACY(fragment, key);
+  }
+}
+
 module.exports = useFragment;

package/relay-hooks/useFragmentNode.js.flow

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {ReaderFragment} from 'relay-runtime';
@@ -21,11 +19,11 @@ const {useEffect, useRef, useState} = require('react');
 const {getFragmentIdentifier} = require('relay-runtime');
 const warning = require('warning');
 
-type ReturnType<TFragmentData: mixed> = {|
+type ReturnType<TFragmentData: mixed> = {
   data: TFragmentData,
   disableStoreUpdates: () => void,
   enableStoreUpdates: () => void,
-|};
+};
 
 function useFragmentNode<TFragmentData: mixed>(
   fragmentNode: ReaderFragment,

package/relay-hooks/useIsMountedRef.js.flow

@@ -9,13 +9,11 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 const {useEffect, useRef} = require('react');
 
-function useIsMountedRef(): {|current: boolean|} {
+function useIsMountedRef(): {current: boolean} {
   const isMountedRef = useRef(true);
 
   useEffect(() => {

package/relay-hooks/useLazyLoadQuery.js.flow

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {
@@ -29,15 +27,29 @@ const {
   __internal: {fetchQuery},
 } = require('relay-runtime');
 
+// 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 UseLazyLoadQueryHookType = <TVariables: Variables, TData>(
+  gqlQuery: Query<TVariables, TData>,
+  variables: TVariables,
+  options?: {
+    fetchKey?: string | number,
+    fetchPolicy?: FetchPolicy,
+    networkCacheConfig?: CacheConfig,
+    UNSTABLE_renderPolicy?: RenderPolicy,
+  },
+) => TData;
+
 function useLazyLoadQuery<TVariables: Variables, TData>(
   gqlQuery: Query<TVariables, TData>,
   variables: TVariables,
-  options?: {|
+  options?: {
     fetchKey?: string | number,
     fetchPolicy?: FetchPolicy,
     networkCacheConfig?: CacheConfig,
     UNSTABLE_renderPolicy?: RenderPolicy,
-  |},
+  },
 ): TData {
   // We need to use this hook in order to be able to track if
   // loadQuery was called during render
@@ -63,4 +75,4 @@ function useLazyLoadQuery<TVariables: Variables, TData>(
   return data;
 }
 
-module.exports = useLazyLoadQuery;
+module.exports = (useLazyLoadQuery: UseLazyLoadQueryHookType);

package/relay-hooks/useLazyLoadQueryNode.js.flow

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {
@@ -41,14 +39,14 @@ function useLazyLoadQueryNode<TQuery: OperationType>({
   fetchPolicy,
   fetchKey,
   renderPolicy,
-}: {|
+}: {
   query: OperationDescriptor,
   componentDisplayName: string,
   fetchObservable: Observable<GraphQLResponse>,
   fetchPolicy?: ?FetchPolicy,
   fetchKey?: ?string | ?number,
   renderPolicy?: ?RenderPolicy,
-|}): TQuery['response'] {
+}): TQuery['response'] {
   const environment = useRelayEnvironment();
   const profilerContext = useContext(ProfilerContext);
   const QueryResource = getQueryResourceForEnvironment(environment);

package/relay-hooks/useLoadMoreFunction.js.flow

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {
@@ -43,13 +41,13 @@ const warning = require('warning');
 
 export type LoadMoreFn<TQuery: OperationType> = (
   count: number,
-  options?: {|
+  options?: {
     onComplete?: (Error | null) => void,
     UNSTABLE_extraVariables?: $Shape<VariablesOf<TQuery>>,
-  |},
+  },
 ) => Disposable;
 
-export type UseLoadMoreFunctionArgs = {|
+export type UseLoadMoreFunctionArgs = {
   direction: Direction,
   fragmentNode: ReaderFragment,
   fragmentRef: mixed,
@@ -62,7 +60,7 @@ export type UseLoadMoreFunctionArgs = {|
   componentDisplayName: string,
   observer: Observer<GraphQLResponse>,
   onReset: () => void,
-|};
+};
 
 function useLoadMoreFunction<TQuery: OperationType>(
   args: UseLoadMoreFunctionArgs,
@@ -265,10 +263,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

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {

package/relay-hooks/useMemoVariables.js.flow

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {Variables} from 'relay-runtime';

package/relay-hooks/useMutation.js.flow

@@ -9,8 +9,6 @@
  * @format
  */
 
-// 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,
@@ -97,6 +95,9 @@ function useMutation<TMutation: MutationParameters>(
 
   const commit = useCallback(
     (config: UseMutationConfig<TMutation>) => {
+      if (isMountedRef.current) {
+        setMutationInFlight(true);
+      }
       const disposable = commitMutationFn(environment, {
         ...config,
         mutation,
@@ -117,9 +118,6 @@ function useMutation<TMutation: MutationParameters>(
         },
       });
       inFlightMutationsRef.current.add(disposable);
-      if (isMountedRef.current) {
-        setMutationInFlight(true);
-      }
       return disposable;
     },
     [cleanup, commitMutationFn, environment, isMountedRef, mutation],

package/relay-hooks/usePaginationFragment.js.flow

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {LoadMoreFn, UseLoadMoreFunctionArgs} from './useLoadMoreFunction';
@@ -23,6 +21,7 @@ import type {
   OperationType,
 } from 'relay-runtime';
 
+const HooksImplementation = require('./HooksImplementation');
 const useLoadMoreFunction = require('./useLoadMoreFunction');
 const useRefetchableFragmentNode = require('./useRefetchableFragmentNode');
 const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
@@ -33,8 +32,16 @@ const {
   getPaginationMetadata,
 } = require('relay-runtime');
 
-export type ReturnType<TQuery: OperationType, TKey, TFragmentData> = {|
-  data: TFragmentData,
+export type ReturnType<TQuery: OperationType, 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<
+    & (<TFragmentData>( { +$data?: TFragmentData, ... }) =>  TFragmentData)
+    & (<TFragmentData>(?{ +$data?: TFragmentData, ... }) => ?TFragmentData),
+    TKey,
+  >,
   loadNext: LoadMoreFn<TQuery>,
   loadPrevious: LoadMoreFn<TQuery>,
   hasNext: boolean,
@@ -42,27 +49,26 @@ export type ReturnType<TQuery: OperationType, TKey, TFragmentData> = {|
   isLoadingNext: boolean,
   isLoadingPrevious: boolean,
   refetch: RefetchFnDynamic<TQuery, TKey>,
-|};
+};
 
-function usePaginationFragment<
+// 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 = <
   TQuery: OperationType,
   TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
 >(
   fragmentInput: GraphQLTaggedNode,
   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<TQuery, TKey>;
+
+function usePaginationFragment_LEGACY<
+  TQuery: OperationType,
+  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
+>(
+  fragmentInput: GraphQLTaggedNode,
+  parentFragmentRef: TKey,
+): ReturnType<TQuery, TKey> {
   const fragmentNode = getFragment(fragmentInput);
   useStaticFragmentNodeWarning(
     fragmentNode,
@@ -170,4 +176,23 @@ function useLoadMore<TQuery: OperationType>(
   return [loadMore, hasMore, isLoadingMore, disposeFetch];
 }
 
+function usePaginationFragment<
+  TQuery: OperationType,
+  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
+>(
+  fragmentInput: GraphQLTaggedNode,
+  parentFragmentRef: TKey,
+): ReturnType<TQuery, TKey> {
+  const impl = HooksImplementation.get();
+  if (impl) {
+    return impl.usePaginationFragment<TQuery, 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

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {PreloadedQuery} from './EntryPointTypes.flow';
@@ -31,12 +29,23 @@ 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'];
+
 function usePreloadedQuery<TQuery: OperationType>(
   gqlQuery: GraphQLTaggedNode,
   preloadedQuery: PreloadedQuery<TQuery>,
-  options?: {|
+  options?: {
     UNSTABLE_renderPolicy?: RenderPolicy,
-  |},
+  },
 ): TQuery['response'] {
   // We need to use this hook in order to be able to track if
   // loadQuery was called during render
@@ -142,4 +151,4 @@ function usePreloadedQuery<TQuery: OperationType>(
   return data;
 }
 
-module.exports = usePreloadedQuery;
+module.exports = (usePreloadedQuery: UsePreloadedQueryHookType);

package/relay-hooks/useQueryLoader.js.flow

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {
@@ -35,10 +33,10 @@ export type LoaderFn<TQuery: OperationType> = (
   options?: UseQueryLoaderLoadQueryOptions,
 ) => void;
 
-export type UseQueryLoaderLoadQueryOptions = $ReadOnly<{|
+export type UseQueryLoaderLoadQueryOptions = $ReadOnly<{
   ...LoadQueryOptions,
   +__environment?: ?IEnvironment,
-|}>;
+}>;
 
 type UseQueryLoaderHookReturnType<TQuery: OperationType> = [
   ?PreloadedQuery<TQuery>,
@@ -49,9 +47,9 @@ type UseQueryLoaderHookReturnType<TQuery: OperationType> = [
 // NullQueryReference needs to implement referential equality,
 // so that multiple NullQueryReferences can be in the same set
 // (corresponding to multiple calls to disposeQuery).
-type NullQueryReference = {|
+type NullQueryReference = {
   kind: 'NullQueryReference',
-|};
+};
 const initialNullQueryReferenceState = {kind: 'NullQueryReference'};
 
 function requestIsLiveQuery<TQuery: OperationType>(

package/relay-hooks/useRefetchableFragment.js.flow

@@ -9,8 +9,6 @@
  * @format
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {RefetchFnDynamic} from './useRefetchableFragmentNode';
@@ -20,6 +18,7 @@ import type {
   OperationType,
 } from 'relay-runtime';
 
+const HooksImplementation = require('./HooksImplementation');
 const useRefetchableFragmentNode = require('./useRefetchableFragmentNode');
 const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
 const {useDebugValue} = require('react');
@@ -38,7 +37,18 @@ type ReturnType<TQuery: OperationType, TKey: ?{+$data?: mixed, ...}> = [
   RefetchFnDynamic<TQuery, TKey>,
 ];
 
-function useRefetchableFragment<
+// 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 UseRefetchableFragmentType = <
+  TQuery: OperationType,
+  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
+>(
+  fragmentInput: GraphQLTaggedNode,
+  fragmentRef: TKey,
+) => ReturnType<TQuery, TKey>;
+
+function useRefetchableFragment_LEGACY<
   TQuery: OperationType,
   TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
 >(
@@ -64,4 +74,23 @@ function useRefetchableFragment<
   return [fragmentData, (refetch: RefetchFnDynamic<TQuery, TKey>)];
 }
 
+function useRefetchableFragment<
+  TQuery: OperationType,
+  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
+>(
+  fragmentInput: GraphQLTaggedNode,
+  parentFragmentRef: TKey,
+): ReturnType<TQuery, TKey> {
+  const impl = HooksImplementation.get();
+  if (impl) {
+    return impl.useRefetchableFragment<TQuery, TKey>(
+      fragmentInput,
+      parentFragmentRef,
+    );
+  } else {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useRefetchableFragment_LEGACY(fragmentInput, parentFragmentRef);
+  }
+}
+
 module.exports = useRefetchableFragment;