react-relay 11.0.1 → 13.0.0-rc.1

package/relay-hooks/useBlockingPaginationFragment.js.flow

@@ -13,25 +13,27 @@
 
 'use strict';
 
-const getPaginationMetadata = require('./getPaginationMetadata');
-const invariant = require('invariant');
-const useLoadMoreFunction = require('./useLoadMoreFunction');
-const useRefetchableFragmentNode = require('./useRefetchableFragmentNode');
-const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
-
-const {useCallback, useEffect, useRef, useState} = require('react');
-const {getFragment, getFragmentIdentifier} = require('relay-runtime');
-
 import type {LoadMoreFn, UseLoadMoreFunctionArgs} from './useLoadMoreFunction';
 import type {RefetchFnDynamic} from './useRefetchableFragmentNode';
 import type {
-  FragmentReference,
+  FragmentType,
   GraphQLResponse,
   GraphQLTaggedNode,
   Observer,
   OperationType,
 } from 'relay-runtime';
 
+const useLoadMoreFunction = require('./useLoadMoreFunction');
+const useRefetchableFragmentNode = require('./useRefetchableFragmentNode');
+const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
+const invariant = require('invariant');
+const {useCallback, useEffect, useRef, useState} = require('react');
+const {
+  getFragment,
+  getFragmentIdentifier,
+  getPaginationMetadata,
+} = require('relay-runtime');
+
 export type ReturnType<TQuery: OperationType, TKey, TFragmentData> = {|
   data: TFragmentData,
   loadNext: LoadMoreFn<TQuery>,
@@ -43,7 +45,7 @@ export type ReturnType<TQuery: OperationType, TKey, TFragmentData> = {|
 
 function useBlockingPaginationFragment<
   TQuery: OperationType,
-  TKey: ?{+$data?: mixed, +$fragmentRefs: FragmentReference, ...},
+  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
 >(
   fragmentInput: GraphQLTaggedNode,
   parentFragmentRef: TKey,

package/relay-hooks/useEntryPointLoader.js.flow

@@ -13,12 +13,6 @@
 
 'use strict';
 
-const loadEntryPoint = require('./loadEntryPoint');
-const useIsMountedRef = require('./useIsMountedRef');
-
-const {useTrackLoadQueryInRender} = require('./loadQuery');
-const {useCallback, useEffect, useRef, useState} = require('react');
-
 import type {
   EntryPoint,
   EntryPointComponent,
@@ -27,6 +21,11 @@ import type {
   PreloadedEntryPoint,
 } from './EntryPointTypes.flow';
 
+const loadEntryPoint = require('./loadEntryPoint');
+const {useTrackLoadQueryInRender} = require('./loadQuery');
+const useIsMountedRef = require('./useIsMountedRef');
+const {useCallback, useEffect, useRef, useState} = require('react');
+
 type UseEntryPointLoaderHookReturnType<
   TEntryPointParams: {...},
   TPreloadedQueries: {...},
@@ -121,10 +120,8 @@ function useLoadEntryPoint<
   const [entryPointReference, setEntryPointReference] = useState<
     PreloadedEntryPoint<TEntryPointComponent> | NullEntryPointReference,
   >(initialEntryPointReferenceInternal);
-  const [
-    entryPointParams,
-    setEntryPointParams,
-  ] = useState<TEntryPointParams | null>(initialEntryPointParamsInternal);
+  const [entryPointParams, setEntryPointParams] =
+    useState<TEntryPointParams | null>(initialEntryPointParamsInternal);
 
   const disposeEntryPoint = useCallback(() => {
     if (isMountedRef.current) {

package/relay-hooks/useFetchTrackingRef.js.flow

@@ -13,10 +13,10 @@
 
 'use strict';
 
-const {useCallback, useEffect, useRef} = require('react');
-
 import type {Subscription} from 'relay-runtime';
 
+const {useCallback, useEffect, useRef} = require('react');
+
 /**
  * This hook returns a mutable React ref that holds the value of whether a
  * fetch request is in flight. The reason this is a mutable ref instead of

package/relay-hooks/useFragment.js.flow

@@ -13,82 +13,62 @@
 
 'use strict';
 
-const useFragmentNode = require('./useFragmentNode');
-const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
+import type {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
-
+// if the key is non-nullable, return non-nullable value
 declare function useFragment<
-  TKey: {+$data?: mixed, +$fragmentRefs: FragmentReference, ...},
+  TKey: {+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
 >(
-  fragmentInput: GraphQLTaggedNode,
-  fragmentRef: TKey,
-): $Call<<TFragmentData>({+$data?: TFragmentData, ...}) => TFragmentData, TKey>;
+  fragment: GraphQLTaggedNode,
+  key: TKey,
+): $Call<<TData>({+$data?: TData, ...}) => TData, TKey>;
 
+// if the key is nullable, return nullable value
 declare function useFragment<
-  TKey: ?{+$data?: mixed, +$fragmentRefs: FragmentReference, ...},
+  TKey: ?{+$data?: mixed, +$fragmentSpreads: FragmentType, ...},
 >(
-  fragmentInput: GraphQLTaggedNode,
-  fragmentRef: TKey,
-): $Call<
-  <TFragmentData>(?{+$data?: TFragmentData, ...}) => ?TFragmentData,
-  TKey,
->;
+  fragment: GraphQLTaggedNode,
+  key: TKey,
+): $Call<<TData>(?{+$data?: TData, ...}) => ?TData, TKey>;
 
+// if the key is a non-nullable array of keys, return non-nullable array
 declare function useFragment<
   TKey: $ReadOnlyArray<{
     +$data?: mixed,
-    +$fragmentRefs: FragmentReference,
+    +$fragmentSpreads: FragmentType,
     ...
   }>,
 >(
-  fragmentInput: GraphQLTaggedNode,
-  fragmentRef: TKey,
-): $Call<
-  <TFragmentData>(
-    $ReadOnlyArray<{+$data?: TFragmentData, ...}>,
-  ) => TFragmentData,
-  TKey,
->;
+  fragment: GraphQLTaggedNode,
+  key: TKey,
+): $Call<<TData>($ReadOnlyArray<{+$data?: TData, ...}>) => TData, TKey>;
 
+// if the key is a nullable array of keys, return nullable array
 declare function useFragment<
   TKey: ?$ReadOnlyArray<{
     +$data?: mixed,
-    +$fragmentRefs: FragmentReference,
+    +$fragmentSpreads: FragmentType,
     ...
   }>,
 >(
-  fragmentInput: GraphQLTaggedNode,
-  fragmentRef: TKey,
-): $Call<
-  <TFragmentData>(
-    ?$ReadOnlyArray<{+$data?: TFragmentData, ...}>,
-  ) => ?TFragmentData,
-  TKey,
->;
+  fragment: GraphQLTaggedNode,
+  key: TKey,
+): $Call<<TData>(?$ReadOnlyArray<{+$data?: TData, ...}>) => ?TData, TKey>;
 
-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

@@ -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/useIsOperationNodeActive.js.flow

@@ -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

@@ -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

@@ -13,15 +13,6 @@
 
 'use strict';
 
-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,
@@ -31,6 +22,14 @@ import type {
   VariablesOf,
 } from 'relay-runtime';
 
+const {useTrackLoadQueryInRender} = require('./loadQuery');
+const useLazyLoadQueryNode = require('./useLazyLoadQueryNode');
+const useMemoOperationDescriptor = require('./useMemoOperationDescriptor');
+const useRelayEnvironment = require('./useRelayEnvironment');
+const {
+  __internal: {fetchQuery},
+} = require('relay-runtime');
+
 function useLazyLoadQuery<TQuery: OperationType>(
   gqlQuery: GraphQLTaggedNode,
   variables: VariablesOf<TQuery>,
@@ -40,7 +39,7 @@ function useLazyLoadQuery<TQuery: OperationType>(
     networkCacheConfig?: CacheConfig,
     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();

package/relay-hooks/useLazyLoadQueryNode.js.flow

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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);