react-relay 14.1.0 → 16.0.0

package/relay-hooks/useRefetchableFragment.js.flow

@@ -4,18 +4,19 @@
  * 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 {RefetchFnDynamic} from './useRefetchableFragmentNode';
+import type {Options} from './useRefetchableFragmentNode';
 import type {
+  Disposable,
   FragmentType,
-  GraphQLTaggedNode,
-  OperationType,
+  RefetchableFragment,
+  Variables,
 } from 'relay-runtime';
 
 const HooksImplementation = require('./HooksImplementation');
@@ -24,66 +25,97 @@ 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, ... }) => Partial<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,
+>;
+
+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
   $Call<
-    & (<TFragmentData>( { +$data?: TFragmentData, ... }) =>  TFragmentData)
-    & (<TFragmentData>(?{ +$data?: TFragmentData, ... }) => ?TFragmentData),
+    & (<TFragmentType>( { +$fragmentSpreads: TFragmentType, ... }) =>  TData)
+    & (<TFragmentType>(?{ +$fragmentSpreads: TFragmentType, ... }) => ?TData),
     TKey,
   >,
-  RefetchFnDynamic<TQuery, TKey>,
+  RefetchFn<TVariables, 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 UseRefetchableFragmentType = <
-  TQuery: OperationType,
-  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
+  TFragmentType: FragmentType,
+  TVariables: Variables,
+  TData,
+  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
 >(
-  fragmentInput: GraphQLTaggedNode,
-  fragmentRef: TKey,
-) => ReturnType<TQuery, TKey>;
+  fragment: RefetchableFragment<TFragmentType, TData, TVariables>,
+  key: TKey,
+) => ReturnType<TVariables, TData, TKey>;
 
 function useRefetchableFragment_LEGACY<
-  TQuery: OperationType,
-  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
+  TFragmentType: FragmentType,
+  TVariables: Variables,
+  TData,
+  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
 >(
-  fragmentInput: GraphQLTaggedNode,
+  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]
+  // $FlowFixMe[incompatible-variance]
+  return [fragmentData, refetch];
 }
 
 function useRefetchableFragment<
-  TQuery: OperationType,
-  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
+  TFragmentType: FragmentType,
+  TVariables: Variables,
+  TData,
+  TKey: ?{+$fragmentSpreads: TFragmentType, ...},
 >(
-  fragmentInput: GraphQLTaggedNode,
+  fragmentInput: RefetchableFragment<TFragmentType, TData, TVariables>,
   parentFragmentRef: TKey,
-): ReturnType<TQuery, TKey> {
+): ReturnType<TVariables, TData, TKey> {
   const impl = HooksImplementation.get();
   if (impl) {
-    return impl.useRefetchableFragment<TQuery, TKey>(
+    return impl.useRefetchableFragment<TFragmentType, TVariables, TData, TKey>(
       fragmentInput,
       parentFragmentRef,
     );

package/relay-hooks/useRefetchableFragmentNode.js.flow

@@ -4,13 +4,14 @@
  * 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 {RefetchableIdentifierInfo} from '../../relay-runtime/util/ReaderNode';
 import type {LoaderFn} from './useQueryLoader';
 import type {
   ConcreteRequest,
@@ -100,7 +101,7 @@ type RefetchFnExact<TQuery: OperationType, TOptions = Options> = RefetchFnBase<
 type RefetchFnInexact<
   TQuery: OperationType,
   TOptions = Options,
-> = RefetchFnBase<$Shape<VariablesOf<TQuery>>, TOptions>;
+> = RefetchFnBase<Partial<VariablesOf<TQuery>>, TOptions>;
 
 type Action =
   | {
@@ -173,8 +174,10 @@ function useRefetchableFragmentNode<
   componentDisplayName: string,
 ): ReturnType<TQuery, TKey, InternalOptions> {
   const parentEnvironment = useRelayEnvironment();
-  const {refetchableRequest, fragmentRefPathInResponse, identifierField} =
-    getRefetchMetadata(fragmentNode, componentDisplayName);
+  const {refetchableRequest, fragmentRefPathInResponse} = getRefetchMetadata(
+    fragmentNode,
+    componentDisplayName,
+  );
   const fragmentIdentifier = getFragmentIdentifier(
     fragmentNode,
     parentFragmentRef,
@@ -207,10 +210,19 @@ 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;
+
+  const {identifierInfo} = getRefetchMetadata(
+    fragmentNode,
+    componentDisplayName,
+  );
+
   if (shouldReset) {
     dispatch({
       type: 'reset',
@@ -236,6 +248,7 @@ function useRefetchableFragmentNode<
       debugPreviousIDAndTypename = debugFunctions.getInitialIDAndType(
         refetchQuery.request.variables,
         fragmentRefPathInResponse,
+        identifierInfo?.identifierQueryVariableName,
         environment,
       );
     }
@@ -342,7 +355,7 @@ function useRefetchableFragmentNode<
     fragmentIdentifier,
     fragmentNode,
     fragmentRefPathInResponse,
-    identifierField,
+    identifierInfo,
     loadQuery,
     parentFragmentRef,
     refetchableRequest,
@@ -378,20 +391,23 @@ function useRefetchFunction<TQuery: OperationType>(
   fragmentIdentifier: string,
   fragmentNode: ReaderFragment,
   fragmentRefPathInResponse: $ReadOnlyArray<string | number>,
-  identifierField: ?string,
+  identifierInfo: ?RefetchableIdentifierInfo,
   loadQuery: LoaderFn<TQuery>,
   parentFragmentRef: mixed,
   refetchableRequest: ConcreteRequest,
 ): RefetchFn<TQuery, InternalOptions> {
   const isMountedRef = useIsMountedRef();
   const identifierValue =
-    identifierField != null &&
+    identifierInfo?.identifierField != null &&
     fragmentData != null &&
     typeof fragmentData === 'object'
-      ? fragmentData[identifierField]
+      ? fragmentData[identifierInfo.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) {
@@ -452,8 +468,10 @@ function useRefetchFunction<TQuery: OperationType>(
       // If the query needs an identifier value ('id' or similar) and one
       // was not explicitly provided, read it from the fragment data.
       if (
-        identifierField != null &&
-        !providedRefetchVariables.hasOwnProperty('id')
+        identifierInfo != null &&
+        !providedRefetchVariables.hasOwnProperty(
+          identifierInfo.identifierQueryVariableName,
+        )
       ) {
         // @refetchable fragments are guaranteed to have an `id` selection
         // if the type is Node, implements Node, or is @fetchable. Double-check
@@ -463,11 +481,13 @@ function useRefetchFunction<TQuery: OperationType>(
             false,
             'Relay: Expected result to have a string  ' +
               '`%s` in order to refetch, got `%s`.',
-            identifierField,
+            identifierInfo.identifierField,
             identifierValue,
           );
         }
-        (refetchVariables: $FlowFixMe).id = identifierValue;
+        (refetchVariables: $FlowFixMe)[
+          identifierInfo.identifierQueryVariableName
+        ] = identifierValue;
       }
 
       const refetchQuery = createOperationDescriptor(
@@ -516,10 +536,11 @@ if (__DEV__) {
     getInitialIDAndType(
       memoRefetchVariables: ?Variables,
       fragmentRefPathInResponse: $ReadOnlyArray<string | number>,
+      identifierQueryVariableName: ?string,
       environment: IEnvironment,
     ): ?DebugIDandTypename {
       const {Record} = require('relay-runtime');
-      const id = memoRefetchVariables?.id;
+      const id = memoRefetchVariables?.[identifierQueryVariableName ?? 'id'];
       if (
         fragmentRefPathInResponse.length !== 1 ||
         fragmentRefPathInResponse[0] !== 'node' ||
@@ -529,7 +550,7 @@ if (__DEV__) {
       }
       const recordSource = environment.getStore().getSource();
       const record = recordSource.get(id);
-      const typename = record && Record.getType(record);
+      const typename = record == null ? null : Record.getType(record);
       if (typename == null) {
         return null;
       }

package/relay-hooks/useRelayEnvironment.js.flow

@@ -4,18 +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
  */
 
 '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,16 +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
  */
 
 'use strict';
 
 import type {ReaderFragment} from 'relay-runtime';
 
-const {useRef} = require('react');
+const useUnsafeRef_DEPRECATED = require('./useUnsafeRef_DEPRECATED');
 const warning = require('warning');
 
 function useStaticFragmentNodeWarning(
@@ -25,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,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';
@@ -30,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,6 +6,7 @@
  *
  * @flow
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -45,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,27 +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
- */
-'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,29 +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
- */
-
-'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;