react-relay 13.1.0 → 14.0.0

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

@@ -0,0 +1,153 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @emails oncall+relay
+ * @format
+ */
+
+// flowlint ambiguous-object-type:error
+
+'use strict';
+
+import type {PreloadedQuery} from '../EntryPointTypes.flow';
+import type {
+  GraphQLTaggedNode,
+  OperationType,
+  RenderPolicy,
+} from 'relay-runtime';
+
+const {useTrackLoadQueryInRender} = require('../loadQuery');
+const useMemoOperationDescriptor = require('../useMemoOperationDescriptor');
+const useRelayEnvironment = require('../useRelayEnvironment');
+const getQueryResultOrFetchQuery = require('./getQueryResultOrFetchQuery_REACT_CACHE');
+const useFragmentInternal = require('./useFragmentInternal_REACT_CACHE');
+const invariant = require('invariant');
+const {useDebugValue, useEffect} = require('react');
+const {
+  __internal: {fetchQueryDeduped, fetchQuery},
+} = require('relay-runtime');
+const warning = require('warning');
+
+function usePreloadedQuery_REACT_CACHE<TQuery: OperationType>(
+  gqlQuery: GraphQLTaggedNode,
+  preloadedQuery: PreloadedQuery<TQuery>,
+  options?: {|
+    UNSTABLE_renderPolicy?: RenderPolicy,
+  |},
+): TQuery['response'] {
+  const environment = useRelayEnvironment();
+
+  useTrackLoadQueryInRender();
+
+  const {fetchKey, fetchPolicy, source, variables, networkCacheConfig} =
+    preloadedQuery;
+  const operation = useMemoOperationDescriptor(
+    gqlQuery,
+    variables,
+    networkCacheConfig,
+  );
+
+  let fetchObservable;
+  if (preloadedQuery.kind === 'PreloadedQuery_DEPRECATED') {
+    invariant(
+      operation.request.node.params.name === preloadedQuery.name,
+      'usePreloadedQuery(): Expected data to be prefetched for query `%s`, ' +
+        'got prefetch results for query `%s`.',
+      operation.request.node.params.name,
+      preloadedQuery.name,
+    );
+    fetchObservable = fetchQueryDeduped(
+      environment,
+      operation.request.identifier,
+      () => {
+        if (environment === preloadedQuery.environment && source != null) {
+          return environment.executeWithSource({operation, source});
+        } else {
+          return environment.execute({operation});
+        }
+      },
+    );
+  } else {
+    warning(
+      preloadedQuery.isDisposed === false,
+      'usePreloadedQuery(): Expected preloadedQuery to not be disposed yet. ' +
+        'This is because disposing the query marks it for future garbage ' +
+        'collection, and as such query results may no longer be present in the Relay ' +
+        'store. In the future, this will become a hard error.',
+    );
+    const fallbackFetchObservable = fetchQuery(environment, operation);
+    if (source != null && environment === preloadedQuery.environment) {
+      // If the source observable exists and the environments match, reuse
+      // the source observable.
+      // If the source observable happens to be empty, we need to fall back
+      // and re-execute and de-dupe the query (at render time).
+      fetchObservable = source.ifEmpty(fallbackFetchObservable);
+    } else if (environment !== preloadedQuery.environment) {
+      // If a call to loadQuery is made with a particular environment, and that
+      // preloaded query is passed to usePreloadedQuery in a different environment
+      // context, we cannot re-use the existing preloaded query.
+      // Instead, we need to fall back and re-execute and de-dupe the query with
+      // the new environment (at render time).
+      // TODO T68036756 track occurences of this warning and turn it into a hard error
+      warning(
+        false,
+        'usePreloadedQuery(): usePreloadedQuery was passed a preloaded query ' +
+          'that was created with a different environment than the one that is currently ' +
+          'in context. In the future, this will become a hard error.',
+      );
+      fetchObservable = fallbackFetchObservable;
+    } else {
+      // if (source == null)
+      // If the source observable does not exist, we need to
+      // fall back and re-execute and de-dupe the query (at render time).
+      fetchObservable = fallbackFetchObservable;
+    }
+  }
+
+  // Get the query going if needed -- this may suspend.
+  const [queryResult, effect] = getQueryResultOrFetchQuery(
+    environment,
+    operation,
+    {
+      fetchPolicy,
+      renderPolicy: options?.UNSTABLE_renderPolicy,
+      fetchKey,
+      fetchObservable,
+    },
+  );
+
+  useEffect(effect);
+
+  // Read the query's root fragment -- this may suspend.
+  const {fragmentNode, fragmentRef} = queryResult;
+  // $FlowExpectedError[incompatible-return] Is this a fixable incompatible-return?
+  const data = useFragmentInternal(
+    fragmentNode,
+    fragmentRef,
+    'usePreloadedQuery()',
+    {
+      fetchPolicy: fetchPolicy,
+      networkCacheConfig: networkCacheConfig,
+    },
+  );
+
+  if (__DEV__) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useDebugValue({
+      query: preloadedQuery.name,
+      variables: preloadedQuery.variables,
+      data,
+      fetchKey,
+      fetchPolicy,
+      renderPolicy: options?.UNSTABLE_renderPolicy,
+    });
+  }
+
+  return data;
+}
+
+module.exports = usePreloadedQuery_REACT_CACHE;

package/relay-hooks/useFragment.js.flow

@@ -15,6 +15,7 @@
 
 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 +33,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 +60,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/useLazyLoadQuery.js.flow

@@ -15,12 +15,14 @@
 
 import type {
   CacheConfig,
+  ClientQuery,
   FetchPolicy,
   Query,
   RenderPolicy,
   Variables,
 } from 'relay-runtime';
 
+const HooksImplementation = require('./HooksImplementation');
 const {useTrackLoadQueryInRender} = require('./loadQuery');
 const useLazyLoadQueryNode = require('./useLazyLoadQueryNode');
 const useMemoOperationDescriptor = require('./useMemoOperationDescriptor');
@@ -29,8 +31,22 @@ const {
   __internal: {fetchQuery},
 } = require('relay-runtime');
 
-function useLazyLoadQuery<TVariables: Variables, TData>(
-  gqlQuery: Query<TVariables, TData>,
+// 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> | ClientQuery<TVariables, TData>,
+  variables: TVariables,
+  options?: {|
+    fetchKey?: string | number,
+    fetchPolicy?: FetchPolicy,
+    networkCacheConfig?: CacheConfig,
+    UNSTABLE_renderPolicy?: RenderPolicy,
+  |},
+) => TData;
+
+function useLazyLoadQuery_LEGACY<TVariables: Variables, TData>(
+  gqlQuery: Query<TVariables, TData> | ClientQuery<TVariables, TData>,
   variables: TVariables,
   options?: {|
     fetchKey?: string | number,
@@ -63,4 +79,23 @@ function useLazyLoadQuery<TVariables: Variables, TData>(
   return data;
 }
 
-module.exports = useLazyLoadQuery;
+function useLazyLoadQuery<TVariables: Variables, TData>(
+  gqlQuery: Query<TVariables, TData> | ClientQuery<TVariables, TData>,
+  variables: TVariables,
+  options?: {|
+    fetchKey?: string | number,
+    fetchPolicy?: FetchPolicy,
+    networkCacheConfig?: CacheConfig,
+    UNSTABLE_renderPolicy?: RenderPolicy,
+  |},
+): TData {
+  const impl = HooksImplementation.get();
+  if (impl) {
+    return impl.useLazyLoadQuery(gqlQuery, variables, options);
+  } else {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useLazyLoadQuery_LEGACY(gqlQuery, variables, options);
+  }
+}
+
+module.exports = (useLazyLoadQuery: UseLazyLoadQueryHookType);

package/relay-hooks/useMutation.js.flow

@@ -97,6 +97,9 @@ function useMutation<TMutation: MutationParameters>(
 
   const commit = useCallback(
     (config: UseMutationConfig<TMutation>) => {
+      if (isMountedRef.current) {
+        setMutationInFlight(true);
+      }
       const disposable = commitMutationFn(environment, {
         ...config,
         mutation,
@@ -117,9 +120,6 @@ function useMutation<TMutation: MutationParameters>(
         },
       });
       inFlightMutationsRef.current.add(disposable);
-      if (isMountedRef.current) {
-        setMutationInFlight(true);
-      }
       return disposable;
     },
     [cleanup, commitMutationFn, environment, isMountedRef, mutation],

package/relay-hooks/usePreloadedQuery.js.flow

@@ -20,6 +20,7 @@ import type {
   RenderPolicy,
 } from 'relay-runtime';
 
+const HooksImplementation = require('./HooksImplementation');
 const {useTrackLoadQueryInRender} = require('./loadQuery');
 const useLazyLoadQueryNode = require('./useLazyLoadQueryNode');
 const useMemoOperationDescriptor = require('./useMemoOperationDescriptor');
@@ -31,7 +32,18 @@ const {
 } = require('relay-runtime');
 const warning = require('warning');
 
-function usePreloadedQuery<TQuery: OperationType>(
+// 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_LEGACY<TQuery: OperationType>(
   gqlQuery: GraphQLTaggedNode,
   preloadedQuery: PreloadedQuery<TQuery>,
   options?: {|
@@ -142,4 +154,20 @@ function usePreloadedQuery<TQuery: OperationType>(
   return data;
 }
 
-module.exports = usePreloadedQuery;
+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);

package/relay-hooks/useRefetchableFragmentNode.js.flow

@@ -15,6 +15,7 @@
 
 import type {LoaderFn} from './useQueryLoader';
 import type {
+  ConcreteRequest,
   Disposable,
   FetchPolicy,
   IEnvironment,
@@ -241,7 +242,7 @@ function useRefetchableFragmentNode<
       );
     }
 
-    const handleQueryCompleted = maybeError => {
+    const handleQueryCompleted = (maybeError: void | Error) => {
       onComplete && onComplete(maybeError ?? null);
     };
 
@@ -358,17 +359,31 @@ function useRefetchableFragmentNode<
 }
 
 function useRefetchFunction<TQuery: OperationType>(
-  componentDisplayName,
-  dispatch,
-  disposeQuery,
-  fragmentData,
-  fragmentIdentifier,
-  fragmentNode,
-  fragmentRefPathInResponse,
-  identifierField,
+  componentDisplayName: string,
+  dispatch: (
+    | {|
+        environment: IEnvironment,
+        fragmentIdentifier: string,
+        type: 'reset',
+      |}
+    | {|
+        fetchPolicy?: FetchPolicy,
+        onComplete?: (Error | null) => void,
+        refetchEnvironment: ?IEnvironment,
+        refetchQuery: OperationDescriptor,
+        renderPolicy?: RenderPolicy,
+        type: 'refetch',
+      |},
+  ) => void,
+  disposeQuery: () => void,
+  fragmentData: mixed,
+  fragmentIdentifier: string,
+  fragmentNode: ReaderFragment,
+  fragmentRefPathInResponse: $ReadOnlyArray<string | number>,
+  identifierField: ?string,
   loadQuery: LoaderFn<TQuery>,
-  parentFragmentRef,
-  refetchableRequest,
+  parentFragmentRef: mixed,
+  refetchableRequest: ConcreteRequest,
 ): RefetchFn<TQuery, InternalOptions> {
   const isMountedRef = useIsMountedRef();
   const identifierValue =

package/relay-hooks/useSubscription.js.flow

@@ -16,27 +16,33 @@ import type {
   Disposable,
   GraphQLSubscriptionConfig,
   IEnvironment,
-  SubscriptionParameters,
 } from 'relay-runtime';
 
 const useRelayEnvironment = require('./useRelayEnvironment');
 const {useEffect} = require('react');
 const {requestSubscription} = require('relay-runtime');
 
-type RequestSubscriptionFn<TSubscriptionParameters: SubscriptionParameters> = (
+type RequestSubscriptionFn<TVariables, TData, TRawResponse> = (
   environment: IEnvironment,
-  config: GraphQLSubscriptionConfig<TSubscriptionParameters>,
+  config: GraphQLSubscriptionConfig<TVariables, TData, TRawResponse>,
 ) => Disposable;
 
-function useSubscription<TSubscriptionParameters: SubscriptionParameters>(
-  config: GraphQLSubscriptionConfig<TSubscriptionParameters>,
-  requestSubscriptionFn?: RequestSubscriptionFn<TSubscriptionParameters>,
+function useSubscription<TVariables, TData, TRawResponse>(
+  config: GraphQLSubscriptionConfig<TVariables, TData, TRawResponse>,
+  requestSubscriptionFn?: RequestSubscriptionFn<
+    TVariables,
+    TData,
+    TRawResponse,
+  >,
 ): void {
   // N.B. this will re-subscribe every render if config or requestSubscriptionFn
   // are not memoized.
   // Please do not pass an object defined in-line.
-  const actualRequestSubscription: RequestSubscriptionFn<TSubscriptionParameters> =
-    requestSubscriptionFn ?? (requestSubscription: $FlowFixMe);
+  const actualRequestSubscription: RequestSubscriptionFn<
+    TVariables,
+    TData,
+    TRawResponse,
+  > = requestSubscriptionFn ?? (requestSubscription: $FlowFixMe);
   const environment = useRelayEnvironment();
   useEffect(() => {
     // $FlowFixMe[method-unbinding] added when improving typing for this parameters