react-relay 12.0.0 → 13.0.0

package/relay-hooks/useFragment.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -13,82 +13,51 @@
 
 'use strict';
 
-const useFragmentNode = require('./useFragmentNode');
-const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
+import type {Fragment, FragmentType, GraphQLTaggedNode} from 'relay-runtime';
 
 const {useTrackLoadQueryInRender} = require('./loadQuery');
+const useFragmentNode = require('./useFragmentNode');
+const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
 const {useDebugValue} = require('react');
 const {getFragment} = require('relay-runtime');
 
-import type {GraphQLTaggedNode, FragmentReference} from 'relay-runtime';
-
-// NOTE: These declares ensure that the type of the returned data is:
-//   - non-nullable if the provided ref type is non-nullable
-//   - nullable if the provided ref type is nullable
-//   - array of non-nullable if the privoided ref type is an array of
-//     non-nullable refs
-//   - array of nullable if the privoided ref type is an array of nullable refs
+type HasSpread<TFragmentType> = {
+  +$fragmentSpreads: TFragmentType,
+  ...
+};
 
-declare function useFragment<
-  TKey: {+$data?: mixed, +$fragmentRefs: FragmentReference, ...},
->(
-  fragmentInput: GraphQLTaggedNode,
-  fragmentRef: TKey,
-): $Call<<TFragmentData>({+$data?: TFragmentData, ...}) => TFragmentData, TKey>;
+// if the key is non-nullable, return non-nullable value
+declare function useFragment<TFragmentType: FragmentType, TData>(
+  fragment: Fragment<TFragmentType, TData>,
+  key: HasSpread<TFragmentType>,
+): TData;
 
-declare function useFragment<
-  TKey: ?{+$data?: mixed, +$fragmentRefs: FragmentReference, ...},
->(
-  fragmentInput: GraphQLTaggedNode,
-  fragmentRef: TKey,
-): $Call<
-  <TFragmentData>(?{+$data?: TFragmentData, ...}) => ?TFragmentData,
-  TKey,
->;
+// if the key is nullable, return nullable value
+declare function useFragment<TFragmentType: FragmentType, TData>(
+  fragment: Fragment<TFragmentType, TData>,
+  key: ?HasSpread<TFragmentType>,
+): ?TData;
 
-declare function useFragment<
-  TKey: $ReadOnlyArray<{
-    +$data?: mixed,
-    +$fragmentRefs: FragmentReference,
-    ...
-  }>,
->(
-  fragmentInput: GraphQLTaggedNode,
-  fragmentRef: TKey,
-): $Call<
-  <TFragmentData>(
-    $ReadOnlyArray<{+$data?: TFragmentData, ...}>,
-  ) => TFragmentData,
-  TKey,
->;
+// 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;
 
-declare function useFragment<
-  TKey: ?$ReadOnlyArray<{
-    +$data?: mixed,
-    +$fragmentRefs: FragmentReference,
-    ...
-  }>,
->(
-  fragmentInput: GraphQLTaggedNode,
-  fragmentRef: TKey,
-): $Call<
-  <TFragmentData>(
-    ?$ReadOnlyArray<{+$data?: TFragmentData, ...}>,
-  ) => ?TFragmentData,
-  TKey,
->;
+// if the key is a nullable array of keys, return nullable array
+declare function useFragment<TFragmentType: FragmentType, TData>(
+  fragment: Fragment<TFragmentType, TData>,
+  key: ?$ReadOnlyArray<HasSpread<TFragmentType>>,
+): ?TData;
 
-function useFragment(
-  fragmentInput: GraphQLTaggedNode,
-  fragmentRef: mixed,
-): mixed {
+function useFragment(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();
 
-  const fragmentNode = getFragment(fragmentInput);
+  const fragmentNode = getFragment(fragment);
   useStaticFragmentNodeWarning(fragmentNode, 'first argument of useFragment()');
-  const {data} = useFragmentNode<_>(fragmentNode, fragmentRef, 'useFragment()');
+  const {data} = useFragmentNode<_>(fragmentNode, key, 'useFragment()');
   if (__DEV__) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useDebugValue({fragment: fragmentNode.name, data});

package/relay-hooks/useFragmentNode.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -13,14 +13,13 @@
 
 'use strict';
 
-const useRelayEnvironment = require('./useRelayEnvironment');
-const warning = require('warning');
+import type {ReaderFragment} from 'relay-runtime';
 
 const {getFragmentResourceForEnvironment} = require('./FragmentResource');
+const useRelayEnvironment = require('./useRelayEnvironment');
 const {useEffect, useRef, useState} = require('react');
 const {getFragmentIdentifier} = require('relay-runtime');
-
-import type {ReaderFragment} from 'relay-runtime';
+const warning = require('warning');
 
 type ReturnType<TFragmentData: mixed> = {|
   data: TFragmentData,
@@ -51,9 +50,8 @@ function useFragmentNode<TFragmentData: mixed>(
   const isListeningForUpdatesRef = useRef(true);
   function enableStoreUpdates() {
     isListeningForUpdatesRef.current = true;
-    const didMissUpdates = FragmentResource.checkMissedUpdates(
-      fragmentResult,
-    )[0];
+    const didMissUpdates =
+      FragmentResource.checkMissedUpdates(fragmentResult)[0];
     if (didMissUpdates) {
       handleDataUpdate();
     }

package/relay-hooks/useIsMountedRef.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.

package/relay-hooks/useIsOperationNodeActive.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -11,18 +11,16 @@
 
 'use strict';
 
-const React = require('react');
+import type {ReaderFragment} from 'relay-runtime';
 
-const invariant = require('invariant');
 const useRelayEnvironment = require('./useRelayEnvironment');
-
+const invariant = require('invariant');
+const React = require('react');
 const {
   __internal: {getObservableForActiveRequest},
   getSelector,
 } = require('relay-runtime');
 
-import type {ReaderFragment} from 'relay-runtime';
-
 const {useEffect, useState, useMemo} = React;
 
 function useIsOperationNodeActive(

package/relay-hooks/useIsParentQueryActive.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -11,15 +11,14 @@
 
 'use strict';
 
+import type {FragmentType, GraphQLTaggedNode} from 'relay-runtime';
+
 const useIsOperationNodeActive = require('./useIsOperationNodeActive');
 const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
-
 const {getFragment} = require('relay-runtime');
 
-import type {GraphQLTaggedNode, FragmentReference} from 'relay-runtime';
-
 function useIsParentQueryActive<
-  TKey: ?{+$data?: mixed, +$fragmentRefs: FragmentReference, ...},
+  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
 >(fragmentInput: GraphQLTaggedNode, fragmentRef: TKey): boolean {
   const fragmentNode = getFragment(fragmentInput);
   useStaticFragmentNodeWarning(

package/relay-hooks/useLazyLoadQuery.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -13,34 +13,32 @@
 
 'use strict';
 
+import type {
+  CacheConfig,
+  FetchPolicy,
+  Query,
+  RenderPolicy,
+  Variables,
+} from 'relay-runtime';
+
+const {useTrackLoadQueryInRender} = require('./loadQuery');
 const useLazyLoadQueryNode = require('./useLazyLoadQueryNode');
 const useMemoOperationDescriptor = require('./useMemoOperationDescriptor');
 const useRelayEnvironment = require('./useRelayEnvironment');
-
-const {useTrackLoadQueryInRender} = require('./loadQuery');
 const {
   __internal: {fetchQuery},
 } = require('relay-runtime');
 
-import type {
-  CacheConfig,
-  FetchPolicy,
-  GraphQLTaggedNode,
-  OperationType,
-  RenderPolicy,
-  VariablesOf,
-} from 'relay-runtime';
-
-function useLazyLoadQuery<TQuery: OperationType>(
-  gqlQuery: GraphQLTaggedNode,
-  variables: VariablesOf<TQuery>,
+function useLazyLoadQuery<TVariables: Variables, TData>(
+  gqlQuery: Query<TVariables, TData>,
+  variables: TVariables,
   options?: {|
     fetchKey?: string | number,
     fetchPolicy?: FetchPolicy,
     networkCacheConfig?: CacheConfig,
     UNSTABLE_renderPolicy?: RenderPolicy,
   |},
-): $ElementType<TQuery, 'response'> {
+): TData {
   // We need to use this hook in order to be able to track if
   // loadQuery was called during render
   useTrackLoadQueryInRender();

package/relay-hooks/useLazyLoadQueryNode.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -13,18 +13,6 @@
 
 'use strict';
 
-const ProfilerContext = require('./ProfilerContext');
-const React = require('react');
-
-const useFetchTrackingRef = require('./useFetchTrackingRef');
-const useFragmentNode = require('./useFragmentNode');
-const useRelayEnvironment = require('./useRelayEnvironment');
-
-const {
-  getQueryResourceForEnvironment,
-  getQueryCacheIdentifier,
-} = require('./QueryResource');
-
 import type {
   FetchPolicy,
   GraphQLResponse,
@@ -34,6 +22,16 @@ import type {
   RenderPolicy,
 } from 'relay-runtime';
 
+const ProfilerContext = require('./ProfilerContext');
+const {
+  getQueryCacheIdentifier,
+  getQueryResourceForEnvironment,
+} = require('./QueryResource');
+const useFetchTrackingRef = require('./useFetchTrackingRef');
+const useFragmentNode = require('./useFragmentNode');
+const useRelayEnvironment = require('./useRelayEnvironment');
+const React = require('react');
+
 const {useContext, useEffect, useState, useRef} = React;
 
 function useLazyLoadQueryNode<TQuery: OperationType>({
@@ -50,7 +48,7 @@ function useLazyLoadQueryNode<TQuery: OperationType>({
   fetchPolicy?: ?FetchPolicy,
   fetchKey?: ?string | ?number,
   renderPolicy?: ?RenderPolicy,
-|}): $ElementType<TQuery, 'response'> {
+|}): TQuery['response'] {
   const environment = useRelayEnvironment();
   const profilerContext = useContext(ProfilerContext);
   const QueryResource = getQueryResourceForEnvironment(environment);

package/relay-hooks/useLoadMoreFunction.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -13,34 +13,33 @@
 
 'use strict';
 
-const invariant = require('invariant');
+import type {
+  ConcreteRequest,
+  Direction,
+  Disposable,
+  GraphQLResponse,
+  Observer,
+  OperationType,
+  ReaderFragment,
+  ReaderPaginationMetadata,
+  VariablesOf,
+} from 'relay-runtime';
+
 const useFetchTrackingRef = require('./useFetchTrackingRef');
 const useIsMountedRef = require('./useIsMountedRef');
 const useIsOperationNodeActive = require('./useIsOperationNodeActive');
 const useRelayEnvironment = require('./useRelayEnvironment');
-const warning = require('warning');
-
+const invariant = require('invariant');
 const {useCallback, useEffect, useState} = require('react');
 const {
   ConnectionInterface,
   __internal: {fetchQuery},
   createOperationDescriptor,
   getPaginationVariables,
-  getValueAtPath,
   getSelector,
+  getValueAtPath,
 } = require('relay-runtime');
-
-import type {
-  ConcreteRequest,
-  Direction,
-  Disposable,
-  GraphQLResponse,
-  Observer,
-  OperationType,
-  ReaderFragment,
-  ReaderPaginationMetadata,
-  VariablesOf,
-} from 'relay-runtime';
+const warning = require('warning');
 
 export type LoadMoreFn<TQuery: OperationType> = (
   count: number,
@@ -83,12 +82,8 @@ function useLoadMoreFunction<TQuery: OperationType>(
     identifierField,
   } = args;
   const environment = useRelayEnvironment();
-  const {
-    isFetchingRef,
-    startFetch,
-    disposeFetch,
-    completeFetch,
-  } = useFetchTrackingRef();
+  const {isFetchingRef, startFetch, disposeFetch, completeFetch} =
+    useFetchTrackingRef();
   const identifierValue =
     identifierField != null &&
     fragmentData != null &&
@@ -97,9 +92,8 @@ function useLoadMoreFunction<TQuery: OperationType>(
       : null;
   const isMountedRef = useIsMountedRef();
   const [mirroredEnvironment, setMirroredEnvironment] = useState(environment);
-  const [mirroredFragmentIdentifier, setMirroredFragmentIdentifier] = useState(
-    fragmentIdentifier,
-  );
+  const [mirroredFragmentIdentifier, setMirroredFragmentIdentifier] =
+    useState(fragmentIdentifier);
 
   const isParentQueryActive = useIsOperationNodeActive(
     fragmentNode,
@@ -189,7 +183,6 @@ function useLoadMoreFunction<TQuery: OperationType>(
       const parentVariables = fragmentSelector.owner.variables;
       const fragmentVariables = fragmentSelector.variables;
       const extraVariables = options?.UNSTABLE_extraVariables;
-      // $FlowFixMe[cannot-spread-interface]
       const baseVariables = {
         ...parentVariables,
         ...fragmentVariables,
@@ -199,7 +192,6 @@ function useLoadMoreFunction<TQuery: OperationType>(
         count,
         cursor,
         baseVariables,
-        // $FlowFixMe[cannot-spread-interface]
         {...extraVariables},
         paginationMetadata,
       );

package/relay-hooks/useMemoOperationDescriptor.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -13,19 +13,17 @@
 
 'use strict';
 
-const React = require('react');
-
-const useMemoVariables = require('./useMemoVariables');
-
-const {createOperationDescriptor, getRequest} = require('relay-runtime');
-
 import type {
+  CacheConfig,
   GraphQLTaggedNode,
   OperationDescriptor,
   Variables,
-  CacheConfig,
 } from 'relay-runtime';
 
+const useMemoVariables = require('./useMemoVariables');
+const React = require('react');
+const {createOperationDescriptor, getRequest} = require('relay-runtime');
+
 const {useMemo} = React;
 
 function useMemoOperationDescriptor(

package/relay-hooks/useMemoVariables.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -13,11 +13,10 @@
 
 'use strict';
 
-const React = require('react');
+import type {Variables} from 'relay-runtime';
 
 const areEqual = require('areEqual');
-
-import type {Variables} from 'relay-runtime';
+const React = require('react');
 
 const {useMemo, useRef, useState} = React;
 
@@ -45,9 +44,10 @@ function useMemoVariables<TVariables: Variables | null>(
   // 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,
-  ]);
+  const memoVariables = useMemo(
+    () => variables,
+    [variablesChangedGenerationRef.current],
+  );
   return [memoVariables, variablesChangedGenerationRef.current ?? 0];
 }
 

package/relay-hooks/useMutation.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -13,46 +13,43 @@
 
 'use strict';
 
-const React = require('react');
-
-const useRelayEnvironment = require('./useRelayEnvironment');
-
-const {commitMutation: defaultCommitMutation} = require('relay-runtime');
-const {useState, useEffect, useRef, useCallback} = React;
-const useIsMountedRef = require('./useIsMountedRef');
-
 import type {
-  GraphQLTaggedNode,
+  DeclarativeMutationConfig,
   Disposable,
+  GraphQLTaggedNode,
+  IEnvironment,
   MutationConfig,
   MutationParameters,
-  IEnvironment,
   PayloadError,
-  DeclarativeMutationConfig,
   SelectorStoreUpdater,
   UploadableMap,
 } from 'relay-runtime';
 
+const useIsMountedRef = require('./useIsMountedRef');
+const useRelayEnvironment = require('./useRelayEnvironment');
+const React = require('react');
+const {commitMutation: defaultCommitMutation} = require('relay-runtime');
+
+const {useState, useEffect, useRef, useCallback} = React;
+
 export type UseMutationConfig<TMutation: MutationParameters> = {|
   configs?: Array<DeclarativeMutationConfig>,
   onError?: ?(error: Error) => void,
   onCompleted?: ?(
-    response: $ElementType<TMutation, 'response'>,
+    response: TMutation['response'],
     errors: ?Array<PayloadError>,
   ) => void,
+  onNext?: ?() => void,
   onUnsubscribe?: ?() => void,
-  optimisticResponse?: $ElementType<
-    {
-      +rawResponse?: {...},
-      ...TMutation,
-      ...
-    },
-    'rawResponse',
-  >,
-  optimisticUpdater?: ?SelectorStoreUpdater,
-  updater?: ?SelectorStoreUpdater,
+  optimisticResponse?: {
+    +rawResponse?: {...},
+    ...TMutation,
+    ...
+  }['rawResponse'],
+  optimisticUpdater?: ?SelectorStoreUpdater<TMutation['response']>,
+  updater?: ?SelectorStoreUpdater<TMutation['response']>,
   uploadables?: UploadableMap,
-  variables: $ElementType<TMutation, 'variables'>,
+  variables: TMutation['variables'],
 |};
 
 function useMutation<TMutation: MutationParameters>(
@@ -105,15 +102,18 @@ function useMutation<TMutation: MutationParameters>(
         mutation,
         onCompleted: (response, errors) => {
           cleanup(disposable);
-          config.onCompleted && config.onCompleted(response, errors);
+          config.onCompleted?.(response, errors);
         },
         onError: error => {
           cleanup(disposable);
-          config.onError && config.onError(error);
+          config.onError?.(error);
         },
         onUnsubscribe: () => {
           cleanup(disposable);
-          config.onUnsubscribe && config.onUnsubscribe();
+          config.onUnsubscribe?.();
+        },
+        onNext: () => {
+          config.onNext?.();
         },
       });
       inFlightMutationsRef.current.add(disposable);