react-relay 14.0.0 → 15.0.0

package/relay-hooks/useQueryLoader.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,9 +17,10 @@ import type {
   PreloadedQuery,
 } from './EntryPointTypes.flow';
 import type {
-  GraphQLTaggedNode,
   IEnvironment,
   OperationType,
+  Query,
+  Variables,
 } from 'relay-runtime';
 
 const {loadQuery, useTrackLoadQueryInRender} = require('./loadQuery');
@@ -35,39 +34,104 @@ 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>,
-  LoaderFn<TQuery>,
-  () => void,
-];
+}>;
 
 // 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>(
-  preloadableRequest: GraphQLTaggedNode | PreloadableConcreteRequest<TQuery>,
+function requestIsLiveQuery<
+  TVariables: Variables,
+  TData,
+  TRawResponse: ?{...} = void,
+  TQuery: OperationType = {
+    response: TData,
+    variables: TVariables,
+    rawResponse?: $NonMaybeType<TRawResponse>,
+  },
+>(
+  preloadableRequest:
+    | Query<TVariables, TData, TRawResponse>
+    | PreloadableConcreteRequest<TQuery>,
 ): boolean {
   if (preloadableRequest.kind === 'PreloadableConcreteRequest') {
-    return (preloadableRequest: $FlowFixMe).params.metadata.live !== undefined;
+    return preloadableRequest.params.metadata.live !== undefined;
   }
   const request = getRequest(preloadableRequest);
   return request.params.metadata.live !== undefined;
 }
 
-function useQueryLoader<TQuery: OperationType>(
-  preloadableRequest: GraphQLTaggedNode | PreloadableConcreteRequest<TQuery>,
+type UseQueryLoaderHookReturnType<
+  TVariables: Variables,
+  TData,
+  TRawResponse: ?{...} = void,
+> = [
+  ?PreloadedQuery<{
+    response: TData,
+    variables: TVariables,
+    rawResponse?: $NonMaybeType<TRawResponse>,
+  }>,
+  (variables: TVariables, options?: UseQueryLoaderLoadQueryOptions) => void,
+  () => void,
+];
+
+type ExtractVariablesType = <T>({+variables: T, ...}) => T;
+type ExtractResponseType = <T>({+response: T, ...}) => T;
+
+declare function useQueryLoader<
+  TVariables: Variables,
+  TData,
+  TRawResponse: ?{...} = void,
+>(
+  preloadableRequest: Query<TVariables, TData, TRawResponse>,
+): UseQueryLoaderHookReturnType<TVariables, TData>;
+
+declare function useQueryLoader<
+  TVariables: Variables,
+  TData,
+  TRawResponse: ?{...} = void,
+>(
+  preloadableRequest: Query<TVariables, TData, TRawResponse>,
+  initialQueryReference: ?PreloadedQuery<{
+    response: TData,
+    variables: TVariables,
+    rawResponse?: $NonMaybeType<TRawResponse>,
+  }>,
+): UseQueryLoaderHookReturnType<TVariables, TData>;
+
+declare function useQueryLoader<TQuery: OperationType>(
+  preloadableRequest: PreloadableConcreteRequest<TQuery>,
   initialQueryReference?: ?PreloadedQuery<TQuery>,
-): UseQueryLoaderHookReturnType<TQuery> {
+): UseQueryLoaderHookReturnType<
+  $Call<ExtractVariablesType, TQuery>,
+  $Call<ExtractResponseType, TQuery>,
+>;
+
+function useQueryLoader<
+  TVariables: Variables,
+  TData,
+  TRawResponse: ?{...} = void,
+>(
+  preloadableRequest: Query<TVariables, TData, TRawResponse>,
+  initialQueryReference?: ?PreloadedQuery<{
+    response: TData,
+    variables: TVariables,
+    rawResponse?: $NonMaybeType<TRawResponse>,
+  }>,
+): UseQueryLoaderHookReturnType<TVariables, TData> {
+  type QueryType = {
+    response: TData,
+    variables: TVariables,
+    rawResponse?: $NonMaybeType<TRawResponse>,
+  };
+
   /**
    * We want to always call `queryReference.dispose()` for every call to
    * `setQueryReference(loadQuery(...))` so that no leaks of data in Relay stores
@@ -96,15 +160,15 @@ function useQueryLoader<TQuery: OperationType>(
 
   const isMountedRef = useIsMountedRef();
   const undisposedQueryReferencesRef = useRef<
-    Set<PreloadedQuery<TQuery> | NullQueryReference>,
+    Set<PreloadedQuery<QueryType> | NullQueryReference>,
   >(new Set([initialQueryReferenceInternal]));
 
   const [queryReference, setQueryReference] = useState<
-    PreloadedQuery<TQuery> | NullQueryReference,
+    PreloadedQuery<QueryType> | NullQueryReference,
   >(() => initialQueryReferenceInternal);
 
   const [previousInitialQueryReference, setPreviousInitialQueryReference] =
-    useState<PreloadedQuery<TQuery> | NullQueryReference>(
+    useState<PreloadedQuery<QueryType> | NullQueryReference>(
       () => initialQueryReferenceInternal,
     );
 
@@ -127,10 +191,7 @@ function useQueryLoader<TQuery: OperationType>(
   }, [isMountedRef]);
 
   const queryLoaderCallback = useCallback(
-    (
-      variables: TQuery['variables'],
-      options?: ?UseQueryLoaderLoadQueryOptions,
-    ) => {
+    (variables: TVariables, options?: ?UseQueryLoaderLoadQueryOptions) => {
       const mergedOptions: ?UseQueryLoaderLoadQueryOptions =
         options != null && options.hasOwnProperty('__environment')
           ? {
@@ -140,7 +201,7 @@ function useQueryLoader<TQuery: OperationType>(
             }
           : options;
       if (isMountedRef.current) {
-        const updatedQueryReference = loadQuery(
+        const updatedQueryReference = loadQuery<QueryType>(
           options?.__environment ?? environment,
           preloadableRequest,
           variables,

package/relay-hooks/useRefetchableFragment.js.flow

@@ -4,64 +4,124 @@
  * 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 {RefetchFnDynamic} from './useRefetchableFragmentNode';
+import type {Options} from './useRefetchableFragmentNode';
 import type {
+  Disposable,
   FragmentType,
-  GraphQLTaggedNode,
-  OperationType,
+  RefetchableFragment,
+  Variables,
 } from 'relay-runtime';
 
+const HooksImplementation = require('./HooksImplementation');
 const useRefetchableFragmentNode = require('./useRefetchableFragmentNode');
 const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
 const {useDebugValue} = require('react');
 const {getFragment} = require('relay-runtime');
 
-type ReturnType<TQuery: OperationType, TKey: ?{+$data?: mixed, ...}> = [
+type RefetchVariables<TVariables, TKey> =
+  // NOTE: This $Call ensures that the type of the returned variables is either:
+  //   - nullable if the provided ref type is nullable
+  //   - non-nullable if the provided ref type is non-nullable
+  // prettier-ignore
+  $Call<
+    & (<TFragmentType>( { +$fragmentSpreads: TFragmentType, ... }) => $Shape<TVariables>)
+    & (<TFragmentType>(?{ +$fragmentSpreads: TFragmentType, ... }) => TVariables),
+    TKey,
+  >;
+
+type RefetchFnBase<TVars, TOptions> = (
+  vars: TVars,
+  options?: TOptions,
+) => Disposable;
+
+export 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
   $Call<
-    & (<TFragmentData>( { +$data?: TFragmentData, ... }) =>  TFragmentData)
-    & (<TFragmentData>(?{ +$data?: TFragmentData, ... }) => ?TFragmentData),
+    & (<TFragmentType>( { +$fragmentSpreads: TFragmentType, ... }) =>  TData)
+    & (<TFragmentType>(?{ +$fragmentSpreads: TFragmentType, ... }) => ?TData),
     TKey,
   >,
-  RefetchFnDynamic<TQuery, TKey>,
+  RefetchFn<TVariables, TKey>,
 ];
 
-function useRefetchableFragment<
-  TQuery: OperationType,
-  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
+export type UseRefetchableFragmentType = <
+  TFragmentType: FragmentType,
+  TVariables: Variables,
+  TData,
+  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
 >(
-  fragmentInput: GraphQLTaggedNode,
+  fragment: RefetchableFragment<TFragmentType, TData, TVariables>,
+  key: TKey,
+) => ReturnType<TVariables, TData, TKey>;
+
+function useRefetchableFragment_LEGACY<
+  TFragmentType: FragmentType,
+  TVariables: Variables,
+  TData,
+  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
+>(
+  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} = useRefetchableFragmentNode<TQuery, TKey>(
-    fragmentNode,
-    fragmentRef,
-    'useRefetchableFragment()',
-  );
+  const {fragmentData, refetch} = useRefetchableFragmentNode<
+    {
+      response: TData,
+      variables: TVariables,
+    },
+    {
+      +$data: mixed,
+      ...
+    },
+  >(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];
+}
+
+function useRefetchableFragment<
+  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.useRefetchableFragment<TFragmentType, TVariables, TData, TKey>(
+      fragmentInput,
+      parentFragmentRef,
+    );
+  } else {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useRefetchableFragment_LEGACY(fragmentInput, parentFragmentRef);
+  }
 }
 
 module.exports = useRefetchableFragment;

package/relay-hooks/useRefetchableFragmentNode.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 {LoaderFn} from './useQueryLoader';
@@ -71,24 +69,24 @@ export type ReturnType<
   TQuery: OperationType,
   TKey: ?{+$data?: mixed, ...},
   TOptions = Options,
-> = {|
+> = {
   fragmentData: mixed,
   fragmentRef: mixed,
   refetch: RefetchFnDynamic<TQuery, TKey, TOptions>,
   disableStoreUpdates: () => void,
   enableStoreUpdates: () => void,
-|};
+};
 
-export type Options = {|
+export type Options = {
   fetchPolicy?: FetchPolicy,
   onComplete?: (Error | null) => void,
   UNSTABLE_renderPolicy?: RenderPolicy,
-|};
+};
 
-type InternalOptions = {|
+type InternalOptions = {
   ...Options,
   __environment?: IEnvironment,
-|};
+};
 
 type RefetchFnBase<TVars, TOptions> = (
   vars: TVars,
@@ -105,21 +103,21 @@ type RefetchFnInexact<
 > = RefetchFnBase<$Shape<VariablesOf<TQuery>>, TOptions>;
 
 type Action =
-  | {|
+  | {
       type: 'reset',
       environment: IEnvironment,
       fragmentIdentifier: string,
-    |}
-  | {|
+    }
+  | {
       type: 'refetch',
       refetchQuery: OperationDescriptor,
       fetchPolicy?: FetchPolicy,
       renderPolicy?: RenderPolicy,
       onComplete?: (Error | null) => void,
       refetchEnvironment: ?IEnvironment,
-    |};
+    };
 
-type RefetchState = {|
+type RefetchState = {
   fetchPolicy: FetchPolicy | void,
   mirroredEnvironment: IEnvironment,
   mirroredFragmentIdentifier: string,
@@ -127,7 +125,7 @@ type RefetchState = {|
   refetchEnvironment?: ?IEnvironment,
   refetchQuery: OperationDescriptor | null,
   renderPolicy: RenderPolicy | void,
-|};
+};
 
 type DebugIDandTypename = {
   id: string,
@@ -209,8 +207,11 @@ function useRefetchableFragmentNode<
   const shouldReset =
     environment !== mirroredEnvironment ||
     fragmentIdentifier !== mirroredFragmentIdentifier;
-  const [queryRef, loadQuery, disposeQuery] =
-    useQueryLoader<TQuery>(refetchableRequest);
+  const [queryRef, loadQuery, disposeQuery] = useQueryLoader<
+    TQuery['variables'],
+    TQuery['response'],
+    TQuery['rawResponse'],
+  >((refetchableRequest: $FlowFixMe));
 
   let fragmentRef = parentFragmentRef;
   if (shouldReset) {
@@ -361,19 +362,19 @@ function useRefetchableFragmentNode<
 function useRefetchFunction<TQuery: OperationType>(
   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,
@@ -393,7 +394,10 @@ function useRefetchFunction<TQuery: OperationType>(
       ? fragmentData[identifierField]
       : null;
   return useCallback(
-    (providedRefetchVariables, options) => {
+    (
+      providedRefetchVariables: VariablesOf<TQuery>,
+      options: void | InternalOptions,
+    ) => {
       // Bail out and warn if we're trying to refetch after the component
       // has unmounted
       if (isMountedRef.current !== true) {

package/relay-hooks/useRelayEnvironment.js.flow

@@ -4,20 +4,18 @@
  * 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 {IEnvironment} from 'relay-runtime';
 
+const ReactRelayContext = require('./../ReactRelayContext');
 const invariant = require('invariant');
 const {useContext} = require('react');
-const ReactRelayContext = require('react-relay/ReactRelayContext');
 
 function useRelayEnvironment(): IEnvironment {
   const context = useContext(ReactRelayContext);

package/relay-hooks/useStaticFragmentNodeWarning.js.flow

@@ -4,18 +4,16 @@
  * 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 {ReaderFragment} from 'relay-runtime';
 
-const {useRef} = require('react');
+const useUnsafeRef_DEPRECATED = require('./useUnsafeRef_DEPRECATED');
 const warning = require('warning');
 
 function useStaticFragmentNodeWarning(
@@ -27,7 +25,7 @@ function useStaticFragmentNodeWarning(
     // __DEV__ setting which shouldn't change. This allows us to only pay the
     // cost of `useRef` in development mode to produce the warning.
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const initialPropRef = useRef(fragmentNode.name);
+    const initialPropRef = useUnsafeRef_DEPRECATED(fragmentNode.name);
     warning(
       initialPropRef.current === fragmentNode.name,
       'Relay: The %s has to remain the same over the lifetime of a component. ' +

package/relay-hooks/useSubscribeToInvalidationState.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 {DataID, Disposable} from 'relay-runtime';
@@ -32,7 +30,7 @@ function useSubscribeToInvalidationState(
   callback: () => void,
 ): Disposable {
   const environment = useRelayEnvironment();
-  const disposableRef = useRef(null);
+  const disposableRef = useRef<null | Disposable>(null);
 
   const stableDataIDs = Array.from(dataIDs).sort().join('');
   useEffect(() => {

package/relay-hooks/useSubscription.js.flow

@@ -6,10 +6,9 @@
  *
  * @flow
  * @format
+ * @oncall relay
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {
@@ -47,7 +46,6 @@ function useSubscription<TVariables, TData, TRawResponse>(
   useEffect(() => {
     // $FlowFixMe[method-unbinding] added when improving typing for this parameters
     const {dispose} = actualRequestSubscription(environment, config);
-    // $FlowFixMe[incompatible-call]
     return dispose;
   }, [environment, config, actualRequestSubscription]);
 }

package/relay-hooks/useUnsafeRef_DEPRECATED.js.flow

@@ -0,0 +1,25 @@
+/**
+ * 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
+ * @format
+ * @oncall relay
+ */
+
+'use strict';
+
+const {useMemo} = require('react');
+
+/**
+ * Like `useRef`, but does not warn when accessed during render. It's a bad
+ * pattern to read or write from a ref during render as it does not trigger
+ * a rerender and might result in bugs.
+ */
+function useUnsafeRef_DEPRECATED<T>(init: T): {current: T} {
+  return useMemo<{current: T}>(() => ({current: init}), []);
+}
+
+module.exports = useUnsafeRef_DEPRECATED;

package/lib/readContext.js

@@ -1,28 +0,0 @@
-/**
- * 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.
- *
- * 
- * @format
- */
-// flowlint ambiguous-object-type:error
-'use strict';
-
-var React = require('react'); // $FlowFixMe[incompatible-use]
-
-
-var _React$__SECRET_INTER =
-/* $FlowFixMe[prop-missing] Flow doesn't know about React's internals for
- * good reason, but for now, Relay needs the dispatcher to read context. */
-React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-    ReactCurrentDispatcher = _React$__SECRET_INTER.ReactCurrentDispatcher,
-    ReactCurrentOwner = _React$__SECRET_INTER.ReactCurrentOwner;
-
-function readContext(Context) {
-  var dispatcher = ReactCurrentDispatcher != null ? ReactCurrentDispatcher.current : ReactCurrentOwner.currentDispatcher;
-  return dispatcher.readContext(Context);
-}
-
-module.exports = readContext;

package/readContext.js.flow

@@ -1,31 +0,0 @@
-/**
- * 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
- * @format
- */
-
-// flowlint ambiguous-object-type:error
-
-'use strict';
-
-const React = require('react');
-
-// $FlowFixMe[incompatible-use]
-const {ReactCurrentDispatcher, ReactCurrentOwner} =
-  /* $FlowFixMe[prop-missing] Flow doesn't know about React's internals for
-   * good reason, but for now, Relay needs the dispatcher to read context. */
-  React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-
-function readContext<T>(Context: React.Context<T>): T {
-  const dispatcher =
-    ReactCurrentDispatcher != null
-      ? ReactCurrentDispatcher.current
-      : ReactCurrentOwner.currentDispatcher;
-  return dispatcher.readContext(Context);
-}
-
-module.exports = readContext;