react-relay 14.1.0 → 16.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 v16.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';
@@ -26,11 +27,7 @@ const {
   isRelayModernEnvironment,
 } = require('relay-runtime');
 
-type OnDataChange = ({
-  error?: Error,
-  snapshot?: Snapshot,
-  ...
-}) => void;
+type OnDataChange = ({error?: Error, snapshot?: Snapshot, ...}) => void;
 
 /** The external API of 'fetch' **/
 export type FetchOptions = {
@@ -62,7 +59,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 +99,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 +161,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 +225,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 +235,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';
@@ -35,11 +36,7 @@ const {
 type RetryCallbacks = {
   handleDataChange:
     | null
-    | (({
-        error?: Error,
-        snapshot?: Snapshot,
-        ...
-      }) => void),
+    | (({error?: Error, snapshot?: Snapshot, ...}) => void),
   handleRetryAfterError: null | ((error: Error) => void),
 };
 
@@ -64,14 +61,14 @@ const queryRendererContext: ReactRelayQueryRendererContextType = {
   rootIsQueryRenderer: true,
 };
 
-export type Props = {
+export type Props = $ReadOnly<{
   cacheConfig?: ?CacheConfig,
   fetchPolicy?: 'store-and-network' | 'network-only',
   environment: IEnvironment,
   query: ?GraphQLTaggedNode,
   render: (renderProps: RenderProps<Object>) => React.Node,
   variables: Variables,
-};
+}>;
 
 type State = {
   error: Error | null,
@@ -129,6 +126,7 @@ class ReactRelayQueryRenderer extends React.Component<Props, State> {
 
     this._maybeHiddenOrFastRefresh = false;
 
+    // $FlowFixMe[incompatible-type]
     this.state = {
       prevPropsEnvironment: props.environment,
       prevPropsVariables: props.variables,
@@ -147,7 +145,7 @@ class ReactRelayQueryRenderer extends React.Component<Props, State> {
   static getDerivedStateFromProps(
     nextProps: Props,
     prevState: State,
-  ): $Shape<State> | null {
+  ): Partial<State> | null {
     if (
       prevState.prevQuery !== nextProps.query ||
       prevState.prevPropsEnvironment !== nextProps.environment ||
@@ -169,7 +167,13 @@ 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) {
+          // $FlowFixMe[incompatible-use]
+          queryFetcher.setOnDataChange(this._handleDataChange);
+        }
+        return newState;
       });
       return;
     }
@@ -335,7 +339,7 @@ function getRequestCacheKey(
 function resetQueryStateForUpdate(
   props: Props,
   prevState: State,
-): $Shape<State> {
+): Partial<State> {
   const {query} = props;
 
   const prevSelectionReferences =
@@ -372,7 +376,7 @@ function fetchQueryAndComputeStateFromProps(
   queryFetcher: ReactRelayQueryFetcher,
   retryCallbacks: RetryCallbacks,
   requestCacheKey: ?string,
-): $Shape<State> {
+): Partial<State> {
   const {environment, query, variables, cacheConfig} = props;
   const genericEnvironment = (environment: IEnvironment);
   if (query) {

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';
@@ -101,6 +102,7 @@ export type $FragmentRef<T> = {
  * `props.relay` and returns the props of the container.
  */
 // prettier-ignore
+// $FlowFixMe[extra-type-arg] xplat redux flow type error
 export type $RelayProps<Props, RelayPropT = RelayProp> = $ObjMap<
   $Diff<Props, { relay: RelayPropT | void, ... }>,
   & (<T: { +$fragmentType: empty, ... }>( T) =>  T)

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,