react-relay 14.1.0 → 15.0.0

package/relay-hooks/loadQuery.js.flow

@@ -6,12 +6,13 @@
  *
  * @flow strict-local
  * @format
- * @emails oncall+relay
+ * @oncall relay
  */
 
 'use strict';
 
 import type {
+  EnvironmentProviderOptions,
   LoadQueryOptions,
   PreloadableConcreteRequest,
   PreloadedQueryInner,
@@ -30,11 +31,11 @@ import type {
 const invariant = require('invariant');
 const React = require('react');
 const {
+  __internal: {fetchQueryDeduped},
   Observable,
   PreloadableQueryRegistry,
   RelayFeatureFlags,
   ReplaySubject,
-  __internal: {fetchQueryDeduped},
   createOperationDescriptor,
   getRequest,
   getRequestIdentifier,
@@ -55,7 +56,10 @@ function useTrackLoadQueryInRender() {
   }
 }
 
-function loadQuery<TQuery: OperationType, TEnvironmentProviderOptions>(
+function loadQuery<
+  TQuery: OperationType,
+  TEnvironmentProviderOptions = EnvironmentProviderOptions,
+>(
   environment: IEnvironment,
   preloadableRequest: GraphQLTaggedNode | PreloadableConcreteRequest<TQuery>,
   variables: TQuery['variables'],
@@ -115,8 +119,8 @@ function loadQuery<TQuery: OperationType, TEnvironmentProviderOptions>(
   // allows us to capture the events that occur during the eager execution
   // of the operation, and then replay them to the Observable we
   // ultimately return.
-  const executionSubject = new ReplaySubject();
-  const returnedObservable = Observable.create(sink =>
+  const executionSubject = new ReplaySubject<GraphQLResponse>();
+  const returnedObservable = Observable.create<GraphQLResponse>(sink =>
     executionSubject.subscribe(sink),
   );
 
@@ -139,7 +143,7 @@ function loadQuery<TQuery: OperationType, TEnvironmentProviderOptions>(
     didMakeNetworkRequest = true;
 
     let observable;
-    const subject = new ReplaySubject();
+    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
@@ -270,7 +274,7 @@ function loadQuery<TQuery: OperationType, TEnvironmentProviderOptions>(
   };
 
   let params;
-  let cancelOnLoadCallback;
+  let cancelOnLoadCallback: () => void;
   let queryId;
   if (preloadableRequest.kind === 'PreloadableConcreteRequest') {
     const preloadableConcreteRequest: PreloadableConcreteRequest<TQuery> =

package/relay-hooks/preloadQuery_DEPRECATED.js.flow

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -31,7 +31,6 @@ import type {
 const {
   Observable,
   PreloadableQueryRegistry,
-  RelayFeatureFlags,
   ReplaySubject,
   createOperationDescriptor,
   getRequest,
@@ -45,8 +44,8 @@ const WEAKMAP_SUPPORTED = typeof WeakMap === 'function';
 const STORE_OR_NETWORK_DEFAULT: PreloadFetchPolicy = 'store-or-network';
 
 const pendingQueriesByEnvironment = WEAKMAP_SUPPORTED
-  ? new WeakMap()
-  : new Map();
+  ? new WeakMap<IEnvironment, Map<string, PendingQueryEntry>>()
+  : new Map<IEnvironment, Map<string, PendingQueryEntry>>();
 
 type PendingQueryEntry =
   | $ReadOnly<{
@@ -92,7 +91,7 @@ function preloadQuery<TQuery: OperationType, TEnvironmentProviderOptions>(
   );
   const source =
     queryEntry.kind === 'network'
-      ? Observable.create(sink => {
+      ? Observable.create<GraphQLResponse>(sink => {
           let subscription;
           if (pendingQueries.get(queryEntry.cacheKey) == null) {
             const newQueryEntry = preloadQueryDeduped(
@@ -205,7 +204,7 @@ 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 subject = new ReplaySubject();
+    const subject = new ReplaySubject<GraphQLResponse>();
     nextQueryEntry = {
       cacheKey,
       fetchKey,

package/relay-hooks/prepareEntryPoint_DEPRECATED.js.flow

@@ -4,13 +4,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
-
+import type {OperationType} from '../../relay-runtime/util/RelayRuntimeTypes';
 import type {
   EntryPoint,
   EntryPointComponent,
@@ -40,6 +40,7 @@ function prepareEntryPoint<
 ): void {
   // Start loading the code for the entrypoint
   if (entryPoint.root.getModuleIfRequired() == null) {
+    // $FlowFixMe[unused-promise]
     entryPoint.root.load();
   }
   const preloadProps = entryPoint.getPreloadProps(entryPointParams);
@@ -56,7 +57,7 @@ function prepareEntryPoint<
         environmentProviderOptions,
       );
 
-      preloadedQueries[queryPropName] = preloadQuery(
+      preloadedQueries[queryPropName] = preloadQuery<OperationType, mixed>(
         environment,
         parameters,
         variables,
@@ -75,11 +76,15 @@ function prepareEntryPoint<
       }
       const {entryPoint: nestedEntryPoint, entryPointParams: nestedParams} =
         entryPointDescription;
-      preloadedEntryPoints[entryPointPropName] = prepareEntryPoint(
-        environmentProvider,
-        nestedEntryPoint,
-        nestedParams,
-      );
+      preloadedEntryPoints[entryPointPropName] = prepareEntryPoint<
+        TEntryPointParams,
+        TPreloadedQueries,
+        TPreloadedEntryPoints,
+        TRuntimeProps,
+        TExtraProps,
+        TEntryPointComponent,
+        TEntryPoint,
+      >(environmentProvider, nestedEntryPoint, nestedParams);
     });
   }
 }

package/relay-hooks/react-cache/RelayReactCache.js.flow

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @flow strict-local
- * @emails oncall+relay
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/relay-hooks/react-cache/getQueryResultOrFetchQuery_REACT_CACHE.js.flow

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @flow strict-local
- * @emails oncall+relay
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -25,8 +25,8 @@ const SuspenseResource = require('../SuspenseResource');
 const {getCacheForType, getCacheSignal} = require('./RelayReactCache');
 const invariant = require('invariant');
 const {
-  RelayFeatureFlags,
   __internal: {fetchQuery: fetchQueryInternal},
+  RelayFeatureFlags,
 } = require('relay-runtime');
 const warning = require('warning');
 
@@ -127,7 +127,7 @@ const noopOnCommit = () => {
   return () => undefined;
 };
 
-const noopPromise = new Promise(() => {});
+const noopPromise = new Promise<void>(() => {});
 
 function getQueryCacheKey(
   operation: OperationDescriptor,
@@ -375,7 +375,7 @@ function executeOperationAndKeepUpToDate(
   customFetchObservable?: Observable<GraphQLResponse>,
 ) {
   let resolvePromise;
-  const promise = new Promise(r => {
+  const promise = new Promise<void>(r => {
     resolvePromise = r;
   });
   // $FlowExpectedError[prop-missing] Expando to annotate Promises.

package/relay-hooks/react-cache/readFragmentInternal_REACT_CACHE.js.flow

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @flow strict-local
- * @emails oncall+relay
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -64,7 +64,7 @@ function getMissingClientEdges(
   } else if (state.kind === 'singular') {
     return state.snapshot.missingClientEdges ?? null;
   } else {
-    let edges = null;
+    let edges: null | Array<MissingClientEdgeRequestInfo> = null;
     for (const snapshot of state.snapshots) {
       if (snapshot.missingClientEdges) {
         edges = edges ?? [];
@@ -223,7 +223,7 @@ function readFragmentInternal_REACT_CACHE(
   if (fragmentNode.metadata?.hasClientEdges === true) {
     const missingClientEdges = getMissingClientEdges(state);
     if (missingClientEdges?.length) {
-      clientEdgeQueries = [];
+      clientEdgeQueries = ([]: Array<QueryResult>);
       for (const edge of missingClientEdges) {
         clientEdgeQueries.push(
           handleMissingClientEdge(

package/relay-hooks/react-cache/useFragmentInternal_REACT_CACHE.js.flow

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @flow strict-local
- * @emails oncall+relay
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -73,7 +73,7 @@ function getMissingClientEdges(
   } else if (state.kind === 'singular') {
     return state.snapshot.missingClientEdges ?? null;
   } else {
-    let edges = null;
+    let edges: null | Array<MissingClientEdgeRequestInfo> = null;
     for (const snapshot of state.snapshots) {
       if (snapshot.missingClientEdges) {
         edges = edges ?? [];
@@ -94,7 +94,7 @@ function getSuspendingLiveResolver(
   } else if (state.kind === 'singular') {
     return state.snapshot.missingLiveResolverFields ?? null;
   } else {
-    let missingFields = null;
+    let missingFields: null | Array<MissingLiveResolverField> = null;
     for (const snapshot of state.snapshots) {
       if (snapshot.missingLiveResolverFields) {
         missingFields = missingFields ?? [];
@@ -438,7 +438,7 @@ function useFragmentInternal_REACT_CACHE(
       // eslint-disable-next-line no-shadow
       let clientEdgeQueries;
       if (missingClientEdges?.length) {
-        clientEdgeQueries = [];
+        clientEdgeQueries = ([]: Array<QueryResult>);
         for (const edge of missingClientEdges) {
           clientEdgeQueries.push(
             handleMissingClientEdge(

package/relay-hooks/react-cache/useFragment_REACT_CACHE.js.flow

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/relay-hooks/react-cache/useLazyLoadQuery_REACT_CACHE.js.flow

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @flow strict-local
- * @emails oncall+relay
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/relay-hooks/react-cache/usePaginationFragment_REACT_CACHE.js.flow

@@ -4,14 +4,15 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
 
 import type {LoadMoreFn, UseLoadMoreFunctionArgs} from '../useLoadMoreFunction';
+import type {Options} from './useRefetchableFragmentInternal_REACT_CACHE';
 import type {RefetchFnDynamic} from './useRefetchableFragmentInternal_REACT_CACHE';
 import type {
   FragmentType,
@@ -19,9 +20,12 @@ import type {
   GraphQLTaggedNode,
   Observer,
   OperationType,
+  Variables,
 } from 'relay-runtime';
+import type {VariablesOf} from 'relay-runtime/util/RelayRuntimeTypes';
 
 const useLoadMoreFunction = require('../useLoadMoreFunction');
+const useRelayEnvironment = require('../useRelayEnvironment');
 const useStaticFragmentNodeWarning = require('../useStaticFragmentNodeWarning');
 const useRefetchableFragmentInternal = require('./useRefetchableFragmentInternal_REACT_CACHE');
 const {useCallback, useDebugValue, useState} = require('react');
@@ -33,8 +37,8 @@ const {
 
 export type ReturnType<TQuery: OperationType, TKey, TFragmentData> = {
   data: TFragmentData,
-  loadNext: LoadMoreFn<TQuery>,
-  loadPrevious: LoadMoreFn<TQuery>,
+  loadNext: LoadMoreFn<TQuery['variables']>,
+  loadPrevious: LoadMoreFn<TQuery['variables']>,
   hasNext: boolean,
   hasPrevious: boolean,
   isLoadingNext: boolean,
@@ -83,7 +87,7 @@ function usePaginationFragment<
 
   // Backward pagination
   const [loadPrevious, hasPrevious, isLoadingPrevious, disposeFetchPrevious] =
-    useLoadMore<TQuery>({
+    useLoadMore<TQuery['variables']>({
       componentDisplayName,
       connectionPathInFragmentData,
       direction: 'backward',
@@ -97,22 +101,23 @@ function usePaginationFragment<
     });
 
   // Forward pagination
-  const [loadNext, hasNext, isLoadingNext, disposeFetchNext] =
-    useLoadMore<TQuery>({
-      componentDisplayName,
-      connectionPathInFragmentData,
-      direction: 'forward',
-      fragmentData,
-      fragmentIdentifier,
-      fragmentNode,
-      fragmentRef,
-      identifierField,
-      paginationMetadata,
-      paginationRequest,
-    });
+  const [loadNext, hasNext, isLoadingNext, disposeFetchNext] = useLoadMore<
+    TQuery['variables'],
+  >({
+    componentDisplayName,
+    connectionPathInFragmentData,
+    direction: 'forward',
+    fragmentData,
+    fragmentIdentifier,
+    fragmentNode,
+    fragmentRef,
+    identifierField,
+    paginationMetadata,
+    paginationRequest,
+  });
 
   const refetchPagination: RefetchFnDynamic<TQuery, TKey> = useCallback(
-    (variables, options) => {
+    (variables: VariablesOf<TQuery>, options: void | Options) => {
       disposeFetchNext();
       disposeFetchPrevious();
       return refetch(variables, {...options, __environment: undefined});
@@ -143,7 +148,7 @@ function usePaginationFragment<
   };
 }
 
-function useLoadMore<TQuery: OperationType>(
+function useLoadMore<TVariables: Variables>(
   args: $Diff<
     UseLoadMoreFunctionArgs,
     {
@@ -152,15 +157,29 @@ function useLoadMore<TQuery: OperationType>(
       ...
     },
   >,
-): [LoadMoreFn<TQuery>, boolean, boolean, () => void] {
-  const [isLoadingMore, setIsLoadingMore] = useState(false);
+): [LoadMoreFn<TVariables>, boolean, boolean, () => void] {
+  const environment = useRelayEnvironment();
+  const [isLoadingMore, reallySetIsLoadingMore] = useState(false);
+  // Schedule this update since it must be observed by components at the same
+  // batch as when hasNext changes. hasNext is read from the store and store
+  // updates are scheduled, so this must be scheduled too.
+  const setIsLoadingMore = (value: boolean) => {
+    const schedule = environment.getScheduler()?.schedule;
+    if (schedule) {
+      schedule(() => {
+        reallySetIsLoadingMore(value);
+      });
+    } else {
+      reallySetIsLoadingMore(value);
+    }
+  };
   const observer = {
     start: () => setIsLoadingMore(true),
     complete: () => setIsLoadingMore(false),
     error: () => setIsLoadingMore(false),
   };
   const handleReset = () => setIsLoadingMore(false);
-  const [loadMore, hasMore, disposeFetch] = useLoadMoreFunction({
+  const [loadMore, hasMore, disposeFetch] = useLoadMoreFunction<TVariables>({
     ...args,
     observer,
     onReset: handleReset,

package/relay-hooks/react-cache/usePreloadedQuery_REACT_CACHE.js.flow

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @flow strict-local
- * @emails oncall+relay
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -122,7 +122,6 @@ function usePreloadedQuery_REACT_CACHE<TQuery: OperationType>(
 
   // Read the query's root fragment -- this may suspend.
   const {fragmentNode, fragmentRef} = queryResult;
-  // $FlowExpectedError[incompatible-return] Is this a fixable incompatible-return?
   const data = useFragmentInternal(
     fragmentNode,
     fragmentRef,

package/relay-hooks/react-cache/useRefetchableFragmentInternal_REACT_CACHE.js.flow

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -98,7 +98,7 @@ type RefetchFnExact<TQuery: OperationType, TOptions = Options> = RefetchFnBase<
 type RefetchFnInexact<
   TQuery: OperationType,
   TOptions = Options,
-> = RefetchFnBase<$Shape<VariablesOf<TQuery>>, TOptions>;
+> = RefetchFnBase<Partial<VariablesOf<TQuery>>, TOptions>;
 
 type Action =
   | {
@@ -204,8 +204,11 @@ function useRefetchableFragmentNode<
   const shouldReset =
     environment !== mirroredEnvironment ||
     fragmentIdentifier !== mirroredFragmentIdentifier;
-  const [queryRef, loadQuery, disposeQuery] =
-    useQueryLoader<TQuery>(refetchableRequest);
+  const [queryRef, loadQuery, disposeQuery] = useQueryLoader<
+    TQuery['variables'],
+    TQuery['response'],
+    TQuery['rawResponse'],
+  >((refetchableRequest: $FlowFixMe));
 
   let fragmentRef = parentFragmentRef;
   if (shouldReset) {
@@ -387,7 +390,10 @@ function useRefetchFunction<TQuery: OperationType>(
       ? fragmentData[identifierField]
       : null;
   return useCallback(
-    (providedRefetchVariables, options) => {
+    (
+      providedRefetchVariables: VariablesOf<TQuery>,
+      options: void | InternalOptions,
+    ) => {
       // Bail out and warn if we're trying to refetch after the component
       // has unmounted
       if (isMountedRef.current !== true) {

package/relay-hooks/react-cache/useRefetchableFragment_REACT_CACHE.js.flow

@@ -4,9 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails oncall+relay
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -18,8 +18,8 @@ import type {
   OperationType,
 } from 'relay-runtime';
 
-const useRefetchableFragmentInternal = require('./useRefetchableFragmentInternal_REACT_CACHE');
 const useStaticFragmentNodeWarning = require('../useStaticFragmentNodeWarning');
+const useRefetchableFragmentInternal = require('./useRefetchableFragmentInternal_REACT_CACHE');
 const {useDebugValue} = require('react');
 const {getFragment} = require('relay-runtime');