react-relay 16.0.0 → 16.2.0

package/relay-hooks/{react-cache/useFragmentInternal_REACT_CACHE.js.flow → experimental/useFragmentInternal_EXPERIMENTAL.js.flow}

@@ -31,7 +31,7 @@ const useRelayEnvironment = require('../useRelayEnvironment');
 const invariant = require('invariant');
 const {useDebugValue, useEffect, useMemo, useRef, useState} = require('react');
 const {
-  __internal: {fetchQuery: fetchQueryInternal},
+  __internal: {fetchQuery: fetchQueryInternal, getPromiseForActiveRequest},
   RelayFeatureFlags,
   areEqualSelectors,
   createOperationDescriptor,
@@ -117,6 +117,7 @@ function handlePotentialSnapshotErrorsForState(
       environment,
       state.snapshot.missingRequiredFields,
       state.snapshot.relayResolverErrors,
+      state.snapshot.errorResponseFields,
     );
   } else if (state.kind === 'plural') {
     for (const snapshot of state.snapshots) {
@@ -124,6 +125,7 @@ function handlePotentialSnapshotErrorsForState(
         environment,
         snapshot.missingRequiredFields,
         snapshot.relayResolverErrors,
+        snapshot.errorResponseFields,
       );
     }
   }
@@ -162,6 +164,7 @@ function handleMissedUpdates(
       selector: currentSnapshot.selector,
       missingRequiredFields: currentSnapshot.missingRequiredFields,
       relayResolverErrors: currentSnapshot.relayResolverErrors,
+      errorResponseFields: currentSnapshot.errorResponseFields,
     };
     return [
       updatedData !== state.snapshot.data,
@@ -187,6 +190,7 @@ function handleMissedUpdates(
         selector: currentSnapshot.selector,
         missingRequiredFields: currentSnapshot.missingRequiredFields,
         relayResolverErrors: currentSnapshot.relayResolverErrors,
+        errorResponseFields: currentSnapshot.errorResponseFields,
       };
       if (updatedData !== snapshot.data) {
         didMissUpdates = true;
@@ -214,7 +218,7 @@ function handleMissingClientEdge(
   parentFragmentRef: mixed,
   missingClientEdgeRequestInfo: MissingClientEdgeRequestInfo,
   queryOptions?: FragmentQueryOptions,
-): QueryResult {
+): [QueryResult, ?Promise<mixed>] {
   const originalVariables = getVariablesFromFragment(
     parentFragmentNode,
     parentFragmentRef,
@@ -233,17 +237,23 @@ function handleMissingClientEdge(
   // according to the component mount/suspense cycle; QueryResource
   // already handles this by itself.
   const QueryResource = getQueryResourceForEnvironment(environment);
-  return QueryResource.prepare(
+  const queryResult = QueryResource.prepare(
     queryOperationDescriptor,
     fetchQueryInternal(environment, queryOperationDescriptor),
     queryOptions?.fetchPolicy,
   );
+
+  return [
+    queryResult,
+    getPromiseForActiveRequest(environment, queryOperationDescriptor.request),
+  ];
 }
 
 function subscribeToSnapshot(
   environment: IEnvironment,
   state: FragmentState,
   setState: StateUpdaterFunction<FragmentState>,
+  hasPendingStateChanges: {current: boolean},
 ): () => void {
   if (state.kind === 'bailout') {
     return () => {};
@@ -264,11 +274,14 @@ function subscribeToSnapshot(
               name: 'useFragment.subscription.missedUpdates',
               hasDataChanges: dataChanged,
             });
+            hasPendingStateChanges.current = dataChanged;
             return dataChanged ? nextState : prevState;
           } else {
             return prevState;
           }
         }
+
+        hasPendingStateChanges.current = true;
         return {
           kind: 'singular',
           snapshot: latestSnapshot,
@@ -297,6 +310,8 @@ function subscribeToSnapshot(
                 name: 'useFragment.subscription.missedUpdates',
                 hasDataChanges: dataChanged,
               });
+              hasPendingStateChanges.current =
+                hasPendingStateChanges.current || dataChanged;
               return dataChanged ? nextState : prevState;
             } else {
               return prevState;
@@ -304,6 +319,7 @@ function subscribeToSnapshot(
           }
           const updated = [...prevState.snapshots];
           updated[index] = latestSnapshot;
+          hasPendingStateChanges.current = true;
           return {
             kind: 'plural',
             snapshots: updated,
@@ -344,7 +360,7 @@ function getFragmentState(
 }
 
 // fragmentNode cannot change during the lifetime of the component, though fragmentRef may change.
-function useFragmentInternal_REACT_CACHE(
+function useFragmentInternal_EXPERIMENTAL(
   fragmentNode: ReaderFragment,
   fragmentRef: mixed,
   hookDisplayName: string,
@@ -435,7 +451,7 @@ function useFragmentInternal_REACT_CACHE(
   // The purpose of this is to detect whether we have ever committed, because we
   // don't suspend on store updates, only when the component either is first trying
   // to mount or when the our selector changes. The selector change in particular is
-  // how we suspend for pagination and refetech. Also, fragment selector can be null
+  // how we suspend for pagination and refetch. Also, fragment selector can be null
   // or undefined, so we use false as a special value to distinguish from all fragment
   // selectors; false means that the component hasn't mounted yet.
   const committedFragmentSelectorRef = useRef<false | ?ReaderSelector>(false);
@@ -450,27 +466,34 @@ function useFragmentInternal_REACT_CACHE(
     // a static (constant) property of the fragment. In practice, this effect will
     // always or never run for a given invocation of this hook.
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const clientEdgeQueries = useMemo(() => {
+    const [clientEdgeQueries, activeRequestPromises] = useMemo(() => {
       const missingClientEdges = getMissingClientEdges(state);
       // eslint-disable-next-line no-shadow
       let clientEdgeQueries;
+      const activeRequestPromises = [];
       if (missingClientEdges?.length) {
         clientEdgeQueries = ([]: Array<QueryResult>);
         for (const edge of missingClientEdges) {
-          clientEdgeQueries.push(
-            handleMissingClientEdge(
-              environment,
-              fragmentNode,
-              fragmentRef,
-              edge,
-              queryOptions,
-            ),
+          const [queryResult, requestPromise] = handleMissingClientEdge(
+            environment,
+            fragmentNode,
+            fragmentRef,
+            edge,
+            queryOptions,
           );
+          clientEdgeQueries.push(queryResult);
+          if (requestPromise != null) {
+            activeRequestPromises.push(requestPromise);
+          }
         }
       }
-      return clientEdgeQueries;
+      return [clientEdgeQueries, activeRequestPromises];
     }, [state, environment, fragmentNode, fragmentRef, queryOptions]);
 
+    if (activeRequestPromises.length) {
+      throw Promise.all(activeRequestPromises);
+    }
+
     // See above note
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
@@ -505,6 +528,7 @@ function useFragmentInternal_REACT_CACHE(
     // We only suspend when the component is first trying to mount or changing
     // selectors, not if data becomes missing later:
     if (
+      environment !== previousEnvironment ||
       !committedFragmentSelectorRef.current ||
       !areEqualSelectors(committedFragmentSelectorRef.current, fragmentSelector)
     ) {
@@ -528,6 +552,8 @@ function useFragmentInternal_REACT_CACHE(
   // they're missing even though we are out of options for possibly fetching them:
   handlePotentialSnapshotErrorsForState(environment, state);
 
+  const hasPendingStateChanges = useRef<boolean>(false);
+
   useEffect(() => {
     // Check for updates since the state was rendered
     let currentState = subscribedState;
@@ -546,12 +572,29 @@ function useFragmentInternal_REACT_CACHE(
       }
       currentState = updatedState;
     }
-    return subscribeToSnapshot(environment, currentState, setState);
+    return subscribeToSnapshot(
+      environment,
+      currentState,
+      setState,
+      hasPendingStateChanges,
+    );
   }, [environment, subscribedState]);
 
+  if (hasPendingStateChanges.current) {
+    const updates = handleMissedUpdates(environment, state);
+    if (updates != null) {
+      const [hasStateUpdates, updatedState] = updates;
+      if (hasStateUpdates) {
+        setState(updatedState);
+        state = updatedState;
+      }
+    }
+    hasPendingStateChanges.current = false;
+  }
+
   let data: ?SelectorData | Array<?SelectorData>;
   if (isPlural) {
-    // Plural fragments require allocating an array of the snasphot data values,
+    // Plural fragments require allocating an array of the snapshot data values,
     // which has to be memoized to avoid triggering downstream re-renders.
     //
     // Note that isPlural is a constant property of the fragment and does not change
@@ -614,4 +657,4 @@ function useFragmentInternal_REACT_CACHE(
   return data;
 }
 
-module.exports = useFragmentInternal_REACT_CACHE;
+module.exports = useFragmentInternal_EXPERIMENTAL;

package/relay-hooks/{react-cache/useFragment_REACT_CACHE.js.flow → experimental/useFragment_EXPERIMENTAL.js.flow}

@@ -15,7 +15,7 @@ import type {Fragment, FragmentType, GraphQLTaggedNode} from 'relay-runtime';
 
 const {useTrackLoadQueryInRender} = require('../loadQuery');
 const useStaticFragmentNodeWarning = require('../useStaticFragmentNodeWarning');
-const useFragmentInternal = require('./useFragmentInternal_REACT_CACHE');
+const useFragmentInternal = require('./useFragmentInternal_EXPERIMENTAL');
 const {useDebugValue} = require('react');
 const {getFragment} = require('relay-runtime');
 
@@ -30,17 +30,23 @@ declare function useFragment<TFragmentType: FragmentType, TData>(
   key: HasSpread<TFragmentType>,
 ): TData;
 
+// if the key is nullable, return nullable value
+declare function useFragment<TFragmentType: FragmentType, TData>(
+  fragment: Fragment<TFragmentType, TData>,
+  key: ?HasSpread<TFragmentType>,
+): ?TData;
+
 // 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;
 
-// if the key is null/void, return null/void value
+// if the key is a nullable array of keys, return nullable array
 declare function useFragment<TFragmentType: FragmentType, TData>(
   fragment: Fragment<TFragmentType, TData>,
-  key: null | void,
-): null | void;
+  key: ?$ReadOnlyArray<HasSpread<TFragmentType>>,
+): ?TData;
 
 function useFragment(fragment: GraphQLTaggedNode, key: mixed): mixed {
   // We need to use this hook in order to be able to track if

package/relay-hooks/{react-cache/usePaginationFragment_REACT_CACHE.js.flow → experimental/usePaginationFragment_EXPERIMENTAL.js.flow}

@@ -13,7 +13,7 @@
 
 import type {LoadMoreFn, UseLoadMoreFunctionArgs} from '../useLoadMoreFunction';
 import type {ReturnType} from '../usePaginationFragment';
-import type {Options} from './useRefetchableFragmentInternal_REACT_CACHE';
+import type {Options} from './useRefetchableFragmentInternal_EXPERIMENTAL';
 import type {
   FragmentType,
   GraphQLResponse,
@@ -25,7 +25,7 @@ import type {
 const useLoadMoreFunction = require('../useLoadMoreFunction');
 const useRelayEnvironment = require('../useRelayEnvironment');
 const useStaticFragmentNodeWarning = require('../useStaticFragmentNodeWarning');
-const useRefetchableFragmentInternal = require('./useRefetchableFragmentInternal_REACT_CACHE');
+const useRefetchableFragmentInternal = require('./useRefetchableFragmentInternal_EXPERIMENTAL');
 const {useCallback, useDebugValue, useState} = require('react');
 const {
   getFragment,

package/relay-hooks/{react-cache/useRefetchableFragmentInternal_REACT_CACHE.js.flow → experimental/useRefetchableFragmentInternal_EXPERIMENTAL.js.flow}

@@ -31,8 +31,8 @@ const {getQueryResourceForEnvironment} = require('../QueryResource');
 const useIsMountedRef = require('../useIsMountedRef');
 const useQueryLoader = require('../useQueryLoader');
 const useRelayEnvironment = require('../useRelayEnvironment');
-const readFragmentInternal = require('./readFragmentInternal_REACT_CACHE');
-const useFragmentInternal = require('./useFragmentInternal_REACT_CACHE');
+const readFragmentInternal = require('./readFragmentInternal_EXPERIMENTAL');
+const useFragmentInternal = require('./useFragmentInternal_EXPERIMENTAL');
 const invariant = require('invariant');
 const {useCallback, useContext, useReducer} = require('react');
 const {
@@ -55,16 +55,13 @@ export type RefetchFn<
 //    /nullable/.
 //  - Or, expects /a subset/ of the query variables if the provided key type is
 //    /non-null/.
-// prettier-ignore
 export type RefetchFnDynamic<
   TQuery: OperationType,
-  TKey: ?{ +$data?: mixed, ... },
+  TKey: ?{+$data?: mixed, ...},
   TOptions = Options,
-> = $Call<
-  & (( { +$data?: mixed, ... }) => RefetchFnInexact<TQuery, TOptions>)
-  & ((?{ +$data?: mixed, ... }) => RefetchFnExact<TQuery, TOptions>),
-  TKey
->;
+> = [TKey] extends [{+$data?: mixed, ...}]
+  ? RefetchFnInexact<TQuery, TOptions>
+  : RefetchFnExact<TQuery, TOptions>;
 
 export type ReturnType<
   TQuery: OperationType,
@@ -353,6 +350,7 @@ function useRefetchableFragmentNode<
   return {
     fragmentData,
     fragmentRef,
+    // $FlowFixMe[incompatible-return] RefetchFn not compatible with RefetchFnDynamic
     refetch,
   };
 }
@@ -481,11 +479,13 @@ function useRefetchFunction<TQuery: OperationType>(
       const refetchQuery = createOperationDescriptor(
         refetchableRequest,
         refetchVariables,
-        {force: true},
+        {
+          force: true,
+        },
       );
 
       // We call loadQuery which will start a network request if necessary
-      // and update the querRef from useQueryLoader.
+      // and update the queryRef from useQueryLoader.
       // Note the following:
       // - loadQuery will dispose of any previously refetched queries.
       // - We use the variables extracted off the OperationDescriptor

package/relay-hooks/{react-cache/useRefetchableFragment_REACT_CACHE.js.flow → experimental/useRefetchableFragment_EXPERIMENTAL.js.flow}

@@ -15,7 +15,7 @@ import type {ReturnType} from '../useRefetchableFragment';
 import type {FragmentType, RefetchableFragment, Variables} from 'relay-runtime';
 
 const useStaticFragmentNodeWarning = require('../useStaticFragmentNodeWarning');
-const useRefetchableFragmentInternal = require('./useRefetchableFragmentInternal_REACT_CACHE');
+const useRefetchableFragmentInternal = require('./useRefetchableFragmentInternal_EXPERIMENTAL');
 const {useDebugValue} = require('react');
 const {getFragment} = require('relay-runtime');
 

package/relay-hooks/{FragmentResource.js.flow → legacy/FragmentResource.js.flow}

@@ -11,8 +11,8 @@
 
 'use strict';
 
-import type {Cache} from './LRUCache';
-import type {QueryResource, QueryResult} from './QueryResource';
+import type {Cache} from '../LRUCache';
+import type {QueryResource, QueryResult} from '../QueryResource';
 import type {
   ConcreteRequest,
   DataID,
@@ -24,9 +24,9 @@ import type {
 } from 'relay-runtime';
 import type {MissingLiveResolverField} from 'relay-runtime/store/RelayStoreTypes';
 
-const LRUCache = require('./LRUCache');
-const {getQueryResourceForEnvironment} = require('./QueryResource');
-const SuspenseResource = require('./SuspenseResource');
+const LRUCache = require('../LRUCache');
+const {getQueryResourceForEnvironment} = require('../QueryResource');
+const SuspenseResource = require('../SuspenseResource');
 const invariant = require('invariant');
 const {
   __internal: {fetchQuery, getPromiseForActiveRequest},
@@ -566,6 +566,7 @@ class FragmentResourceImpl {
           this._environment,
           s.missingRequiredFields,
           s.relayResolverErrors,
+          s.errorResponseFields,
         );
       });
     } else {
@@ -573,6 +574,7 @@ class FragmentResourceImpl {
         this._environment,
         snapshot.missingRequiredFields,
         snapshot.relayResolverErrors,
+        snapshot.errorResponseFields,
       );
     }
   }
@@ -776,6 +778,7 @@ class FragmentResourceImpl {
       selector: currentSnapshot.selector,
       missingRequiredFields: currentSnapshot.missingRequiredFields,
       relayResolverErrors: currentSnapshot.relayResolverErrors,
+      errorResponseFields: currentSnapshot.errorResponseFields,
     };
     if (updatedData !== renderData) {
       const result = getFragmentResult(

package/relay-hooks/{useBlockingPaginationFragment.js.flow → legacy/useBlockingPaginationFragment.js.flow}

@@ -11,9 +11,9 @@
 
 'use strict';
 
-import type {RefetchableFragment} from '../../relay-runtime/util/RelayRuntimeTypes';
-import type {LoadMoreFn, UseLoadMoreFunctionArgs} from './useLoadMoreFunction';
+import type {LoadMoreFn, UseLoadMoreFunctionArgs} from '../useLoadMoreFunction';
 import type {Options} from './useRefetchableFragmentNode';
+import type {RefetchableFragment} from 'relay-runtime';
 import type {
   Disposable,
   FragmentType,
@@ -22,9 +22,9 @@ import type {
   Variables,
 } from 'relay-runtime';
 
-const useLoadMoreFunction = require('./useLoadMoreFunction');
+const useLoadMoreFunction = require('../useLoadMoreFunction');
+const useStaticFragmentNodeWarning = require('../useStaticFragmentNodeWarning');
 const useRefetchableFragmentNode = require('./useRefetchableFragmentNode');
-const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
 const invariant = require('invariant');
 const {useCallback, useEffect, useRef, useState} = require('react');
 const {
@@ -34,15 +34,12 @@ const {
 } = require('relay-runtime');
 
 type RefetchVariables<TVariables, TKey> =
-  // NOTE: This $Call ensures that the type of the variables is either:
+  // NOTE: This type ensures that the type of the variables is either:
   //   - nullable if the provided ref type is non-nullable
   //   - non-nullable if the provided ref type is nullable, and the caller need to provide the full set of variables
-  // prettier-ignore
-  $Call<
-    & (<TFragmentType>( { +$fragmentSpreads: TFragmentType, ... }) => Partial<TVariables>)
-    & (<TFragmentType>(?{ +$fragmentSpreads: TFragmentType, ... }) => TVariables),
-    TKey,
-  >;
+  [+key: TKey] extends [+key: {+$fragmentSpreads: mixed, ...}]
+    ? Partial<TVariables>
+    : TVariables;
 
 type RefetchFnBase<TVars, TOptions> = (
   vars: TVars,
@@ -55,15 +52,12 @@ type RefetchFn<TVariables, TKey, TOptions = Options> = RefetchFnBase<
 >;
 
 type ReturnType<TVariables, TData, TKey> = {
-  // NOTE: This $Call ensures that the type of the returned data is either:
+  // NOTE: This rtpw 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
-  data: $Call<
-    & (<TFragmentType>( { +$fragmentSpreads: TFragmentType, ... }) =>  TData)
-    & (<TFragmentType>(?{ +$fragmentSpreads: TFragmentType, ... }) => ?TData),
-    TKey,
-  >,
+  data: [+key: TKey] extends [+key: {+$fragmentSpreads: mixed, ...}]
+    ? TData
+    : ?TData,
   loadNext: LoadMoreFn<TVariables>,
   loadPrevious: LoadMoreFn<TVariables>,
   hasNext: boolean,
@@ -162,6 +156,7 @@ function useBlockingPaginationFragment<
 
   return {
     // $FlowFixMe[incompatible-cast]
+    // $FlowFixMe[incompatible-return]
     data: (fragmentData: TData),
     loadNext,
     loadPrevious,

package/relay-hooks/{useFragmentNode.js.flow → legacy/useFragmentNode.js.flow}

@@ -13,9 +13,9 @@
 
 import type {ReaderFragment} from 'relay-runtime';
 
+const useRelayEnvironment = require('../useRelayEnvironment');
+const useUnsafeRef_DEPRECATED = require('../useUnsafeRef_DEPRECATED');
 const {getFragmentResourceForEnvironment} = require('./FragmentResource');
-const useRelayEnvironment = require('./useRelayEnvironment');
-const useUnsafeRef_DEPRECATED = require('./useUnsafeRef_DEPRECATED');
 const {useEffect, useState} = require('react');
 const {RelayFeatureFlags, getFragmentIdentifier} = require('relay-runtime');
 const warning = require('warning');

package/relay-hooks/{useRefetchableFragmentNode.js.flow → legacy/useRefetchableFragmentNode.js.flow}

@@ -11,8 +11,8 @@
 
 'use strict';
 
-import type {RefetchableIdentifierInfo} from '../../relay-runtime/util/ReaderNode';
-import type {LoaderFn} from './useQueryLoader';
+import type {LoaderFn} from '../useQueryLoader';
+import type {RefetchableIdentifierInfo} from 'relay-runtime';
 import type {
   ConcreteRequest,
   Disposable,
@@ -26,13 +26,13 @@ import type {
   VariablesOf,
 } from 'relay-runtime';
 
+const ProfilerContext = require('../ProfilerContext');
+const {getQueryResourceForEnvironment} = require('../QueryResource');
+const useIsMountedRef = require('../useIsMountedRef');
+const useQueryLoader = require('../useQueryLoader');
+const useRelayEnvironment = require('../useRelayEnvironment');
 const {getFragmentResourceForEnvironment} = require('./FragmentResource');
-const ProfilerContext = require('./ProfilerContext');
-const {getQueryResourceForEnvironment} = require('./QueryResource');
 const useFragmentNode = require('./useFragmentNode');
-const useIsMountedRef = require('./useIsMountedRef');
-const useQueryLoader = require('./useQueryLoader');
-const useRelayEnvironment = require('./useRelayEnvironment');
 const invariant = require('invariant');
 const {useCallback, useContext, useReducer} = require('react');
 const {
@@ -55,16 +55,13 @@ export type RefetchFn<
 //    /nullable/.
 //  - Or, expects /a subset/ of the query variables if the provided key type is
 //    /non-null/.
-// prettier-ignore
 export type RefetchFnDynamic<
   TQuery: OperationType,
-  TKey: ?{ +$data?: mixed, ... },
+  TKey: ?{+$data?: mixed, ...},
   TOptions = Options,
-> = $Call<
-  & (( { +$data?: mixed, ... }) => RefetchFnInexact<TQuery, TOptions>)
-  & ((?{ +$data?: mixed, ... }) => RefetchFnExact<TQuery, TOptions>),
-  TKey
->;
+> = [TKey] extends [{+$data?: mixed, ...}]
+  ? RefetchFnInexact<TQuery, TOptions>
+  : RefetchFnExact<TQuery, TOptions>;
 
 export type ReturnType<
   TQuery: OperationType,
@@ -363,6 +360,7 @@ function useRefetchableFragmentNode<
   return {
     fragmentData,
     fragmentRef,
+    // $FlowFixMe[incompatible-return] RefetchFn not compatible with RefetchFnDynamic
     refetch,
     disableStoreUpdates,
     enableStoreUpdates,

package/relay-hooks/loadQuery.js.flow

@@ -62,7 +62,7 @@ type QueryType<T> = T extends Query<infer V, infer D, infer RR>
       variables: V,
       response: D,
       rawResponse?: $NonMaybeType<RR>,
-    }
+    } // $FlowFixMe[deprecated-type]
   : $Call<<T>(PreloadableConcreteRequest<T>) => T, T>;
 
 declare function loadQuery<

package/relay-hooks/useFragment.js.flow

@@ -14,8 +14,8 @@
 import type {Fragment, FragmentType, GraphQLTaggedNode} from 'relay-runtime';
 
 const HooksImplementation = require('./HooksImplementation');
+const useFragmentNode = require('./legacy/useFragmentNode');
 const {useTrackLoadQueryInRender} = require('./loadQuery');
-const useFragmentNode = require('./useFragmentNode');
 const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
 const {useDebugValue} = require('react');
 const {getFragment} = require('relay-runtime');
@@ -31,17 +31,23 @@ declare function useFragment<TFragmentType: FragmentType, TData>(
   key: HasSpread<TFragmentType>,
 ): TData;
 
+// if the key is nullable, return nullable value
+declare function useFragment<TFragmentType: FragmentType, TData>(
+  fragment: Fragment<TFragmentType, TData>,
+  key: ?HasSpread<TFragmentType>,
+): ?TData;
+
 // 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;
 
-// if the key is null/void, return null/void value
+// if the key is a nullable array of keys, return nullable array
 declare function useFragment<TFragmentType: FragmentType, TData>(
   fragment: Fragment<TFragmentType, TData>,
-  key: null | void,
-): null | void;
+  key: ?$ReadOnlyArray<HasSpread<TFragmentType>>,
+): ?TData;
 
 function useFragment_LEGACY(fragment: GraphQLTaggedNode, key: mixed): mixed {
   // We need to use this hook in order to be able to track if

package/relay-hooks/useLazyLoadQueryNode.js.flow

@@ -19,14 +19,16 @@ import type {
   OperationType,
   RenderPolicy,
 } from 'relay-runtime';
+import type {ReaderFragment} from 'relay-runtime/util/ReaderNode';
 
+const HooksImplementation = require('./HooksImplementation');
+const useFragmentNode = require('./legacy/useFragmentNode');
 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');
 
@@ -125,7 +127,7 @@ function useLazyLoadQueryNode<TQuery: OperationType>({
   });
 
   const {fragmentNode, fragmentRef} = preparedQueryResult;
-  const {data} = useFragmentNode<$FlowFixMe>(
+  const data = useFragmentNodeImpl(
     fragmentNode,
     fragmentRef,
     componentDisplayName,
@@ -133,4 +135,18 @@ function useLazyLoadQueryNode<TQuery: OperationType>({
   return data;
 }
 
+function useFragmentNodeImpl(
+  fragment: ReaderFragment,
+  key: mixed,
+  componentDisplayName: string,
+): mixed {
+  const impl = HooksImplementation.get();
+  if (impl && impl.useFragment__internal) {
+    return impl.useFragment__internal(fragment, key, componentDisplayName);
+  } else {
+    const {data} = useFragmentNode<mixed>(fragment, key, componentDisplayName);
+    return data;
+  }
+}
+
 module.exports = useLazyLoadQueryNode;