react-relay 14.1.0 → 15.0.0

package/ReactRelayContainerUtils.js.flow

@@ -6,6 +6,7 @@
  *
  * @flow
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/ReactRelayContext.js

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

package/ReactRelayContext.js.flow

@@ -6,6 +6,7 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/ReactRelayFragmentContainer.js.flow

@@ -6,10 +6,11 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
-import type {GeneratedNodeMap, RelayProp, $RelayProps} from './ReactRelayTypes';
+import type {$RelayProps, GeneratedNodeMap, RelayProp} from './ReactRelayTypes';
 import type {
   FragmentMap,
   FragmentSpecResolver,
@@ -55,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);
@@ -88,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;
@@ -235,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,6 +6,7 @@
  *
  * @flow
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/ReactRelayLocalQueryRenderer.js.flow

@@ -6,12 +6,14 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 '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');
@@ -61,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,16 +6,18 @@
  *
  * @flow
  * @format
+ * @oncall relay
  */
 
 'use strict';
 
+import type {Sink} from '../relay-runtime/network/RelayObservable';
 import type {
+  $RelayProps,
   GeneratedNodeMap,
   ObserverOrCallback,
   RefetchOptions,
   RelayPaginationProp,
-  $RelayProps,
 } from './ReactRelayTypes';
 import type {
   CacheConfig,
@@ -254,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,
   });
 }
 
@@ -346,6 +348,7 @@ function createContainerWithFragments<
     createGetFragmentVariables(metadata);
 
   return class extends React.Component<$FlowFixMeProps, ContainerState> {
+    // $FlowFixMe[missing-local-annot]
     static displayName = containerName;
 
     _isARequestInFlight: boolean;
@@ -564,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,
@@ -694,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;
@@ -755,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;
@@ -764,7 +771,7 @@ function createContainerWithFragments<
         ...restProps,
         ...this.state.data,
       };
-      let fragmentVariables;
+      let fragmentVariables: Variables;
       const rootVariables = getRootVariablesForFragments(fragments, restProps);
       fragmentVariables = getVariablesFromObject(fragments, restProps);
       fragmentVariables = {
@@ -772,7 +779,7 @@ function createContainerWithFragments<
         ...fragmentVariables,
         ...this._refetchVariables,
       };
-      let fetchVariables = connectionConfig.getVariables(
+      let fetchVariables: Variables = connectionConfig.getVariables(
         props,
         {
           count: paginatingVariables.count,
@@ -787,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}
@@ -865,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();
@@ -902,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,6 +6,7 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -62,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,
@@ -102,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,
@@ -151,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) {
@@ -215,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**
@@ -225,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;
 

package/ReactRelayQueryRenderer.js.flow

@@ -6,6 +6,7 @@
  *
  * @flow
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -26,6 +27,7 @@ const ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
 const ReactRelayQueryRendererContext = require('./ReactRelayQueryRendererContext');
 const areEqual = require('areEqual');
 const React = require('react');
+const {RelayFeatureFlags} = require('relay-runtime');
 const {
   createOperationDescriptor,
   deepFreeze,
@@ -169,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,6 +6,7 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/ReactRelayRefetchContainer.js.flow

@@ -6,16 +6,17 @@
  *
  * @flow
  * @format
+ * @oncall relay
  */
 
 'use strict';
 
 import type {
+  $RelayProps,
   GeneratedNodeMap,
   ObserverOrCallback,
   RefetchOptions,
   RelayRefetchProp,
-  $RelayProps,
 } from './ReactRelayTypes';
 import type {
   CacheConfig,
@@ -79,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;
@@ -142,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;
@@ -369,7 +371,7 @@ function createContainerWithFragments<
 
       // 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,
@@ -405,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(),
@@ -447,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,6 +6,7 @@
  *
  * @flow
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -13,6 +14,7 @@
 import type {
   CacheConfig,
   ConcreteRequest,
+  GraphQLResponse,
   GraphQLSingularResponse,
   IEnvironment,
   PayloadError,
@@ -145,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,6 +6,7 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/RelayContext.js.flow

@@ -6,6 +6,7 @@
  *
  * @flow
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/__flowtests__/ReactRelayFragmentContainer-flowtest.js.flow

@@ -6,6 +6,7 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';
@@ -139,7 +140,7 @@ module.exports = {
       render(): React.Element<typeof Bar> {
         return (
           <Bar
-            componentRef={ref => {
+            componentRef={(ref: empty) => {
               this._barRef = (ref: empty);
             }}
             requiredProp="bar"

package/__flowtests__/ReactRelayPaginationContainer-flowtest.js.flow

@@ -6,6 +6,7 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/__flowtests__/ReactRelayRefetchContainer-flowtest.js.flow

@@ -6,6 +6,7 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/__flowtests__/RelayModern-flowtest.js.flow

@@ -6,6 +6,7 @@
  *
  * @flow
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/__flowtests__/RelayModernFlowtest_badref.graphql.js.flow

@@ -6,6 +6,7 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/__flowtests__/RelayModernFlowtest_notref.graphql.js.flow

@@ -6,6 +6,7 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/__flowtests__/RelayModernFlowtest_user.graphql.js.flow

@@ -6,6 +6,7 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/__flowtests__/RelayModernFlowtest_users.graphql.js.flow

@@ -6,6 +6,7 @@
  *
  * @flow strict-local
  * @format
+ * @oncall relay
  */
 
 'use strict';

package/__flowtests__/__generated__/ReactRelayFragmentContainerFlowtest_viewer.graphql.js.flow

@@ -4,7 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<23bcef30afc22a42d79dd52e0cfe899c>>
+ * @oncall relay
+ *
+ * @generated SignedSource<<97ebbfa87de00690617b84f5dc0b3dd7>>
  * @flow
  * @lightSyntaxTransform
  * @nogrep

package/__flowtests__/__generated__/ReactRelayFragmentContainerFlowtest_viewer2.graphql.js.flow

@@ -4,7 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<af6c4570779066ea564051c9c71c494f>>
+ * @oncall relay
+ *
+ * @generated SignedSource<<493af2df808158f1c08ec6aafda2e783>>
  * @flow
  * @lightSyntaxTransform
  * @nogrep

package/__flowtests__/__generated__/ReactRelayPaginationContainerFlowtestQuery.graphql.js.flow

@@ -4,7 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<6d173a357c286b417fdc586a839384d4>>
+ * @oncall relay
+ *
+ * @generated SignedSource<<073d1d174775daaac06d462623886192>>
  * @flow
  * @lightSyntaxTransform
  * @nogrep
@@ -16,7 +18,7 @@
 
 /*::
 import type { ConcreteRequest, Query } from 'relay-runtime';
-type ReactRelayPaginationContainerFlowtest_viewer$fragmentType = any;
+import type { ReactRelayPaginationContainerFlowtest_viewer$fragmentType } from "./ReactRelayPaginationContainerFlowtest_viewer.graphql";
 export type ReactRelayPaginationContainerFlowtestQuery$variables = {|
   count: number,
   cursor?: ?string,

package/__flowtests__/__generated__/ReactRelayPaginationContainerFlowtest_viewer.graphql.js.flow

@@ -4,7 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<b3cddee250d0ff22e89a7f0331e85df6>>
+ * @oncall relay
+ *
+ * @generated SignedSource<<03cbc84be1e0fb9c3986ea29a3e335db>>
  * @flow
  * @lightSyntaxTransform
  * @nogrep

package/__flowtests__/__generated__/ReactRelayRefetchContainerFlowtestQuery.graphql.js.flow

@@ -4,7 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<3b1b16b5d5ec1c94783d6161ae61bc3d>>
+ * @oncall relay
+ *
+ * @generated SignedSource<<909036439f4d2e9e2d5728ade52035dc>>
  * @flow
  * @lightSyntaxTransform
  * @nogrep
@@ -16,7 +18,7 @@
 
 /*::
 import type { ConcreteRequest, Query } from 'relay-runtime';
-type ReactRelayRefetchContainerFlowtest_viewer$fragmentType = any;
+import type { ReactRelayRefetchContainerFlowtest_viewer$fragmentType } from "./ReactRelayRefetchContainerFlowtest_viewer.graphql";
 export type ReactRelayRefetchContainerFlowtestQuery$variables = {|
   count: number,
   cursor?: ?string,

package/__flowtests__/__generated__/ReactRelayRefetchContainerFlowtest_viewer.graphql.js.flow

@@ -4,7 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<6d04d7f7bf097d5869a1fdf0dea1e659>>
+ * @oncall relay
+ *
+ * @generated SignedSource<<6f9cebfabb127ad6db1de1705f8a9764>>
  * @flow
  * @lightSyntaxTransform
  * @nogrep

package/__flowtests__/__generated__/RelayModernFlowtest_badref.graphql.js.flow

@@ -4,7 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<d3c71cb965d8374d40fb30f3c5ae9fd4>>
+ * @oncall relay
+ *
+ * @generated SignedSource<<1d67fc8ab171aeb4c45cb1df2d036371>>
  * @flow
  * @lightSyntaxTransform
  * @nogrep
@@ -16,7 +18,7 @@
 
 /*::
 import type { Fragment, ReaderFragment } from 'relay-runtime';
-type RelayModernFlowtest_user$fragmentType = any;
+import type { RelayModernFlowtest_user$fragmentType } from "./RelayModernFlowtest_user.graphql";
 import type { FragmentType } from "relay-runtime";
 declare export opaque type RelayModernFlowtest_badref$fragmentType: FragmentType;
 export type RelayModernFlowtest_badref$data = {|