react-relay 17.0.0 → 18.1.0

package/relay-hooks/useLazyLoadQuery.js.flow

@@ -19,7 +19,6 @@ import type {
   Variables,
 } from 'relay-runtime';
 
-const {useTrackLoadQueryInRender} = require('./loadQuery');
 const useLazyLoadQueryNode = require('./useLazyLoadQueryNode');
 const useMemoOperationDescriptor = require('./useMemoOperationDescriptor');
 const useRelayEnvironment = require('./useRelayEnvironment');
@@ -51,10 +50,6 @@ hook useLazyLoadQuery<TVariables: Variables, TData>(
     UNSTABLE_renderPolicy?: RenderPolicy,
   },
 ): TData {
-  // We need to use this hook in order to be able to track if
-  // loadQuery was called during render
-  useTrackLoadQueryInRender();
-
   const environment = useRelayEnvironment();
 
   const query = useMemoOperationDescriptor(

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

@@ -46,7 +46,7 @@ type RefetchFnBase<TVars, TOptions> = (
   options?: TOptions,
 ) => Disposable;
 
-type RefetchFn<TVariables, TKey, TOptions = Options> = RefetchFnBase<
+export type RefetchFn<TVariables, TKey, TOptions = Options> = RefetchFnBase<
   RefetchVariables<TVariables, TKey>,
   TOptions,
 >;

package/relay-hooks/usePreloadedQuery.js.flow

@@ -18,7 +18,6 @@ import type {
 } from './EntryPointTypes.flow';
 import type {Query, RenderPolicy, Variables} from 'relay-runtime';
 
-const {useTrackLoadQueryInRender} = require('./loadQuery');
 const useLazyLoadQueryNode = require('./useLazyLoadQueryNode');
 const useMemoOperationDescriptor = require('./useMemoOperationDescriptor');
 const useRelayEnvironment = require('./useRelayEnvironment');
@@ -67,10 +66,6 @@ hook usePreloadedQuery<
     UNSTABLE_renderPolicy?: RenderPolicy,
   },
 ): TData {
-  // We need to use this hook in order to be able to track if
-  // loadQuery was called during render
-  useTrackLoadQueryInRender();
-
   const environment = useRelayEnvironment();
   const {fetchKey, fetchPolicy, source, variables, networkCacheConfig} =
     preloadedQuery;

package/relay-hooks/useQueryLoader.js.flow

@@ -23,11 +23,12 @@ import type {
   Variables,
 } from 'relay-runtime';
 
-const {loadQuery, useTrackLoadQueryInRender} = require('./loadQuery');
+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,
@@ -146,7 +170,6 @@ hook useQueryLoader<TVariables: Variables, TData, TRawResponse: ?{...} = void>(
     initialQueryReference ?? initialNullQueryReferenceState;
 
   const environment = useRelayEnvironment();
-  useTrackLoadQueryInRender();
 
   const isMountedRef = useIsMountedRef();
   const undisposedQueryReferencesRef = useRef<