react-relay 18.0.0 → 18.1.0

package/relay-hooks/useFragmentInternal_EXPERIMENTAL.js.flow

@@ -127,20 +127,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 +167,6 @@ function handleMissedUpdates(
       missingLiveResolverFields: currentSnapshot.missingLiveResolverFields,
       seenRecords: currentSnapshot.seenRecords,
       selector: currentSnapshot.selector,
-      missingRequiredFields: currentSnapshot.missingRequiredFields,
-      relayResolverErrors: currentSnapshot.relayResolverErrors,
       errorResponseFields: currentSnapshot.errorResponseFields,
     };
     return [
@@ -204,8 +193,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 +258,6 @@ function subscribeToSnapshot(
   environment: IEnvironment,
   state: FragmentState,
   setState: StateUpdaterFunction<FragmentState>,
-  pendingStateRef: {current: number | null},
 ): () => void {
   if (state.kind === 'bailout') {
     return () => {};
@@ -307,8 +293,6 @@ function subscribeToSnapshot(
             environment: state.environment,
           };
         }
-        pendingStateRef.current =
-          nextState.kind === 'singular' ? nextState.epoch : null;
         return nextState;
       });
     });
@@ -353,8 +337,6 @@ function subscribeToSnapshot(
               environment: state.environment,
             };
           }
-          pendingStateRef.current =
-            nextState.kind === 'plural' ? nextState.epoch : null;
           return nextState;
         });
       }),
@@ -542,7 +524,7 @@ hook useFragmentInternal_EXPERIMENTAL(
     if (suspendingLiveResolvers != null && suspendingLiveResolvers.length > 0) {
       throw Promise.all(
         suspendingLiveResolvers.map(({liveStateID}) => {
-          // $FlowFixMe[prop-missing] This is expected to be a LiveResolverStore
+          // $FlowFixMe[prop-missing] This is expected to be a RelayModernStore
           return environment.getStore().getLiveResolverPromise(liveStateID);
         }),
       );
@@ -578,11 +560,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 +624,6 @@ hook useFragmentInternal_EXPERIMENTAL(
       state.environment,
       stateForSubscription,
       setState,
-      pendingStateEpochRef,
     );
     storeSubscriptionRef.current = {
       dispose,
@@ -657,12 +633,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 +648,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;

package/relay-hooks/useLoadMoreFunction_EXPERIMENTAL.js.flow

@@ -0,0 +1,280 @@
+/**
+ * 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 {
+  ConcreteRequest,
+  Direction,
+  Disposable,
+  GraphQLResponse,
+  Observer,
+  ReaderFragment,
+  ReaderPaginationMetadata,
+  Subscription,
+  Variables,
+} from 'relay-runtime';
+
+const getConnectionState = require('./getConnectionState');
+const useIsMountedRef = require('./useIsMountedRef');
+const useIsOperationNodeActive = require('./useIsOperationNodeActive');
+const useRelayEnvironment = require('./useRelayEnvironment');
+const invariant = require('invariant');
+const {useCallback, useRef, useState} = require('react');
+const {
+  __internal: {fetchQuery},
+  createOperationDescriptor,
+  getPaginationVariables,
+  getRefetchMetadata,
+  getSelector,
+} = require('relay-runtime');
+const warning = require('warning');
+
+export type LoadMoreFn<TVariables: Variables> = (
+  count: number,
+  options?: {
+    onComplete?: (Error | null) => void,
+    UNSTABLE_extraVariables?: Partial<TVariables>,
+  },
+) => Disposable;
+
+export type UseLoadMoreFunctionArgs = {
+  direction: Direction,
+  fragmentNode: ReaderFragment,
+  fragmentRef: mixed,
+  fragmentIdentifier: string,
+  fragmentData: mixed,
+  connectionPathInFragmentData: $ReadOnlyArray<string | number>,
+  paginationRequest: ConcreteRequest,
+  paginationMetadata: ReaderPaginationMetadata,
+  componentDisplayName: string,
+  observer: Observer<GraphQLResponse>,
+  onReset: () => void,
+};
+
+hook useLoadMoreFunction_EXPERIMENTAL<TVariables: Variables>(
+  args: UseLoadMoreFunctionArgs,
+): [
+  // Function to load more data
+  LoadMoreFn<TVariables>,
+  // Whether the connection has more data to load
+  boolean,
+  // Force dispose function which cancels the in-flight fetch itself, and callbacks
+  () => void,
+] {
+  const {
+    direction,
+    fragmentNode,
+    fragmentRef,
+    fragmentIdentifier,
+    fragmentData,
+    connectionPathInFragmentData,
+    paginationRequest,
+    paginationMetadata,
+    componentDisplayName,
+    observer,
+    onReset,
+  } = args;
+  const environment = useRelayEnvironment();
+
+  const {identifierInfo} = getRefetchMetadata(
+    fragmentNode,
+    componentDisplayName,
+  );
+  const identifierValue =
+    identifierInfo?.identifierField != null &&
+    fragmentData != null &&
+    typeof fragmentData === 'object'
+      ? fragmentData[identifierInfo.identifierField]
+      : null;
+
+  const fetchStatusRef = useRef<
+    {kind: 'fetching', subscription: Subscription} | {kind: 'none'},
+  >({kind: 'none'});
+  const [mirroredEnvironment, setMirroredEnvironment] = useState(environment);
+  const [mirroredFragmentIdentifier, setMirroredFragmentIdentifier] =
+    useState(fragmentIdentifier);
+
+  const isParentQueryActive = useIsOperationNodeActive(
+    fragmentNode,
+    fragmentRef,
+  );
+
+  const forceDisposeFn = useCallback(() => {
+    // $FlowFixMe[react-rule-unsafe-ref]
+    if (fetchStatusRef.current.kind === 'fetching') {
+      // $FlowFixMe[react-rule-unsafe-ref]
+      fetchStatusRef.current.subscription.unsubscribe();
+    }
+    // $FlowFixMe[react-rule-unsafe-ref]
+    fetchStatusRef.current = {kind: 'none'};
+  }, []);
+
+  const shouldReset =
+    environment !== mirroredEnvironment ||
+    fragmentIdentifier !== mirroredFragmentIdentifier;
+  if (shouldReset) {
+    forceDisposeFn();
+    onReset();
+    setMirroredEnvironment(environment);
+    setMirroredFragmentIdentifier(fragmentIdentifier);
+  }
+
+  const {cursor, hasMore} = getConnectionState(
+    direction,
+    fragmentNode,
+    fragmentData,
+    connectionPathInFragmentData,
+  );
+
+  const isMountedRef = useIsMountedRef();
+  const loadMore = useCallback(
+    (
+      count: number,
+      options: void | {
+        UNSTABLE_extraVariables?: Partial<TVariables>,
+        onComplete?: (Error | null) => void,
+      },
+    ) => {
+      // TODO(T41131846): Fetch/Caching policies for loadMore
+
+      const onComplete = options?.onComplete;
+      if (isMountedRef.current !== true) {
+        // Bail out and warn if we're trying to paginate after the component
+        // has unmounted
+        warning(
+          false,
+          'Relay: Unexpected fetch on unmounted component for fragment ' +
+            '`%s` in `%s`. It looks like some instances of your component are ' +
+            'still trying to fetch data but they already unmounted. ' +
+            'Please make sure you clear all timers, intervals, ' +
+            'async calls, etc that may trigger a fetch.',
+          fragmentNode.name,
+          componentDisplayName,
+        );
+        return {dispose: () => {}};
+      }
+
+      const fragmentSelector = getSelector(fragmentNode, fragmentRef);
+      if (
+        fetchStatusRef.current.kind === 'fetching' ||
+        fragmentData == null ||
+        isParentQueryActive
+      ) {
+        if (fragmentSelector == null) {
+          warning(
+            false,
+            'Relay: Unexpected fetch while using a null fragment ref ' +
+              'for fragment `%s` in `%s`. When fetching more items, we expect ' +
+              "initial fragment data to be non-null. Please make sure you're " +
+              'passing a valid fragment ref to `%s` before paginating.',
+            fragmentNode.name,
+            componentDisplayName,
+            componentDisplayName,
+          );
+        }
+
+        if (onComplete) {
+          onComplete(null);
+        }
+        return {dispose: () => {}};
+      }
+
+      invariant(
+        fragmentSelector != null &&
+          fragmentSelector.kind !== 'PluralReaderSelector',
+        'Relay: Expected to be able to find a non-plural fragment owner for ' +
+          "fragment `%s` when using `%s`. If you're seeing this, " +
+          'this is likely a bug in Relay.',
+        fragmentNode.name,
+        componentDisplayName,
+      );
+
+      const parentVariables = fragmentSelector.owner.variables;
+      const fragmentVariables = fragmentSelector.variables;
+      const extraVariables = options?.UNSTABLE_extraVariables;
+      const baseVariables = {
+        ...parentVariables,
+        ...fragmentVariables,
+      };
+      const paginationVariables = getPaginationVariables(
+        direction,
+        count,
+        cursor,
+        baseVariables,
+        {...extraVariables},
+        paginationMetadata,
+      );
+
+      // If the query needs an identifier value ('id' or similar) and one
+      // was not explicitly provided, read it from the fragment data.
+      if (identifierInfo != null) {
+        // @refetchable fragments are guaranteed to have an `id` selection
+        // if the type is Node, implements Node, or is @fetchable. Double-check
+        // that there actually is a value at runtime.
+        if (typeof identifierValue !== 'string') {
+          warning(
+            false,
+            'Relay: Expected result to have a string  ' +
+              '`%s` in order to refetch, got `%s`.',
+            identifierInfo.identifierField,
+            identifierValue,
+          );
+        }
+        paginationVariables[identifierInfo.identifierQueryVariableName] =
+          identifierValue;
+      }
+
+      const paginationQuery = createOperationDescriptor(
+        paginationRequest,
+        paginationVariables,
+        {force: true},
+      );
+      fetchQuery(environment, paginationQuery).subscribe({
+        ...observer,
+        start: subscription => {
+          fetchStatusRef.current = {kind: 'fetching', subscription};
+          observer.start && observer.start(subscription);
+        },
+        complete: () => {
+          fetchStatusRef.current = {kind: 'none'};
+          observer.complete && observer.complete();
+          onComplete && onComplete(null);
+        },
+        error: error => {
+          fetchStatusRef.current = {kind: 'none'};
+          observer.complete && observer.complete();
+          onComplete && onComplete(error);
+        },
+      });
+      return {
+        dispose: () => {},
+      };
+    },
+    // NOTE: We disable react-hooks-deps warning because all values
+    // inside paginationMetadata are static
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      environment,
+      identifierValue,
+      direction,
+      cursor,
+      isParentQueryActive,
+      fragmentData,
+      fragmentNode.name,
+      fragmentRef,
+      componentDisplayName,
+    ],
+  );
+  return [loadMore, hasMore, forceDisposeFn];
+}
+
+module.exports = useLoadMoreFunction_EXPERIMENTAL;

package/relay-hooks/useQueryLoader.js.flow

@@ -25,9 +25,10 @@ import type {
 
 const {loadQuery} = require('./loadQuery');
 const useIsMountedRef = require('./useIsMountedRef');
+const useQueryLoader_EXPERIMENTAL = require('./useQueryLoader_EXPERIMENTAL');
 const useRelayEnvironment = require('./useRelayEnvironment');
 const {useCallback, useEffect, useRef, useState} = require('react');
-const {getRequest} = require('relay-runtime');
+const {RelayFeatureFlags, getRequest} = require('relay-runtime');
 
 export type LoaderFn<TQuery: OperationType> = (
   variables: TQuery['variables'],
@@ -42,7 +43,7 @@ export type UseQueryLoaderLoadQueryOptions = $ReadOnly<{
 // NullQueryReference needs to implement referential equality,
 // so that multiple NullQueryReferences can be in the same set
 // (corresponding to multiple calls to disposeQuery).
-type NullQueryReference = {
+export type NullQueryReference = {
   kind: 'NullQueryReference',
 };
 const initialNullQueryReferenceState = {kind: 'NullQueryReference'};
@@ -68,7 +69,7 @@ function requestIsLiveQuery<
   return request.params.metadata.live !== undefined;
 }
 
-type UseQueryLoaderHookReturnType<
+export type UseQueryLoaderHookReturnType<
   TVariables: Variables,
   TData,
   TRawResponse: ?{...} = void,
@@ -115,6 +116,29 @@ hook useQueryLoader<TVariables: Variables, TData, TRawResponse: ?{...} = void>(
     variables: TVariables,
     rawResponse?: $NonMaybeType<TRawResponse>,
   }>,
+): UseQueryLoaderHookReturnType<TVariables, TData> {
+  if (RelayFeatureFlags.ENABLE_ACTIVITY_COMPATIBILITY) {
+    // $FlowFixMe[react-rule-hook] - the condition is static
+    return useQueryLoader_EXPERIMENTAL(
+      preloadableRequest,
+      initialQueryReference,
+    );
+  }
+  // $FlowFixMe[react-rule-hook] - the condition is static
+  return useQueryLoader_CURRENT(preloadableRequest, initialQueryReference);
+}
+
+hook useQueryLoader_CURRENT<
+  TVariables: Variables,
+  TData,
+  TRawResponse: ?{...} = void,
+>(
+  preloadableRequest: Query<TVariables, TData, TRawResponse>,
+  initialQueryReference?: ?PreloadedQuery<{
+    response: TData,
+    variables: TVariables,
+    rawResponse?: $NonMaybeType<TRawResponse>,
+  }>,
 ): UseQueryLoaderHookReturnType<TVariables, TData> {
   type QueryType = {
     response: TData,