react-relay 11.0.2 → 13.0.0-rc.2

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);
@@ -120,6 +118,14 @@ function useLazyLoadQueryNode<TQuery: OperationType>({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [environment, cacheIdentifier]);
 
+  useEffect(() => {
+    // Release any temporary retain that's not released. At this point, if the
+    // cacheIdentifier doesn't change, the query is still permanently retained,
+    // and the temporary retain is redundant.
+    QueryResource.releaseTemporaryRetain(preparedQueryResult);
+    // This effect is intended to run on every commit, thus no dependency
+  });
+
   const {fragmentNode, fragmentRef} = preparedQueryResult;
   const {data} = useFragmentNode(
     fragmentNode,

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,25 +13,9 @@
 
 'use strict';
 
-const getPaginationVariables = require('./getPaginationVariables');
-const getValueAtPath = require('./getValueAtPath');
-const invariant = require('invariant');
-const useFetchTrackingRef = require('./useFetchTrackingRef');
-const useIsMountedRef = require('./useIsMountedRef');
-const useIsOperationNodeActive = require('./useIsOperationNodeActive');
-const useRelayEnvironment = require('./useRelayEnvironment');
-const warning = require('warning');
-
-const {useCallback, useEffect, useState} = require('react');
-const {
-  ConnectionInterface,
-  __internal: {fetchQuery},
-  createOperationDescriptor,
-  getSelector,
-} = require('relay-runtime');
-
 import type {
   ConcreteRequest,
+  Direction,
   Disposable,
   GraphQLResponse,
   Observer,
@@ -41,7 +25,21 @@ import type {
   VariablesOf,
 } from 'relay-runtime';
 
-export type Direction = 'forward' | 'backward';
+const useFetchTrackingRef = require('./useFetchTrackingRef');
+const useIsMountedRef = require('./useIsMountedRef');
+const useIsOperationNodeActive = require('./useIsOperationNodeActive');
+const useRelayEnvironment = require('./useRelayEnvironment');
+const invariant = require('invariant');
+const {useCallback, useEffect, useState} = require('react');
+const {
+  ConnectionInterface,
+  __internal: {fetchQuery},
+  createOperationDescriptor,
+  getPaginationVariables,
+  getSelector,
+  getValueAtPath,
+} = require('relay-runtime');
+const warning = require('warning');
 
 export type LoadMoreFn<TQuery: OperationType> = (
   count: number,
@@ -84,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 &&
@@ -98,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,
@@ -190,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,
@@ -200,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);

package/relay-hooks/usePaginationFragment.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,24 +13,26 @@
 
 'use strict';
 
-const getPaginationMetadata = require('./getPaginationMetadata');
-const useLoadMoreFunction = require('./useLoadMoreFunction');
-const useRefetchableFragmentNode = require('./useRefetchableFragmentNode');
-const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
-
-const {useCallback, useDebugValue, useState} = require('react');
-const {getFragment, getFragmentIdentifier} = require('relay-runtime');
-
 import type {LoadMoreFn, UseLoadMoreFunctionArgs} from './useLoadMoreFunction';
 import type {RefetchFnDynamic} from './useRefetchableFragmentNode';
 import type {
+  FragmentType,
   GraphQLResponse,
   GraphQLTaggedNode,
   Observer,
   OperationType,
-  FragmentReference,
 } from 'relay-runtime';
 
+const useLoadMoreFunction = require('./useLoadMoreFunction');
+const useRefetchableFragmentNode = require('./useRefetchableFragmentNode');
+const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
+const {useCallback, useDebugValue, useState} = require('react');
+const {
+  getFragment,
+  getFragmentIdentifier,
+  getPaginationMetadata,
+} = require('relay-runtime');
+
 export type ReturnType<TQuery: OperationType, TKey, TFragmentData> = {|
   data: TFragmentData,
   loadNext: LoadMoreFn<TQuery>,
@@ -44,7 +46,7 @@ export type ReturnType<TQuery: OperationType, TKey, TFragmentData> = {|
 
 function usePaginationFragment<
   TQuery: OperationType,
-  TKey: ?{+$data?: mixed, +$fragmentRefs: FragmentReference, ...},
+  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
 >(
   fragmentInput: GraphQLTaggedNode,
   parentFragmentRef: TKey,
@@ -82,42 +84,34 @@ function usePaginationFragment<
   const fragmentIdentifier = getFragmentIdentifier(fragmentNode, fragmentRef);
 
   // Backward pagination
-  const [
-    loadPrevious,
-    hasPrevious,
-    isLoadingPrevious,
-    disposeFetchPrevious,
-  ] = useLoadMore<TQuery>({
-    componentDisplayName,
-    connectionPathInFragmentData,
-    direction: 'backward',
-    fragmentData,
-    fragmentIdentifier,
-    fragmentNode,
-    fragmentRef,
-    identifierField,
-    paginationMetadata,
-    paginationRequest,
-  });
+  const [loadPrevious, hasPrevious, isLoadingPrevious, disposeFetchPrevious] =
+    useLoadMore<TQuery>({
+      componentDisplayName,
+      connectionPathInFragmentData,
+      direction: 'backward',
+      fragmentData,
+      fragmentIdentifier,
+      fragmentNode,
+      fragmentRef,
+      identifierField,
+      paginationMetadata,
+      paginationRequest,
+    });
 
   // Forward pagination
-  const [
-    loadNext,
-    hasNext,
-    isLoadingNext,
-    disposeFetchNext,
-  ] = useLoadMore<TQuery>({
-    componentDisplayName,
-    connectionPathInFragmentData,
-    direction: 'forward',
-    fragmentData,
-    fragmentIdentifier,
-    fragmentNode,
-    fragmentRef,
-    identifierField,
-    paginationMetadata,
-    paginationRequest,
-  });
+  const [loadNext, hasNext, isLoadingNext, disposeFetchNext] =
+    useLoadMore<TQuery>({
+      componentDisplayName,
+      connectionPathInFragmentData,
+      direction: 'forward',
+      fragmentData,
+      fragmentIdentifier,
+      fragmentNode,
+      fragmentRef,
+      identifierField,
+      paginationMetadata,
+      paginationRequest,
+    });
 
   const refetchPagination: RefetchFnDynamic<TQuery, TKey> = useCallback(
     (variables, options) => {

package/relay-hooks/usePreloadedQuery.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,24 +13,23 @@
 
 'use strict';
 
-const invariant = require('invariant');
+import type {PreloadedQuery} from './EntryPointTypes.flow';
+import type {
+  GraphQLTaggedNode,
+  OperationType,
+  RenderPolicy,
+} from 'relay-runtime';
+
+const {useTrackLoadQueryInRender} = require('./loadQuery');
 const useLazyLoadQueryNode = require('./useLazyLoadQueryNode');
 const useMemoOperationDescriptor = require('./useMemoOperationDescriptor');
 const useRelayEnvironment = require('./useRelayEnvironment');
-const warning = require('warning');
-
-const {useTrackLoadQueryInRender} = require('./loadQuery');
+const invariant = require('invariant');
 const {useDebugValue} = require('react');
 const {
   __internal: {fetchQueryDeduped, fetchQuery},
 } = require('relay-runtime');
-
-import type {PreloadedQuery} from './EntryPointTypes.flow';
-import type {
-  GraphQLTaggedNode,
-  OperationType,
-  RenderPolicy,
-} from 'relay-runtime';
+const warning = require('warning');
 
 function usePreloadedQuery<TQuery: OperationType>(
   gqlQuery: GraphQLTaggedNode,
@@ -38,19 +37,14 @@ function usePreloadedQuery<TQuery: OperationType>(
   options?: {|
     UNSTABLE_renderPolicy?: RenderPolicy,
   |},
-): $ElementType<TQuery, 'response'> {
+): TQuery['response'] {
   // We need to use this hook in order to be able to track if
   // loadQuery was called during render
   useTrackLoadQueryInRender();
 
   const environment = useRelayEnvironment();
-  const {
-    fetchKey,
-    fetchPolicy,
-    source,
-    variables,
-    networkCacheConfig,
-  } = preloadedQuery;
+  const {fetchKey, fetchPolicy, source, variables, networkCacheConfig} =
+    preloadedQuery;
   const operation = useMemoOperationDescriptor(
     gqlQuery,
     variables,