react-relay 14.0.0 → 15.0.0

package/ReactRelayContainerUtils.js.flow

@@ -6,10 +6,9 @@
  *
  * @flow
  * @format
+ * @oncall relay
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 function getComponentName(component: React$ComponentType<any>): string {

package/ReactRelayContext.js

@@ -1,5 +1,5 @@
 /**
- * Relay v14.0.0
+ * Relay v15.0.0
  *
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *

package/ReactRelayContext.js.flow

@@ -6,10 +6,9 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 import type {RelayContext} from 'relay-runtime/store/RelayStoreTypes';
 

package/ReactRelayFragmentContainer.js.flow

@@ -6,12 +6,11 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
-import type {GeneratedNodeMap, RelayProp, $RelayProps} from './ReactRelayTypes';
+import type {$RelayProps, GeneratedNodeMap, RelayProp} from './ReactRelayTypes';
 import type {
   FragmentMap,
   FragmentSpecResolver,
@@ -57,6 +56,7 @@ function createContainerWithFragments<
   const containerName = getContainerName(Component);
 
   return class extends React.Component<ContainerProps, ContainerState> {
+    // $FlowFixMe[missing-local-annot]
     static displayName = containerName;
     constructor(props: $FlowFixMe) {
       super(props);
@@ -90,7 +90,7 @@ function createContainerWithFragments<
     static getDerivedStateFromProps(
       nextProps: ContainerProps,
       prevState: ContainerState,
-    ): $Shape<ContainerState> | null {
+    ): Partial<ContainerState> | null {
       // Any props change could impact the query, so we mirror props in state.
       // This is an unusual pattern, but necessary for this container usecase.
       const {prevProps} = prevState;
@@ -237,7 +237,9 @@ function createContainerWithFragments<
       }
     }
 
+    // $FlowFixMe[missing-local-annot]
     render() {
+      // eslint-disable-next-line no-unused-vars
       const {componentRef, __relayContext, __rootIsQueryRenderer, ...props} =
         this.props;
       return React.createElement(Component, {

package/ReactRelayFragmentMockRenderer.js.flow

@@ -6,10 +6,9 @@
  *
  * @flow
  * @format
+ * @oncall relay
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 const ReactRelayContext = require('./ReactRelayContext');

package/ReactRelayLocalQueryRenderer.js.flow

@@ -6,14 +6,14 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {ReactRelayQueryRendererContext as ReactRelayQueryRendererContextType} from './ReactRelayQueryRendererContext';
 import type {GraphQLTaggedNode, IEnvironment, Variables} from 'relay-runtime';
+import type {SelectorData} from 'relay-runtime/store/RelayStoreTypes';
 
 const ReactRelayContext = require('./ReactRelayContext');
 const ReactRelayQueryRendererContext = require('./ReactRelayQueryRendererContext');
@@ -63,9 +63,9 @@ function ReactRelayLocalQueryRenderer(props: Props): React.Node {
 
   // Use a ref to prevent rendering twice when data changes
   // because of props change
-  const dataRef = useRef(null);
-  const [, forceUpdate] = useState(null);
-  const cleanupFnRef = useRef(null);
+  const dataRef = useRef<?SelectorData>(null);
+  const [, forceUpdate] = useState<?SelectorData>(null);
+  const cleanupFnRef = useRef<null | (() => void)>(null);
 
   const snapshot = useMemo(() => {
     environment.check(operation);

package/ReactRelayPaginationContainer.js.flow

@@ -6,18 +6,18 @@
  *
  * @flow
  * @format
+ * @oncall relay
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
+import type {Sink} from '../relay-runtime/network/RelayObservable';
 import type {
+  $RelayProps,
   GeneratedNodeMap,
   ObserverOrCallback,
   RefetchOptions,
   RelayPaginationProp,
-  $RelayProps,
 } from './ReactRelayTypes';
 import type {
   CacheConfig,
@@ -256,9 +256,9 @@ function createGetFragmentVariables(
     'ReactRelayPaginationContainer: Unable to synthesize a ' +
       'getFragmentVariables function.',
   );
-  return (prevVars: Variables, totalCount: number) => ({
+  return (prevVars: Variables, totalCount: number): Variables => ({
     ...prevVars,
-    [countVariable]: totalCount,
+    [(countVariable: string)]: totalCount,
   });
 }
 
@@ -348,6 +348,7 @@ function createContainerWithFragments<
     createGetFragmentVariables(metadata);
 
   return class extends React.Component<$FlowFixMeProps, ContainerState> {
+    // $FlowFixMe[missing-local-annot]
     static displayName = containerName;
 
     _isARequestInFlight: boolean;
@@ -566,6 +567,7 @@ function createContainerWithFragments<
       ...
     } {
       // Extract connection data and verify there are more edges to fetch
+      // eslint-disable-next-line no-unused-vars
       const {componentRef: _, ...restProps} = this.props;
       const props = {
         ...restProps,
@@ -696,7 +698,7 @@ function createContainerWithFragments<
       const observer = toObserver(observerOrCallback);
       const connectionData = this._getConnectionData();
       if (!connectionData) {
-        Observable.create(sink => sink.complete()).subscribe(observer);
+        Observable.create<empty>(sink => sink.complete()).subscribe(observer);
         return null;
       }
       const totalCount = connectionData.edgeCount + pageSize;
@@ -757,8 +759,11 @@ function createContainerWithFragments<
     ): Subscription {
       const {environment} = assertRelayContext(this.props.__relayContext);
       const {
+        // eslint-disable-next-line no-unused-vars
         componentRef: _,
+        // eslint-disable-next-line no-unused-vars
         __relayContext,
+        // eslint-disable-next-line no-unused-vars
         __rootIsQueryRenderer,
         ...restProps
       } = this.props;
@@ -766,7 +771,7 @@ function createContainerWithFragments<
         ...restProps,
         ...this.state.data,
       };
-      let fragmentVariables;
+      let fragmentVariables: Variables;
       const rootVariables = getRootVariablesForFragments(fragments, restProps);
       fragmentVariables = getVariablesFromObject(fragments, restProps);
       fragmentVariables = {
@@ -774,7 +779,7 @@ function createContainerWithFragments<
         ...fragmentVariables,
         ...this._refetchVariables,
       };
-      let fetchVariables = connectionConfig.getVariables(
+      let fetchVariables: Variables = connectionConfig.getVariables(
         props,
         {
           count: paginatingVariables.count,
@@ -789,14 +794,14 @@ function createContainerWithFragments<
         fetchVariables,
         componentName,
       );
-      fetchVariables = {
+      fetchVariables = ({
         ...fetchVariables,
         ...this._refetchVariables,
-      };
-      fragmentVariables = {
+      }: Variables);
+      fragmentVariables = ({
         ...fetchVariables,
         ...fragmentVariables,
-      };
+      }: Variables);
 
       const cacheConfig: ?CacheConfig = options
         ? {force: !!options.force}
@@ -867,8 +872,8 @@ function createContainerWithFragments<
           operation,
           preservePreviousReferences: true,
         })
-        .mergeMap(payload =>
-          Observable.create(sink => {
+        .mergeMap<void>(payload =>
+          Observable.create<void>((sink: Sink<void>) => {
             onNext(payload, () => {
               sink.next(); // pass void to public observer's `next`
               sink.complete();
@@ -904,7 +909,9 @@ function createContainerWithFragments<
       }
     }
 
+    // $FlowFixMe[missing-local-annot]
     render() {
+      // eslint-disable-next-line no-unused-vars
       const {componentRef, __relayContext, __rootIsQueryRenderer, ...props} =
         this.props;
       return (

package/ReactRelayQueryFetcher.js.flow

@@ -6,10 +6,9 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {
@@ -35,26 +34,26 @@ type OnDataChange = ({
 }) => void;
 
 /** The external API of 'fetch' **/
-export type FetchOptions = {|
+export type FetchOptions = {
   environment: IEnvironment,
   onDataChange?: null | OnDataChange,
   operation: OperationDescriptor,
-|};
+};
 
 // Internally we keep an array of onDataChange callbacks, to support reusing
 // the queryRenderer for multiple components.
-type FetchOptionsInternal = {|
+type FetchOptionsInternal = {
   environment: IEnvironment,
   onDataChangeCallbacks: Array<OnDataChange>,
   operation: OperationDescriptor,
-|};
+};
 
-export type ExecuteConfig = {|
+export type ExecuteConfig = {
   environment: IEnvironment,
   operation: OperationDescriptor,
   // Allows pagination container to retain results from previous queries
   preservePreviousReferences?: boolean,
-|};
+};
 
 class ReactRelayQueryFetcher {
   _fetchOptions: ?FetchOptionsInternal;
@@ -64,7 +63,7 @@ class ReactRelayQueryFetcher {
   _snapshot: ?Snapshot; // results of the root fragment;
   _error: ?Error; // fetch error
   _cacheSelectionReference: ?Disposable;
-  _callOnDataChangeWhenSet: boolean = false;
+  _didFetchFinish: boolean = false;
 
   constructor(args?: {
     cacheSelectionReference: ?Disposable,
@@ -77,10 +76,10 @@ class ReactRelayQueryFetcher {
     }
   }
 
-  getSelectionReferences(): {|
+  getSelectionReferences(): {
     cacheSelectionReference: ?Disposable,
     selectionReferences: Array<Disposable>,
-  |} {
+  } {
     return {
       cacheSelectionReference: this._cacheSelectionReference,
       selectionReferences: this._selectionReferences,
@@ -104,6 +103,19 @@ class ReactRelayQueryFetcher {
     return null;
   }
 
+  getFetchResult(): ?{error?: Error, snapshot?: Snapshot} {
+    if (this._didFetchFinish) {
+      // We don't reset '_didFetchFinish' because another callback may be set
+      if (this._error != null) {
+        return {error: this._error};
+      } else if (this._snapshot != null) {
+        return {snapshot: this._snapshot};
+      }
+    } else {
+      return null;
+    }
+  }
+
   execute({
     environment,
     operation,
@@ -153,8 +165,8 @@ class ReactRelayQueryFetcher {
         this._fetchOptions.onDataChangeCallbacks || [];
       this._fetchOptions.onDataChangeCallbacks.push(onDataChange);
 
-      if (this._callOnDataChangeWhenSet) {
-        // We don't reset '_callOnDataChangeWhenSet' because another callback may be set
+      if (this._didFetchFinish) {
+        // We don't reset '_didFetchFinish' because another callback may be set
         if (this._error != null) {
           onDataChange({error: this._error});
         } else if (this._snapshot != null) {
@@ -217,7 +229,7 @@ class ReactRelayQueryFetcher {
         next: () => {
           // If we received a response,
           // Make a note that to notify the callback when it's later added.
-          this._callOnDataChangeWhenSet = true;
+          this._didFetchFinish = true;
           this._error = null;
 
           // Only notify of the first result if `next` is being called **asynchronously**
@@ -227,7 +239,7 @@ class ReactRelayQueryFetcher {
         error: err => {
           // If we received a response when we didn't have a change callback,
           // Make a note that to notify the callback when it's later added.
-          this._callOnDataChangeWhenSet = true;
+          this._didFetchFinish = true;
           this._error = err;
           this._snapshot = null;
 
@@ -321,7 +333,7 @@ class ReactRelayQueryFetcher {
   }: {
     notifyFirstResult: boolean,
     ...
-  }) {
+  }): void {
     invariant(
       this._fetchOptions,
       'ReactRelayQueryFetcher: `_onQueryDataAvailable` should have been called after having called `fetch`',

package/ReactRelayQueryRenderer.js.flow

@@ -6,10 +6,9 @@
  *
  * @flow
  * @format
+ * @oncall relay
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {ReactRelayQueryRendererContext as ReactRelayQueryRendererContextType} from './ReactRelayQueryRendererContext';
@@ -28,13 +27,14 @@ const ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
 const ReactRelayQueryRendererContext = require('./ReactRelayQueryRendererContext');
 const areEqual = require('areEqual');
 const React = require('react');
+const {RelayFeatureFlags} = require('relay-runtime');
 const {
   createOperationDescriptor,
   deepFreeze,
   getRequest,
 } = require('relay-runtime');
 
-type RetryCallbacks = {|
+type RetryCallbacks = {
   handleDataChange:
     | null
     | (({
@@ -43,39 +43,39 @@ type RetryCallbacks = {|
         ...
       }) => void),
   handleRetryAfterError: null | ((error: Error) => void),
-|};
+};
 
-export type RenderProps<T> = {|
+export type RenderProps<T> = {
   error: ?Error,
   props: ?T,
   retry: ?(cacheConfigOverride?: CacheConfig) => void,
-|};
+};
 /**
  * React may double-fire the constructor, and we call 'fetch' in the
  * constructor. If a request is already in flight from a previous call to the
  * constructor, just reuse the query fetcher and wait for the response.
  */
 const requestCache: {
-  [string]: void | {|
+  [string]: void | {
     queryFetcher: ReactRelayQueryFetcher,
     snapshot: ?Snapshot,
-  |},
+  },
 } = {};
 
 const queryRendererContext: ReactRelayQueryRendererContextType = {
   rootIsQueryRenderer: true,
 };
 
-export type Props = {|
+export type Props = {
   cacheConfig?: ?CacheConfig,
   fetchPolicy?: 'store-and-network' | 'network-only',
   environment: IEnvironment,
   query: ?GraphQLTaggedNode,
   render: (renderProps: RenderProps<Object>) => React.Node,
   variables: Variables,
-|};
+};
 
-type State = {|
+type State = {
   error: Error | null,
   prevPropsEnvironment: IEnvironment,
   prevPropsVariables: Variables,
@@ -86,7 +86,7 @@ type State = {|
   retryCallbacks: RetryCallbacks,
   requestCacheKey: ?string,
   snapshot: Snapshot | null,
-|};
+};
 
 /**
  * @public
@@ -171,7 +171,36 @@ class ReactRelayQueryRenderer extends React.Component<Props, State> {
       this._maybeHiddenOrFastRefresh = false;
       // eslint-disable-next-line react/no-did-mount-set-state
       this.setState(prevState => {
-        return resetQueryStateForUpdate(this.props, prevState);
+        const newState = resetQueryStateForUpdate(this.props, prevState);
+        const {requestCacheKey, queryFetcher} = newState;
+        if (requestCacheKey != null && requestCache[requestCacheKey] != null) {
+          if (RelayFeatureFlags.ENABLE_QUERY_RENDERER_SET_STATE_PREVENTION) {
+            const fetchResult = queryFetcher.getFetchResult();
+            if (fetchResult != null) {
+              const snapshot = fetchResult.snapshot ?? null;
+              const error = fetchResult.error ?? null;
+
+              const {requestCacheKey: prevRequestCacheKey} = prevState;
+              if (prevRequestCacheKey != null) {
+                delete requestCache[prevRequestCacheKey];
+              }
+
+              newState.renderProps = getRenderProps(
+                error,
+                snapshot,
+                queryFetcher,
+                prevState.retryCallbacks,
+              );
+              newState.snapshot = snapshot;
+              newState.requestCacheKey = null;
+            } else {
+              queryFetcher.setOnDataChange(this._handleDataChange);
+            }
+          } else {
+            queryFetcher.setOnDataChange(this._handleDataChange);
+          }
+        }
+        return newState;
       });
       return;
     }

package/ReactRelayQueryRendererContext.js.flow

@@ -6,14 +6,13 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 const React = require('react');
 
-export type ReactRelayQueryRendererContext = {|rootIsQueryRenderer: boolean|};
+export type ReactRelayQueryRendererContext = {rootIsQueryRenderer: boolean};
 
 module.exports = (React.createContext({
   rootIsQueryRenderer: false,

package/ReactRelayRefetchContainer.js.flow

@@ -6,18 +6,17 @@
  *
  * @flow
  * @format
+ * @oncall relay
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {
+  $RelayProps,
   GeneratedNodeMap,
   ObserverOrCallback,
   RefetchOptions,
   RelayRefetchProp,
-  $RelayProps,
 } from './ReactRelayTypes';
 import type {
   CacheConfig,
@@ -81,6 +80,7 @@ function createContainerWithFragments<
   const containerName = getContainerName(Component);
 
   return class extends React.Component<ContainerProps, ContainerState> {
+    // $FlowFixMe[missing-local-annot]
     static displayName = containerName;
 
     _refetchSubscription: ?Subscription;
@@ -144,7 +144,7 @@ function createContainerWithFragments<
     static getDerivedStateFromProps(
       nextProps: ContainerProps,
       prevState: ContainerState,
-    ): $Shape<ContainerState> | null {
+    ): Partial<ContainerState> | null {
       // Any props change could impact the query, so we mirror props in state.
       // This is an unusual pattern, but necessary for this container usecase.
       const {prevProps} = prevState;
@@ -364,16 +364,14 @@ function createContainerWithFragments<
       );
 
       // TODO: T26288752 find a better way
-      /* eslint-disable lint/react-state-props-mutation */
       this.state.localVariables = fetchVariables;
-      /* eslint-enable lint/react-state-props-mutation */
 
       // Cancel any previously running refetch.
       this._refetchSubscription && this._refetchSubscription.unsubscribe();
 
       // Declare refetchSubscription before assigning it in .start(), since
       // synchronous completion may call callbacks .subscribe() returns.
-      let refetchSubscription;
+      let refetchSubscription: Subscription;
 
       const storeSnapshot = this._getQueryFetcher().lookupInStore(
         environment,
@@ -409,12 +407,12 @@ function createContainerWithFragments<
           // TODO (T26430099): Cleanup old references
           preservePreviousReferences: true,
         })
-        .mergeMap(response => {
+        .mergeMap<void>(response => {
           this.state.resolver.setVariables(
             fragmentVariables,
             operation.request.node,
           );
-          return Observable.create(sink =>
+          return Observable.create<void>(sink =>
             this.setState(
               latestState => ({
                 data: latestState.resolver.resolve(),
@@ -451,7 +449,9 @@ function createContainerWithFragments<
       };
     };
 
+    // $FlowFixMe[missing-local-annot]
     render() {
+      // eslint-disable-next-line no-unused-vars
       const {componentRef, __relayContext, __rootIsQueryRenderer, ...props} =
         this.props;
       const {relayProp, contextForChildren} = this.state;

package/ReactRelayTestMocker.js.flow

@@ -6,15 +6,15 @@
  *
  * @flow
  * @format
+ * @oncall relay
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {
   CacheConfig,
   ConcreteRequest,
+  GraphQLResponse,
   GraphQLSingularResponse,
   IEnvironment,
   PayloadError,
@@ -147,7 +147,7 @@ class ReactRelayTestMocker {
     ) => {
       let resolve;
       let reject;
-      const promise = new Promise((res, rej) => {
+      const promise = new Promise<GraphQLResponse>((res, rej) => {
         resolve = res;
         reject = rej;
       });

package/ReactRelayTypes.js.flow

@@ -6,10 +6,9 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {
@@ -29,7 +28,7 @@ export type ObserverOrCallback = Observer<void> | ((error: ?Error) => mixed);
 // RelayRefetchProp to flow into a RelayProp.
 export type RelayProp = {+environment: IEnvironment, ...};
 
-export type RelayPaginationProp = {|
+export type RelayPaginationProp = {
   +environment: IEnvironment,
   +hasMore: () => boolean,
   +isLoading: () => boolean,
@@ -43,9 +42,9 @@ export type RelayPaginationProp = {|
     observerOrCallback: ?ObserverOrCallback,
     refetchVariables: ?Variables,
   ) => ?Disposable,
-|};
+};
 
-export type RelayRefetchProp = {|
+export type RelayRefetchProp = {
   +environment: IEnvironment,
   +refetch: (
     refetchVariables: Variables | ((fragmentVariables: Variables) => Variables),
@@ -53,13 +52,13 @@ export type RelayRefetchProp = {|
     observerOrCallback: ?ObserverOrCallback,
     options?: RefetchOptions,
   ) => Disposable,
-|};
+};
 
-export type RefetchOptions = {|
+export type RefetchOptions = {
   +force?: boolean,
   +fetchPolicy?: 'store-or-network' | 'network-only',
   +metadata?: {[key: string]: mixed, ...},
-|};
+};
 
 /**
  * A utility type which takes the type of a fragment's data (typically found in

package/RelayContext.js.flow

@@ -6,10 +6,9 @@
  *
  * @flow
  * @format
+ * @oncall relay
  */
 
-// flowlint ambiguous-object-type:error
-
 'use strict';
 
 import type {RelayContext} from 'relay-runtime';