react-relay 18.1.0 → 19.0.0

package/relay-hooks/EntryPointContainer.react.js.flow

@@ -22,29 +22,25 @@ const React = require('react');
 const {useContext, useEffect} = require('react');
 const warning = require('warning');
 
-function EntryPointContainer<
+component EntryPointContainer<
   // $FlowFixMe[unsupported-variance-annotation]
-  +TPreloadedQueries: {...},
+  TRuntimeProps: {...},
+  TRenders: React.Node,
   // $FlowFixMe[unsupported-variance-annotation]
-  +TPreloadedNestedEntryPoints: {...},
-  // $FlowFixMe[unsupported-variance-annotation]
-  +TRuntimeProps: {...},
-  // $FlowFixMe[unsupported-variance-annotation]
-  +TExtraProps,
-  // $FlowFixMe[unsupported-variance-annotation]
-  +TEntryPointComponent: EntryPointComponent<
-    TPreloadedQueries,
-    TPreloadedNestedEntryPoints,
+  TEntryPointComponent: EntryPointComponent<
+    // $FlowExpectedErrors[unclear-type] Use any to accept all kinds of EntryPointComponent
+    any,
+    // $FlowExpectedErrors[unclear-type] Use any to accept all kinds of EntryPointComponent
+    any,
     TRuntimeProps,
-    TExtraProps,
+    // $FlowExpectedErrors[unclear-type] Use any to accept all kinds of EntryPointComponent
+    any,
+    TRenders,
   >,
->({
-  entryPointReference,
-  props,
-}: $ReadOnly<{
+>(
   entryPointReference: PreloadedEntryPoint<TEntryPointComponent>,
   props: TRuntimeProps,
-}>): React.MixedElement {
+) renders TRenders {
   warning(
     entryPointReference.isDisposed === false,
     '<EntryPointContainer>: Expected entryPointReference to not be disposed ' +

package/relay-hooks/EntryPointTypes.flow.js.flow

@@ -14,7 +14,7 @@
 /* eslint-disable no-unused-vars */
 
 import type {JSResourceReference} from 'JSResourceReference';
-import type {AbstractComponent, ElementConfig} from 'react';
+import type {ComponentType, ElementConfig} from 'react';
 import type {
   CacheConfig,
   FetchPolicy,
@@ -36,6 +36,7 @@ export type PreloadFetchPolicy =
 export type PreloadOptions = {
   +fetchKey?: string | number,
   +fetchPolicy?: ?PreloadFetchPolicy,
+  +includeIf?: ?boolean,
   +networkCacheConfig?: ?CacheConfig,
 };
 
@@ -178,14 +179,15 @@ export type EntryPointComponent<
   TPreloadedEntryPoints = {},
   TRuntimeProps = {},
   TExtraProps = null,
-> = AbstractComponent<
-  EntryPointProps<
+  TRenders: React.Node = React.Node,
+> = component(
+  ...EntryPointProps<
     TPreloadedQueries,
     TPreloadedEntryPoints,
     TRuntimeProps,
     TExtraProps,
-  >,
->;
+  >
+) renders TRenders;
 
 // Return type of the `getPreloadProps(...)` of the entry point
 export type PreloadProps<

package/relay-hooks/MatchContainer.js.flow

@@ -95,7 +95,7 @@ export type MatchPointer = {
 
 export type MatchContainerProps<TProps: {...}, TFallback: React.Node> = {
   +fallback?: ?TFallback,
-  +loader: (module: mixed) => React.AbstractComponent<TProps>,
+  +loader: (module: mixed) => component(...TProps),
   +match: ?MatchPointer | ?TypenameOnlyPointer,
   +props?: TProps,
 };

package/relay-hooks/legacy/FragmentResource.js.flow

@@ -22,7 +22,6 @@ import type {
   RequestDescriptor,
   Snapshot,
 } from 'relay-runtime';
-import type {MissingLiveResolverField} from 'relay-runtime/store/RelayStoreTypes';
 
 const LRUCache = require('../LRUCache');
 const {getQueryResourceForEnvironment} = require('../QueryResource');
@@ -98,7 +97,7 @@ function hasMissingClientEdges(snapshot: SingularOrPluralSnapshot): boolean {
 
 function missingLiveResolverFields(
   snapshot: SingularOrPluralSnapshot,
-): ?$ReadOnlyArray<MissingLiveResolverField> {
+): ?$ReadOnlyArray<DataID> {
   if (Array.isArray(snapshot)) {
     return snapshot
       .map(s => s.missingLiveResolverFields)
@@ -449,7 +448,7 @@ class FragmentResourceImpl {
       );
     const parentQueryPromiseResultPromise = parentQueryPromiseResult?.promise; // for refinement
     const missingResolverFieldPromises =
-      missingLiveResolverFields(snapshot)?.map(({liveStateID}) => {
+      missingLiveResolverFields(snapshot)?.map(liveStateID => {
         const store = environment.getStore();
 
         // $FlowFixMe[prop-missing] This is expected to be a RelayModernStore
@@ -559,13 +558,10 @@ class FragmentResourceImpl {
   _throwOrLogErrorsInSnapshot(snapshot: SingularOrPluralSnapshot) {
     if (Array.isArray(snapshot)) {
       snapshot.forEach(s => {
-        handlePotentialSnapshotErrors(this._environment, s.errorResponseFields);
+        handlePotentialSnapshotErrors(this._environment, s.fieldErrors);
       });
     } else {
-      handlePotentialSnapshotErrors(
-        this._environment,
-        snapshot.errorResponseFields,
-      );
+      handlePotentialSnapshotErrors(this._environment, snapshot.fieldErrors);
     }
   }
 
@@ -764,7 +760,7 @@ class FragmentResourceImpl {
       missingLiveResolverFields: currentSnapshot.missingLiveResolverFields,
       seenRecords: currentSnapshot.seenRecords,
       selector: currentSnapshot.selector,
-      errorResponseFields: currentSnapshot.errorResponseFields,
+      fieldErrors: currentSnapshot.fieldErrors,
     };
     if (updatedData !== renderData) {
       const result = getFragmentResult(

package/relay-hooks/legacy/useBlockingPaginationFragment.js.flow

@@ -14,13 +14,7 @@
 import type {LoadMoreFn, UseLoadMoreFunctionArgs} from '../useLoadMoreFunction';
 import type {Options} from './useRefetchableFragmentNode';
 import type {RefetchableFragment} from 'relay-runtime';
-import type {
-  Disposable,
-  FragmentType,
-  GraphQLResponse,
-  Observer,
-  Variables,
-} from 'relay-runtime';
+import type {Disposable, FragmentType, Variables} from 'relay-runtime';
 
 const useLoadMoreFunction = require('../useLoadMoreFunction');
 const useStaticFragmentNodeWarning = require('../useStaticFragmentNodeWarning');
@@ -169,16 +163,7 @@ hook useBlockingPaginationFragment<
 hook useLoadMore<TVariables: Variables>(args: {
   disableStoreUpdates: () => void,
   enableStoreUpdates: () => void,
-  ...$Exact<
-    $Diff<
-      UseLoadMoreFunctionArgs,
-      {
-        observer: Observer<GraphQLResponse>,
-        onReset: () => void,
-        ...
-      },
-    >,
-  >,
+  ...$Exact<Omit<UseLoadMoreFunctionArgs, 'observer' | 'onReset'>>,
 }): [LoadMoreFn<TVariables>, boolean, () => void] {
   const {disableStoreUpdates, enableStoreUpdates, ...loadMoreArgs} = args;
   const [requestPromise, setRequestPromise] = useState<null | Promise<mixed>>(

package/relay-hooks/legacy/useRefetchableFragmentNode.js.flow

@@ -592,7 +592,7 @@ if (__DEV__) {
       fragmentNode: ReaderFragment,
       componentDisplayName: string,
     ): void {
-      if (previousIDAndTypename == null) {
+      if (previousIDAndTypename == null || refetchedFragmentRef == null) {
         return;
       }
       const {ID_KEY} = require('relay-runtime');

package/relay-hooks/loadEntryPoint.js.flow

@@ -62,6 +62,12 @@ function loadEntryPoint<
       const {environmentProviderOptions, options, parameters, variables} =
         query;
 
+      // $FlowFixMe[prop-missing] Exists for types that wrap EntryPoint
+      if (options?.includeIf === false) {
+        // don't preload this query since the includeIf is false
+        return;
+      }
+
       const environment = environmentProvider.getEnvironment(
         environmentProviderOptions,
       );

package/relay-hooks/loadQuery.js.flow

@@ -28,13 +28,13 @@ import type {
   RequestIdentifier,
   RequestParameters,
 } from 'relay-runtime';
+import type {OperationAvailability} from 'relay-runtime/store/RelayStoreTypes';
 
 const invariant = require('invariant');
 const {
   __internal: {fetchQueryDeduped},
   Observable,
   PreloadableQueryRegistry,
-  RelayFeatureFlags,
   ReplaySubject,
   createOperationDescriptor,
   getRequest,
@@ -131,6 +131,7 @@ function loadQuery<
   let didMakeNetworkRequest = false;
   const makeNetworkRequest = (
     params: RequestParameters,
+    checkOperation?: () => OperationAvailability,
   ): Observable<GraphQLResponse> => {
     // N.B. this function is called synchronously or not at all
     // didMakeNetworkRequest is safe to rely on in the returned value
@@ -140,34 +141,38 @@ 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,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        checkOperation,
+      );
+    });
 
     const {unsubscribe} = observable.subscribe({
       error(err) {
@@ -196,17 +201,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,
@@ -255,13 +258,18 @@ function loadQuery<
     // then we do nothing.
     const shouldFetch =
       fetchPolicy !== 'store-or-network' ||
+      // environment.check can trigger store updates through missing field handlers,
+      // short circuiting the check avoids unnecessary updates
       environment.check(operation).status !== 'available';
 
     if (shouldFetch) {
       executeDeduped(operation, () => {
         // N.B. Since we have the operation synchronously available here,
         // we can immediately fetch and execute the operation.
-        const networkObservable = makeNetworkRequest(concreteRequest.params);
+        const networkObservable = makeNetworkRequest(
+          concreteRequest.params,
+          () => environment.check(operation),
+        );
         const executeObservable = executeWithNetworkSource(
           operation,
           networkObservable,

package/relay-hooks/preloadQuery_DEPRECATED.js.flow

@@ -24,6 +24,7 @@ import type {
   GraphQLResponse,
   GraphQLTaggedNode,
   IEnvironment,
+  OperationAvailability,
   OperationType,
   Subscription,
 } from 'relay-runtime';
@@ -167,12 +168,17 @@ function preloadQueryDeduped<TQuery: OperationType>(
   }`;
   const prevQueryEntry = pendingQueries.get(cacheKey);
 
-  const availability =
-    fetchPolicy === STORE_OR_NETWORK_DEFAULT && query != null && query != null
+  function checkOperation(): OperationAvailability {
+    return query != null
       ? environment.check(
           createOperationDescriptor(query, variables, networkCacheConfig),
         )
       : {status: 'missing'};
+  }
+  const availability =
+    fetchPolicy === STORE_OR_NETWORK_DEFAULT
+      ? checkOperation()
+      : {status: 'missing'};
 
   let nextQueryEntry: ?PendingQueryEntry;
   if (availability.status === 'available' && query != null) {
@@ -203,7 +209,16 @@ function preloadQueryDeduped<TQuery: OperationType>(
     }
   } else if (prevQueryEntry == null || prevQueryEntry.kind !== 'network') {
     // Should fetch but we're not already fetching: fetch!
-    const source = network.execute(params, variables, networkCacheConfig, null);
+    const source = network.execute(
+      params,
+      variables,
+      networkCacheConfig,
+      null,
+      undefined,
+      undefined,
+      undefined,
+      checkOperation,
+    );
     const subject = new ReplaySubject<GraphQLResponse>();
     nextQueryEntry = {
       cacheKey,

package/relay-hooks/readFragmentInternal.js.flow

@@ -83,13 +83,10 @@ function handlePotentialSnapshotErrorsForState(
   state: FragmentState,
 ): void {
   if (state.kind === 'singular') {
-    handlePotentialSnapshotErrors(
-      environment,
-      state.snapshot.errorResponseFields,
-    );
+    handlePotentialSnapshotErrors(environment, state.snapshot.fieldErrors);
   } else if (state.kind === 'plural') {
     for (const snapshot of state.snapshots) {
-      handlePotentialSnapshotErrors(environment, snapshot.errorResponseFields);
+      handlePotentialSnapshotErrors(environment, snapshot.fieldErrors);
     }
   }
 }

package/relay-hooks/useEntryPointLoader.js.flow

@@ -48,7 +48,9 @@ type UseEntryPointLoaderHookReturnType<
 type NullEntryPointReference = {
   kind: 'NullEntryPointReference',
 };
-const initialNullEntryPointReferenceState = {kind: 'NullEntryPointReference'};
+const initialNullEntryPointReferenceState: NullEntryPointReference = {
+  kind: 'NullEntryPointReference',
+};
 
 hook useLoadEntryPoint<
   TEntryPointParams: {...},
@@ -122,7 +124,7 @@ hook useLoadEntryPoint<
 
   const disposeEntryPoint = useCallback(() => {
     if (isMountedRef.current) {
-      const nullEntryPointReference = {
+      const nullEntryPointReference: NullEntryPointReference = {
         kind: 'NullEntryPointReference',
       };
       undisposedEntryPointReferencesRef.current.add(nullEntryPointReference);

package/relay-hooks/useFragment.js.flow

@@ -54,6 +54,7 @@ hook useFragment(fragment: GraphQLTaggedNode, key: mixed): mixed {
   if (__DEV__) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     // $FlowFixMe[react-rule-hook]
+    // $FlowFixMe[react-rule-hook-conditional]
     useDebugValue({fragment: fragmentNode.name, data});
   }
   return data;

package/relay-hooks/useFragmentInternal.js.flow

@@ -26,6 +26,7 @@ hook useFragmentInternal(
 ): ?SelectorData | Array<?SelectorData> {
   if (RelayFeatureFlags.ENABLE_ACTIVITY_COMPATIBILITY) {
     // $FlowFixMe[react-rule-hook] - the condition is static
+    // $FlowFixMe[react-rule-hook-conditional]
     return useFragmentInternal_EXPERIMENTAL(
       fragmentNode,
       fragmentRef,
@@ -34,6 +35,7 @@ hook useFragmentInternal(
     );
   }
   // $FlowFixMe[react-rule-hook] - the condition is static
+  // $FlowFixMe[react-rule-hook-conditional]
   return useFragmentInternal_CURRENT(
     fragmentNode,
     fragmentRef,

package/relay-hooks/useFragmentInternal_CURRENT.js.flow

@@ -14,6 +14,7 @@
 import type {QueryResult} from './QueryResource';
 import type {
   CacheConfig,
+  DataID,
   FetchPolicy,
   IEnvironment,
   ReaderFragment,
@@ -21,13 +22,11 @@ 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');
+const useRelayLoggingContext = require('./useRelayLoggingContext');
 const invariant = require('invariant');
 const {useDebugValue, useEffect, useMemo, useRef, useState} = require('react');
 const {
@@ -89,13 +88,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 ?? [];
@@ -111,15 +110,21 @@ function getSuspendingLiveResolver(
 function handlePotentialSnapshotErrorsForState(
   environment: IEnvironment,
   state: FragmentState,
+  loggingContext: mixed | void,
 ): void {
   if (state.kind === 'singular') {
     handlePotentialSnapshotErrors(
       environment,
-      state.snapshot.errorResponseFields,
+      state.snapshot.fieldErrors,
+      loggingContext,
     );
   } else if (state.kind === 'plural') {
     for (const snapshot of state.snapshots) {
-      handlePotentialSnapshotErrors(environment, snapshot.errorResponseFields);
+      handlePotentialSnapshotErrors(
+        environment,
+        snapshot.fieldErrors,
+        loggingContext,
+      );
     }
   }
 }
@@ -155,7 +160,7 @@ function handleMissedUpdates(
       missingLiveResolverFields: currentSnapshot.missingLiveResolverFields,
       seenRecords: currentSnapshot.seenRecords,
       selector: currentSnapshot.selector,
-      errorResponseFields: currentSnapshot.errorResponseFields,
+      fieldErrors: currentSnapshot.fieldErrors,
     };
     return [
       updatedData !== state.snapshot.data,
@@ -179,7 +184,7 @@ function handleMissedUpdates(
         missingLiveResolverFields: currentSnapshot.missingLiveResolverFields,
         seenRecords: currentSnapshot.seenRecords,
         selector: currentSnapshot.selector,
-        errorResponseFields: currentSnapshot.errorResponseFields,
+        fieldErrors: currentSnapshot.fieldErrors,
       };
       if (updatedData !== snapshot.data) {
         didMissUpdates = true;
@@ -405,6 +410,12 @@ hook useFragmentInternal(
   );
 
   const environment = useRelayEnvironment();
+  let loggerContext;
+  if (RelayFeatureFlags.ENABLE_UI_CONTEXT_ON_RELAY_LOGGER) {
+    // $FlowFixMe[react-rule-hook] - the condition is static
+    // $FlowFixMe[react-rule-hook-conditional]
+    loggerContext = useRelayLoggingContext();
+  }
   const [_state, setState] = useState<FragmentState>(() =>
     getFragmentState(environment, fragmentSelector),
   );
@@ -456,6 +467,7 @@ hook useFragmentInternal(
     // always or never run for a given invocation of this hook.
     // eslint-disable-next-line react-hooks/rules-of-hooks
     // $FlowFixMe[react-rule-hook]
+    // $FlowFixMe[react-rule-hook-conditional]
     const [clientEdgeQueries, activeRequestPromises] = useMemo(() => {
       const missingClientEdges = getMissingClientEdges(state);
       // eslint-disable-next-line no-shadow
@@ -487,6 +499,7 @@ hook useFragmentInternal(
     // See above note
     // eslint-disable-next-line react-hooks/rules-of-hooks
     // $FlowFixMe[react-rule-hook]
+    // $FlowFixMe[react-rule-hook-conditional]
     useEffect(() => {
       const QueryResource = getQueryResourceForEnvironment(environment);
       if (clientEdgeQueries?.length) {
@@ -508,7 +521,7 @@ hook useFragmentInternal(
     const suspendingLiveResolvers = getSuspendingLiveResolver(state);
     if (suspendingLiveResolvers != null && suspendingLiveResolvers.length > 0) {
       throw Promise.all(
-        suspendingLiveResolvers.map(({liveStateID}) => {
+        suspendingLiveResolvers.map(liveStateID => {
           // $FlowFixMe[prop-missing] This is expected to be a RelayModernStore
           return environment.getStore().getLiveResolverPromise(liveStateID);
         }),
@@ -543,7 +556,7 @@ hook useFragmentInternal(
 
   // Report required fields only if we're not suspending, since that means
   // they're missing even though we are out of options for possibly fetching them:
-  handlePotentialSnapshotErrorsForState(environment, state);
+  handlePotentialSnapshotErrorsForState(environment, state, loggerContext);
 
   const hasPendingStateChanges = useRef<boolean>(false);
 
@@ -596,6 +609,7 @@ hook useFragmentInternal(
     const fragmentRefIsNullish = fragmentRef == null; // for less sensitive memoization
     // eslint-disable-next-line react-hooks/rules-of-hooks
     // $FlowFixMe[react-rule-hook]
+    // $FlowFixMe[react-rule-hook-conditional]
     data = useMemo(() => {
       if (state.kind === 'bailout') {
         // Bailout state can happen if the fragmentRef is a plural array that is empty or has no
@@ -647,6 +661,7 @@ hook useFragmentInternal(
   if (__DEV__) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     // $FlowFixMe[react-rule-hook]
+    // $FlowFixMe[react-rule-hook-conditional]
     useDebugValue({fragment: fragmentNode.name, data});
   }