react-relay 18.0.0 → 18.2.0

package/relay-hooks/loadQuery.js.flow

@@ -34,7 +34,6 @@ const {
   __internal: {fetchQueryDeduped},
   Observable,
   PreloadableQueryRegistry,
-  RelayFeatureFlags,
   ReplaySubject,
   createOperationDescriptor,
   getRequest,
@@ -140,34 +139,29 @@ function loadQuery<
     // `source` observable is returned.
     didMakeNetworkRequest = true;
 
-    let observable;
     const subject = new ReplaySubject<GraphQLResponse>();
-    if (RelayFeatureFlags.ENABLE_LOAD_QUERY_REQUEST_DEDUPING === true) {
-      // Here, we are calling fetchQueryDeduped at the network layer level,
-      // which ensures that only a single network request is active for a given
-      // (environment, identifier) pair.
-      // Since network requests can be started /before/ we have the query ast
-      // necessary to process the results, we need to dedupe the raw requests
-      // separately from deduping the operation execution; specifically,
-      // if `loadQuery` is called multiple times before the query ast is available,
-      // we still want the network request to be deduped.
-      // - If a duplicate active network request is found, it will return an
-      // Observable that replays the events of the already active request.
-      // - If no duplicate active network request is found, it will call the fetchFn
-      // to start the request, and return an Observable that will replay
-      // the events from the network request.
-      // We provide an extra key to the identifier to distinguish deduping
-      // of raw network requests vs deduping of operation executions.
-      const identifier: RequestIdentifier =
-        'raw-network-request-' + getRequestIdentifier(params, variables);
-      observable = fetchQueryDeduped(environment, identifier, () => {
-        const network = environment.getNetwork();
-        return network.execute(params, variables, networkCacheConfig);
-      });
-    } else {
+
+    // Here, we are calling fetchQueryDeduped at the network layer level,
+    // which ensures that only a single network request is active for a given
+    // (environment, identifier) pair.
+    // Since network requests can be started /before/ we have the query ast
+    // necessary to process the results, we need to dedupe the raw requests
+    // separately from deduping the operation execution; specifically,
+    // if `loadQuery` is called multiple times before the query ast is available,
+    // we still want the network request to be deduped.
+    // - If a duplicate active network request is found, it will return an
+    // Observable that replays the events of the already active request.
+    // - If no duplicate active network request is found, it will call the fetchFn
+    // to start the request, and return an Observable that will replay
+    // the events from the network request.
+    // We provide an extra key to the identifier to distinguish deduping
+    // of raw network requests vs deduping of operation executions.
+    const identifier: RequestIdentifier =
+      'raw-network-request-' + getRequestIdentifier(params, variables);
+    const observable = fetchQueryDeduped(environment, identifier, () => {
       const network = environment.getNetwork();
-      observable = network.execute(params, variables, networkCacheConfig);
-    }
+      return network.execute(params, variables, networkCacheConfig);
+    });
 
     const {unsubscribe} = observable.subscribe({
       error(err) {
@@ -196,17 +190,15 @@ function loadQuery<
     operation: OperationDescriptor,
     fetchFn: () => Observable<GraphQLResponse>,
   ) => {
-    if (RelayFeatureFlags.ENABLE_LOAD_QUERY_REQUEST_DEDUPING === true) {
-      // N.B. at this point, if we're calling execute with a query ast (OperationDescriptor),
-      // we are guaranteed to have started a network request. We set this to
-      // true here as well since `makeNetworkRequest` might get skipped in the case
-      // where the query ast is already available and the query executions get deduped.
-      // Even if the execution gets deduped below, we still wan't to return
-      // an observable that provides the replayed network events for the query,
-      // so we set this to true before deduping, to guarantee that the `source`
-      // observable is returned.
-      didMakeNetworkRequest = true;
-    }
+    // N.B. at this point, if we're calling execute with a query ast (OperationDescriptor),
+    // we are guaranteed to have started a network request. We set this to
+    // true here as well since `makeNetworkRequest` might get skipped in the case
+    // where the query ast is already available and the query executions get deduped.
+    // Even if the execution gets deduped below, we still wan't to return
+    // an observable that provides the replayed network events for the query,
+    // so we set this to true before deduping, to guarantee that the `source`
+    // observable is returned.
+    didMakeNetworkRequest = true;
 
     // Here, we are calling fetchQueryDeduped, which ensures that only
     // a single operation is active for a given (environment, identifier) pair,

package/relay-hooks/readFragmentInternal.js.flow

@@ -85,20 +85,11 @@ function handlePotentialSnapshotErrorsForState(
   if (state.kind === 'singular') {
     handlePotentialSnapshotErrors(
       environment,
-      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) {
-      handlePotentialSnapshotErrors(
-        environment,
-        snapshot.missingRequiredFields,
-        snapshot.relayResolverErrors,
-        snapshot.errorResponseFields,
-        snapshot.selector.node.metadata?.throwOnFieldError ?? false,
-      );
+      handlePotentialSnapshotErrors(environment, snapshot.errorResponseFields);
     }
   }
 }

package/relay-hooks/useFragmentInternal.js.flow

@@ -24,7 +24,7 @@ hook useFragmentInternal(
   hookDisplayName: string,
   queryOptions?: FragmentQueryOptions,
 ): ?SelectorData | Array<?SelectorData> {
-  if (RelayFeatureFlags.ENABLE_USE_FRAGMENT_EXPERIMENTAL) {
+  if (RelayFeatureFlags.ENABLE_ACTIVITY_COMPATIBILITY) {
     // $FlowFixMe[react-rule-hook] - the condition is static
     return useFragmentInternal_EXPERIMENTAL(
       fragmentNode,

package/relay-hooks/useFragmentInternal_CURRENT.js.flow

@@ -14,6 +14,7 @@
 import type {QueryResult} from './QueryResource';
 import type {
   CacheConfig,
+  DataID,
   FetchPolicy,
   IEnvironment,
   ReaderFragment,
@@ -21,10 +22,7 @@ import type {
   SelectorData,
   Snapshot,
 } from 'relay-runtime';
-import type {
-  MissingClientEdgeRequestInfo,
-  MissingLiveResolverField,
-} from 'relay-runtime/store/RelayStoreTypes';
+import type {MissingClientEdgeRequestInfo} from 'relay-runtime/store/RelayStoreTypes';
 
 const {getQueryResourceForEnvironment} = require('./QueryResource');
 const useRelayEnvironment = require('./useRelayEnvironment');
@@ -89,13 +87,13 @@ function getMissingClientEdges(
 
 function getSuspendingLiveResolver(
   state: FragmentState,
-): $ReadOnlyArray<MissingLiveResolverField> | null {
+): $ReadOnlyArray<DataID> | null {
   if (state.kind === 'bailout') {
     return null;
   } else if (state.kind === 'singular') {
     return state.snapshot.missingLiveResolverFields ?? null;
   } else {
-    let missingFields: null | Array<MissingLiveResolverField> = null;
+    let missingFields: null | Array<DataID> = null;
     for (const snapshot of state.snapshots) {
       if (snapshot.missingLiveResolverFields) {
         missingFields = missingFields ?? [];
@@ -115,20 +113,11 @@ function handlePotentialSnapshotErrorsForState(
   if (state.kind === 'singular') {
     handlePotentialSnapshotErrors(
       environment,
-      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) {
-      handlePotentialSnapshotErrors(
-        environment,
-        snapshot.missingRequiredFields,
-        snapshot.relayResolverErrors,
-        snapshot.errorResponseFields,
-        snapshot.selector.node.metadata?.throwOnFieldError ?? false,
-      );
+      handlePotentialSnapshotErrors(environment, snapshot.errorResponseFields);
     }
   }
 }
@@ -164,8 +153,6 @@ function handleMissedUpdates(
       missingLiveResolverFields: currentSnapshot.missingLiveResolverFields,
       seenRecords: currentSnapshot.seenRecords,
       selector: currentSnapshot.selector,
-      missingRequiredFields: currentSnapshot.missingRequiredFields,
-      relayResolverErrors: currentSnapshot.relayResolverErrors,
       errorResponseFields: currentSnapshot.errorResponseFields,
     };
     return [
@@ -190,8 +177,6 @@ function handleMissedUpdates(
         missingLiveResolverFields: currentSnapshot.missingLiveResolverFields,
         seenRecords: currentSnapshot.seenRecords,
         selector: currentSnapshot.selector,
-        missingRequiredFields: currentSnapshot.missingRequiredFields,
-        relayResolverErrors: currentSnapshot.relayResolverErrors,
         errorResponseFields: currentSnapshot.errorResponseFields,
       };
       if (updatedData !== snapshot.data) {
@@ -521,8 +506,8 @@ hook useFragmentInternal(
     const suspendingLiveResolvers = getSuspendingLiveResolver(state);
     if (suspendingLiveResolvers != null && suspendingLiveResolvers.length > 0) {
       throw Promise.all(
-        suspendingLiveResolvers.map(({liveStateID}) => {
-          // $FlowFixMe[prop-missing] This is expected to be a LiveResolverStore
+        suspendingLiveResolvers.map(liveStateID => {
+          // $FlowFixMe[prop-missing] This is expected to be a RelayModernStore
           return environment.getStore().getLiveResolverPromise(liveStateID);
         }),
       );

package/relay-hooks/useFragmentInternal_EXPERIMENTAL.js.flow

@@ -14,6 +14,7 @@
 import type {QueryResult} from './QueryResource';
 import type {
   CacheConfig,
+  DataID,
   FetchPolicy,
   IEnvironment,
   ReaderFragment,
@@ -21,10 +22,7 @@ import type {
   SelectorData,
   Snapshot,
 } from 'relay-runtime';
-import type {
-  MissingClientEdgeRequestInfo,
-  MissingLiveResolverField,
-} from 'relay-runtime/store/RelayStoreTypes';
+import type {MissingClientEdgeRequestInfo} from 'relay-runtime/store/RelayStoreTypes';
 
 const {getQueryResourceForEnvironment} = require('./QueryResource');
 const useRelayEnvironment = require('./useRelayEnvironment');
@@ -101,13 +99,13 @@ function getMissingClientEdges(
 
 function getSuspendingLiveResolver(
   state: FragmentState,
-): $ReadOnlyArray<MissingLiveResolverField> | null {
+): $ReadOnlyArray<DataID> | null {
   if (state.kind === 'bailout') {
     return null;
   } else if (state.kind === 'singular') {
     return state.snapshot.missingLiveResolverFields ?? null;
   } else {
-    let missingFields: null | Array<MissingLiveResolverField> = null;
+    let missingFields: null | Array<DataID> = null;
     for (const snapshot of state.snapshots) {
       if (snapshot.missingLiveResolverFields) {
         missingFields = missingFields ?? [];
@@ -127,20 +125,11 @@ function handlePotentialSnapshotErrorsForState(
   if (state.kind === 'singular') {
     handlePotentialSnapshotErrors(
       environment,
-      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) {
-      handlePotentialSnapshotErrors(
-        environment,
-        snapshot.missingRequiredFields,
-        snapshot.relayResolverErrors,
-        snapshot.errorResponseFields,
-        snapshot.selector.node.metadata?.throwOnFieldError ?? false,
-      );
+      handlePotentialSnapshotErrors(environment, snapshot.errorResponseFields);
     }
   }
 }
@@ -176,8 +165,6 @@ function handleMissedUpdates(
       missingLiveResolverFields: currentSnapshot.missingLiveResolverFields,
       seenRecords: currentSnapshot.seenRecords,
       selector: currentSnapshot.selector,
-      missingRequiredFields: currentSnapshot.missingRequiredFields,
-      relayResolverErrors: currentSnapshot.relayResolverErrors,
       errorResponseFields: currentSnapshot.errorResponseFields,
     };
     return [
@@ -204,8 +191,6 @@ function handleMissedUpdates(
         missingLiveResolverFields: currentSnapshot.missingLiveResolverFields,
         seenRecords: currentSnapshot.seenRecords,
         selector: currentSnapshot.selector,
-        missingRequiredFields: currentSnapshot.missingRequiredFields,
-        relayResolverErrors: currentSnapshot.relayResolverErrors,
         errorResponseFields: currentSnapshot.errorResponseFields,
       };
       if (updatedData !== snapshot.data) {
@@ -271,7 +256,6 @@ function subscribeToSnapshot(
   environment: IEnvironment,
   state: FragmentState,
   setState: StateUpdaterFunction<FragmentState>,
-  pendingStateRef: {current: number | null},
 ): () => void {
   if (state.kind === 'bailout') {
     return () => {};
@@ -307,8 +291,6 @@ function subscribeToSnapshot(
             environment: state.environment,
           };
         }
-        pendingStateRef.current =
-          nextState.kind === 'singular' ? nextState.epoch : null;
         return nextState;
       });
     });
@@ -353,8 +335,6 @@ function subscribeToSnapshot(
               environment: state.environment,
             };
           }
-          pendingStateRef.current =
-            nextState.kind === 'plural' ? nextState.epoch : null;
           return nextState;
         });
       }),
@@ -541,8 +521,8 @@ hook useFragmentInternal_EXPERIMENTAL(
     const suspendingLiveResolvers = getSuspendingLiveResolver(state);
     if (suspendingLiveResolvers != null && suspendingLiveResolvers.length > 0) {
       throw Promise.all(
-        suspendingLiveResolvers.map(({liveStateID}) => {
-          // $FlowFixMe[prop-missing] This is expected to be a LiveResolverStore
+        suspendingLiveResolvers.map(liveStateID => {
+          // $FlowFixMe[prop-missing] This is expected to be a RelayModernStore
           return environment.getStore().getLiveResolverPromise(liveStateID);
         }),
       );
@@ -578,11 +558,6 @@ hook useFragmentInternal_EXPERIMENTAL(
   // they're missing even though we are out of options for possibly fetching them:
   handlePotentialSnapshotErrorsForState(environment, state);
 
-  // Ref that stores the epoch of the pending setState, if any. This is used to check
-  // if the state we're rendering is at least as current as the pending update, and
-  // force a refresh if stale.
-  const pendingStateEpochRef = useRef<number | null>(null);
-
   // We emulate CRUD effects using a ref and two effects:
   // - The ref tracks the current state (including updates from the subscription)
   //   and the dispose function for the current subscription. This is null until
@@ -647,7 +622,6 @@ hook useFragmentInternal_EXPERIMENTAL(
       state.environment,
       stateForSubscription,
       setState,
-      pendingStateEpochRef,
     );
     storeSubscriptionRef.current = {
       dispose,
@@ -657,12 +631,7 @@ hook useFragmentInternal_EXPERIMENTAL(
   }, [state]);
   useEffect(() => {
     if (storeSubscriptionRef.current == null && state.kind !== 'bailout') {
-      const dispose = subscribeToSnapshot(
-        state.environment,
-        state,
-        setState,
-        pendingStateEpochRef,
-      );
+      const dispose = subscribeToSnapshot(state.environment, state, setState);
       storeSubscriptionRef.current = {
         dispose,
         selector: state.selector,
@@ -677,23 +646,6 @@ hook useFragmentInternal_EXPERIMENTAL(
     // simulating a CRUD effect
   }, []);
 
-  // If a low-priority update was queued and hasn't rendered yet, render it now
-  if (
-    pendingStateEpochRef.current !== null &&
-    pendingStateEpochRef.current !== state.epoch
-  ) {
-    const updates = handleMissedUpdates(environment, state);
-    if (updates != null) {
-      const [hasStateUpdates, updatedState] = updates;
-      if (hasStateUpdates) {
-        setState(updatedState);
-        state = updatedState;
-      }
-    }
-  }
-  // $FlowFixMe[react-rule-unsafe-ref]
-  pendingStateEpochRef.current = null;
-
   let data: ?SelectorData | Array<?SelectorData>;
   if (isPlural) {
     // Plural fragments require allocating an array of the snapshot data values,

package/relay-hooks/useLoadMoreFunction.js.flow

@@ -22,20 +22,21 @@ import type {
   Variables,
 } from 'relay-runtime';
 
+const getConnectionState = require('./getConnectionState');
 const useFetchTrackingRef = require('./useFetchTrackingRef');
 const useIsMountedRef = require('./useIsMountedRef');
 const useIsOperationNodeActive = require('./useIsOperationNodeActive');
+const useLoadMoreFunction_EXPERIMENTAL = require('./useLoadMoreFunction_EXPERIMENTAL');
 const useRelayEnvironment = require('./useRelayEnvironment');
 const invariant = require('invariant');
 const {useCallback, useEffect, useState} = require('react');
 const {
   __internal: {fetchQuery},
-  ConnectionInterface,
+  RelayFeatureFlags,
   createOperationDescriptor,
   getPaginationVariables,
   getRefetchMetadata,
   getSelector,
-  getValueAtPath,
 } = require('relay-runtime');
 const warning = require('warning');
 
@@ -63,6 +64,17 @@ export type UseLoadMoreFunctionArgs = {
 
 hook useLoadMoreFunction<TVariables: Variables>(
   args: UseLoadMoreFunctionArgs,
+): [LoadMoreFn<TVariables>, boolean, () => void] {
+  if (RelayFeatureFlags.ENABLE_ACTIVITY_COMPATIBILITY) {
+    // $FlowFixMe[react-rule-hook] - the condition is static
+    return useLoadMoreFunction_EXPERIMENTAL(args);
+  }
+  // $FlowFixMe[react-rule-hook] - the condition is static
+  return useLoadMoreFunction_CURRENT(args);
+}
+
+hook useLoadMoreFunction_CURRENT<TVariables: Variables>(
+  args: UseLoadMoreFunctionArgs,
 ): [LoadMoreFn<TVariables>, boolean, () => void] {
   const {
     direction,
@@ -269,82 +281,4 @@ hook useLoadMoreFunction<TVariables: Variables>(
   return [loadMore, hasMore, disposeFetch];
 }
 
-function getConnectionState(
-  direction: Direction,
-  fragmentNode: ReaderFragment,
-  fragmentData: mixed,
-  connectionPathInFragmentData: $ReadOnlyArray<string | number>,
-): {
-  cursor: ?string,
-  hasMore: boolean,
-} {
-  const {
-    EDGES,
-    PAGE_INFO,
-    HAS_NEXT_PAGE,
-    HAS_PREV_PAGE,
-    END_CURSOR,
-    START_CURSOR,
-  } = ConnectionInterface.get();
-  const connection = getValueAtPath(fragmentData, connectionPathInFragmentData);
-  if (connection == null) {
-    return {cursor: null, hasMore: false};
-  }
-
-  invariant(
-    typeof connection === 'object',
-    'Relay: Expected connection in fragment `%s` to have been `null`, or ' +
-      'a plain object with %s and %s properties. Instead got `%s`.',
-    fragmentNode.name,
-    EDGES,
-    PAGE_INFO,
-    connection,
-  );
-
-  const edges = connection[EDGES];
-  const pageInfo = connection[PAGE_INFO];
-  if (edges == null || pageInfo == null) {
-    return {cursor: null, hasMore: false};
-  }
-
-  invariant(
-    Array.isArray(edges),
-    'Relay: Expected connection in fragment `%s` to have a plural `%s` field. ' +
-      'Instead got `%s`.',
-    fragmentNode.name,
-    EDGES,
-    edges,
-  );
-  invariant(
-    typeof pageInfo === 'object',
-    'Relay: Expected connection in fragment `%s` to have a `%s` field. ' +
-      'Instead got `%s`.',
-    fragmentNode.name,
-    PAGE_INFO,
-    pageInfo,
-  );
-
-  const cursor =
-    direction === 'forward'
-      ? pageInfo[END_CURSOR] ?? null
-      : pageInfo[START_CURSOR] ?? null;
-  invariant(
-    cursor === null || typeof cursor === 'string',
-    'Relay: Expected page info for connection in fragment `%s` to have a ' +
-      'valid `%s`. Instead got `%s`.',
-    fragmentNode.name,
-    START_CURSOR,
-    cursor,
-  );
-
-  let hasMore;
-  if (direction === 'forward') {
-    hasMore = cursor != null && pageInfo[HAS_NEXT_PAGE] === true;
-  } else {
-    hasMore = cursor != null && pageInfo[HAS_PREV_PAGE] === true;
-  }
-
-  return {cursor, hasMore};
-}
-
 module.exports = useLoadMoreFunction;