react-relay 16.2.0 → 18.0.0

package/relay-hooks/useFragment.js.flow

@@ -13,9 +13,7 @@
 
 import type {Fragment, FragmentType, GraphQLTaggedNode} from 'relay-runtime';
 
-const HooksImplementation = require('./HooksImplementation');
-const useFragmentNode = require('./legacy/useFragmentNode');
-const {useTrackLoadQueryInRender} = require('./loadQuery');
+const useFragmentInternal = require('./useFragmentInternal');
 const useStaticFragmentNodeWarning = require('./useStaticFragmentNodeWarning');
 const {useDebugValue} = require('react');
 const {getFragment} = require('relay-runtime');
@@ -26,54 +24,39 @@ type HasSpread<TFragmentType> = {
 };
 
 // if the key is non-nullable, return non-nullable value
-declare function useFragment<TFragmentType: FragmentType, TData>(
+declare hook useFragment<TFragmentType: FragmentType, TData>(
   fragment: Fragment<TFragmentType, TData>,
   key: HasSpread<TFragmentType>,
 ): TData;
 
 // if the key is nullable, return nullable value
-declare function useFragment<TFragmentType: FragmentType, TData>(
+declare hook 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>(
+declare hook useFragment<TFragmentType: FragmentType, TData>(
   fragment: Fragment<TFragmentType, TData>,
   key: $ReadOnlyArray<HasSpread<TFragmentType>>,
 ): TData;
 
 // if the key is a nullable array of keys, return nullable array
-declare function useFragment<TFragmentType: FragmentType, TData>(
+declare hook useFragment<TFragmentType: FragmentType, TData>(
   fragment: Fragment<TFragmentType, TData>,
   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
-  // loadQuery was called during render
-  useTrackLoadQueryInRender();
-
+hook useFragment(fragment: GraphQLTaggedNode, key: mixed): mixed {
   const fragmentNode = getFragment(fragment);
   useStaticFragmentNodeWarning(fragmentNode, 'first argument of useFragment()');
-  const {data} = useFragmentNode<mixed>(fragmentNode, key, 'useFragment()');
+  const data = useFragmentInternal(fragmentNode, key, 'useFragment()');
   if (__DEV__) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
+    // $FlowFixMe[react-rule-hook]
     useDebugValue({fragment: fragmentNode.name, data});
   }
   return data;
 }
 
-function useFragment(fragment: GraphQLTaggedNode, key: mixed): mixed {
-  const impl = HooksImplementation.get();
-  if (impl) {
-    // $FlowFixMe This is safe because impl.useFragment has the type of useFragment...
-    return impl.useFragment(fragment, key);
-    // (i.e. type declared above, but not the supertype used in this function definition)
-  } else {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useFragment_LEGACY(fragment, key);
-  }
-}
-
 module.exports = useFragment;

package/relay-hooks/useFragmentInternal.js.flow

@@ -0,0 +1,45 @@
+/**
+ * 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';
+
+import type {FragmentQueryOptions} from './useFragmentInternal_EXPERIMENTAL';
+import type {ReaderFragment, SelectorData} from 'relay-runtime';
+
+import useFragmentInternal_CURRENT from './useFragmentInternal_CURRENT';
+import useFragmentInternal_EXPERIMENTAL from './useFragmentInternal_EXPERIMENTAL';
+import {RelayFeatureFlags} from 'relay-runtime';
+
+hook useFragmentInternal(
+  fragmentNode: ReaderFragment,
+  fragmentRef: mixed,
+  hookDisplayName: string,
+  queryOptions?: FragmentQueryOptions,
+): ?SelectorData | Array<?SelectorData> {
+  if (RelayFeatureFlags.ENABLE_USE_FRAGMENT_EXPERIMENTAL) {
+    // $FlowFixMe[react-rule-hook] - the condition is static
+    return useFragmentInternal_EXPERIMENTAL(
+      fragmentNode,
+      fragmentRef,
+      hookDisplayName,
+      queryOptions,
+    );
+  }
+  // $FlowFixMe[react-rule-hook] - the condition is static
+  return useFragmentInternal_CURRENT(
+    fragmentNode,
+    fragmentRef,
+    hookDisplayName,
+    queryOptions,
+  );
+}
+
+module.exports = useFragmentInternal;

package/relay-hooks/{experimental/useFragmentInternal_EXPERIMENTAL.js.flow → useFragmentInternal_CURRENT.js.flow}

@@ -11,7 +11,7 @@
 
 'use strict';
 
-import type {QueryResult} from '../QueryResource';
+import type {QueryResult} from './QueryResource';
 import type {
   CacheConfig,
   FetchPolicy,
@@ -26,8 +26,8 @@ import type {
   MissingLiveResolverField,
 } from 'relay-runtime/store/RelayStoreTypes';
 
-const {getQueryResourceForEnvironment} = require('../QueryResource');
-const useRelayEnvironment = require('../useRelayEnvironment');
+const {getQueryResourceForEnvironment} = require('./QueryResource');
+const useRelayEnvironment = require('./useRelayEnvironment');
 const invariant = require('invariant');
 const {useDebugValue, useEffect, useMemo, useRef, useState} = require('react');
 const {
@@ -118,6 +118,7 @@ function handlePotentialSnapshotErrorsForState(
       state.snapshot.missingRequiredFields,
       state.snapshot.relayResolverErrors,
       state.snapshot.errorResponseFields,
+      state.snapshot.selector.node.metadata?.throwOnFieldError ?? false,
     );
   } else if (state.kind === 'plural') {
     for (const snapshot of state.snapshots) {
@@ -126,6 +127,7 @@ function handlePotentialSnapshotErrorsForState(
         snapshot.missingRequiredFields,
         snapshot.relayResolverErrors,
         snapshot.errorResponseFields,
+        snapshot.selector.node.metadata?.throwOnFieldError ?? false,
       );
     }
   }
@@ -360,7 +362,7 @@ function getFragmentState(
 }
 
 // fragmentNode cannot change during the lifetime of the component, though fragmentRef may change.
-function useFragmentInternal_EXPERIMENTAL(
+hook useFragmentInternal(
   fragmentNode: ReaderFragment,
   fragmentRef: mixed,
   hookDisplayName: string,
@@ -466,6 +468,7 @@ function useFragmentInternal_EXPERIMENTAL(
     // 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
+    // $FlowFixMe[react-rule-hook]
     const [clientEdgeQueries, activeRequestPromises] = useMemo(() => {
       const missingClientEdges = getMissingClientEdges(state);
       // eslint-disable-next-line no-shadow
@@ -496,6 +499,7 @@ function useFragmentInternal_EXPERIMENTAL(
 
     // See above note
     // eslint-disable-next-line react-hooks/rules-of-hooks
+    // $FlowFixMe[react-rule-hook]
     useEffect(() => {
       const QueryResource = getQueryResourceForEnvironment(environment);
       if (clientEdgeQueries?.length) {
@@ -528,8 +532,10 @@ function useFragmentInternal_EXPERIMENTAL(
     // We only suspend when the component is first trying to mount or changing
     // selectors, not if data becomes missing later:
     if (
+      RelayFeatureFlags.ENABLE_RELAY_OPERATION_TRACKER_SUSPENSE ||
       environment !== previousEnvironment ||
       !committedFragmentSelectorRef.current ||
+      // $FlowFixMe[react-rule-unsafe-ref]
       !areEqualSelectors(committedFragmentSelectorRef.current, fragmentSelector)
     ) {
       invariant(fragmentSelector != null, 'refinement, see invariants above');
@@ -589,6 +595,7 @@ function useFragmentInternal_EXPERIMENTAL(
         state = updatedState;
       }
     }
+    // $FlowFixMe[react-rule-unsafe-ref]
     hasPendingStateChanges.current = false;
   }
 
@@ -601,6 +608,7 @@ function useFragmentInternal_EXPERIMENTAL(
     // for a particular useFragment invocation site
     const fragmentRefIsNullish = fragmentRef == null; // for less sensitive memoization
     // eslint-disable-next-line react-hooks/rules-of-hooks
+    // $FlowFixMe[react-rule-hook]
     data = useMemo(() => {
       if (state.kind === 'bailout') {
         // Bailout state can happen if the fragmentRef is a plural array that is empty or has no
@@ -651,10 +659,11 @@ function useFragmentInternal_EXPERIMENTAL(
 
   if (__DEV__) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
+    // $FlowFixMe[react-rule-hook]
     useDebugValue({fragment: fragmentNode.name, data});
   }
 
   return data;
 }
 
-module.exports = useFragmentInternal_EXPERIMENTAL;
+module.exports = useFragmentInternal;