react-relay 20.1.1 → 21.0.0

package/ReactRelayContext.js

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

package/ReactRelayContext.js.flow

@@ -17,6 +17,6 @@ const {
   __internal: {createRelayContext},
 } = require('relay-runtime');
 
-module.exports = (createRelayContext(
+module.exports = createRelayContext(
   React,
-): React.Context<RelayContext | null>);
+) as React.Context<RelayContext | null>;

package/ReactRelayFragmentContainer.js.flow

@@ -31,7 +31,7 @@ const {
 
 type ContainerProps = $FlowFixMe;
 type ContainerState = {
-  data: {[key: string]: mixed, ...},
+  data: {[key: string]: unknown, ...},
   prevProps: ContainerProps,
   prevPropsContext: RelayContext,
   relayProp: RelayProp,
@@ -45,8 +45,8 @@ type ContainerState = {
  * updates.
  */
 function createContainerWithFragments<
-  Props: {...},
-  TComponent: component(...Props),
+  Props extends {...},
+  TComponent extends component(...Props),
 >(
   Component: TComponent,
   fragments: FragmentMap,
@@ -121,8 +121,8 @@ function createContainerWithFragments<
 
         return {
           data: resolver.resolve(),
-          prevPropsContext: relayContext,
           prevProps: nextProps,
+          prevPropsContext: relayContext,
           relayProp: getRelayProp(relayContext.environment),
           resolver,
         };
@@ -266,14 +266,13 @@ function getRelayProp(environment: IEnvironment) {
  * instance of the container constructed/rendered.
  */
 function createContainer<
-  Props: {...},
-  Ref,
-  TComponent: component(ref: Ref, ...Props),
+  Props extends {...},
+  TComponent extends component(...Props),
 >(
   Component: TComponent,
   fragmentSpec: GeneratedNodeMap,
-): component(ref: Ref, ...$RelayProps<Props, RelayProp>) {
-  // $FlowFixMe[incompatible-return]
+): component(...$RelayProps<Props, RelayProp>) {
+  // $FlowFixMe[incompatible-type]
   return buildReactRelayContainer(
     Component,
     fragmentSpec,

package/ReactRelayLocalQueryRenderer.js.flow

@@ -12,7 +12,12 @@
 'use strict';
 
 import type {ReactRelayQueryRendererContext as ReactRelayQueryRendererContextType} from './ReactRelayQueryRendererContext';
-import type {GraphQLTaggedNode, IEnvironment, Variables} from 'relay-runtime';
+import type {
+  GraphQLTaggedNode,
+  IEnvironment,
+  RelayContext,
+  Variables,
+} from 'relay-runtime';
 import type {SelectorData} from 'relay-runtime/store/RelayStoreTypes';
 
 const ReactRelayContext = require('./ReactRelayContext');
@@ -40,7 +45,7 @@ const queryRendererContext: ReactRelayQueryRendererContextType = {
   rootIsQueryRenderer: true,
 };
 
-hook useDeepCompare<T: {...}>(value: T): T {
+hook useDeepCompare<T extends {...}>(value: T): T {
   const latestValue = React.useRef(value);
   // $FlowFixMe[react-rule-unsafe-ref]
   if (!areEqual(latestValue.current, value)) {
@@ -62,7 +67,10 @@ function ReactRelayLocalQueryRenderer(props: Props): React.Node {
     return createOperationDescriptor(request, latestVariables);
   }, [query, latestVariables]);
 
-  const relayContext = useMemo(() => ({environment}), [environment]);
+  const relayContext = useMemo(
+    (): RelayContext => ({environment}),
+    [environment],
+  );
 
   // Use a ref to prevent rendering twice when data changes
   // because of props change

package/ReactRelayLoggingContext.js.flow

@@ -16,6 +16,6 @@ const {
   __internal: {createRelayLoggingContext},
 } = require('relay-runtime');
 
-module.exports = (createRelayLoggingContext(React): React.Context<
-  mixed | null,
->);
+module.exports = createRelayLoggingContext(React) as React.Context<
+  unknown | null,
+>;

package/ReactRelayPaginationContainer.js.flow

@@ -59,7 +59,7 @@ const {
 const warning = require('warning');
 
 type ContainerState = {
-  data: {[key: string]: mixed, ...},
+  data: {[key: string]: unknown, ...},
   relayProp: RelayPaginationProp,
   prevContext: RelayContext,
   contextForChildren: RelayContext,
@@ -91,7 +91,7 @@ export type ConnectionConfig = {
   ...
 };
 export type ConnectionData = {
-  +edges?: ?$ReadOnlyArray<any>,
+  +edges?: ?ReadonlyArray<any>,
   +pageInfo?: ?PageInfo,
   ...
 };
@@ -258,7 +258,7 @@ function createGetFragmentVariables(
   );
   return (prevVars: Variables, totalCount: number): Variables => ({
     ...prevVars,
-    [(countVariable: string)]: totalCount,
+    [countVariable as string]: totalCount,
   });
 }
 
@@ -272,7 +272,7 @@ function findConnectionMetadata(
   for (const fragmentName in fragments) {
     const fragment = fragments[fragmentName];
     const connectionMetadata: ?Array<ConnectionMetadata> = (fragment.metadata &&
-      fragment.metadata.connection: any);
+      fragment.metadata.connection) as any;
     // HACK: metadata is always set to `undefined` in classic. In modern, even
     // if empty, it is set to null (never undefined). We use that knowlege to
     // check if we're dealing with classic or modern
@@ -302,24 +302,24 @@ function findConnectionMetadata(
     !isRelayModern || foundConnectionMetadata !== null,
     'ReactRelayPaginationContainer: A @connection directive must be present.',
   );
-  return foundConnectionMetadata || ({}: any);
+  return foundConnectionMetadata || ({} as any);
 }
 
 function toObserver(observerOrCallback: ?ObserverOrCallback): Observer<void> {
   return typeof observerOrCallback === 'function'
     ? {
-        error: observerOrCallback,
         complete: observerOrCallback,
+        error: observerOrCallback,
         unsubscribe: (subscription: Subscription) => {
           typeof observerOrCallback === 'function' && observerOrCallback();
         },
       }
-    : observerOrCallback || ({}: any);
+    : observerOrCallback || ({} as any);
 }
 
 function createContainerWithFragments<
-  Props: {...},
-  TComponent: component(...Props),
+  Props extends {...},
+  TComponent extends component(...Props),
 >(
   Component: TComponent,
   fragments: FragmentMap,
@@ -386,9 +386,9 @@ function createContainerWithFragments<
         );
       }
       this.state = {
+        contextForChildren: relayContext,
         data: this._resolver.resolve(),
         prevContext: relayContext,
-        contextForChildren: relayContext,
         relayProp: this._buildRelayProp(relayContext),
         resolverGeneration: 0,
       };
@@ -463,8 +463,8 @@ function createContainerWithFragments<
           );
         }
         this.setState(prevState => ({
-          prevContext: relayContext,
           contextForChildren: relayContext,
+          prevContext: relayContext,
           relayProp: this._buildRelayProp(relayContext),
           resolverGeneration: prevState.resolverGeneration + 1,
         }));
@@ -499,6 +499,8 @@ function createContainerWithFragments<
       const keys = Object.keys(nextProps);
       for (let ii = 0; ii < keys.length; ii++) {
         const key = keys[ii];
+        /* $FlowFixMe[invalid-compare] Error discovered during Constant
+         * Condition roll out. See https://fburl.com/workplace/4oq3zi07. */
         if (key === '__relayContext') {
           if (
             nextState.prevContext.environment !==
@@ -520,11 +522,11 @@ function createContainerWithFragments<
 
     _buildRelayProp(relayContext: RelayContext): RelayPaginationProp {
       return {
+        environment: relayContext.environment,
         hasMore: this._hasMore,
         isLoading: this._isLoading,
         loadMore: this._loadMore,
         refetchConnection: this._refetchConnection,
-        environment: relayContext.environment,
       };
     }
 
@@ -717,7 +719,7 @@ function createContainerWithFragments<
       );
       const paginatingVariables = {
         count: pageSize,
-        cursor: cursor,
+        cursor,
         totalCount,
       };
       const fetch = this._fetchPage(paginatingVariables, observer, options);
@@ -750,12 +752,12 @@ function createContainerWithFragments<
     }
 
     _fetchPage(
-      paginatingVariables: {
+      paginatingVariables: Readonly<{
         count: number,
         cursor: ?string,
         totalCount: number,
         ...
-      },
+      }>,
       observer: Observer<void>,
       options: ?RefetchOptions,
     ): Subscription {
@@ -790,20 +792,22 @@ function createContainerWithFragments<
         fragmentVariables,
       );
       invariant(
+        /* $FlowFixMe[invalid-compare] Error discovered during Constant
+         * Condition roll out. See https://fburl.com/workplace/5whu3i34. */
         typeof fetchVariables === 'object' && fetchVariables !== null,
         'ReactRelayPaginationContainer: Expected `getVariables()` to ' +
           'return an object, got `%s` in `%s`.',
         fetchVariables,
         componentName,
       );
-      fetchVariables = ({
+      fetchVariables = {
         ...fetchVariables,
         ...this._refetchVariables,
-      }: Variables);
-      fragmentVariables = ({
+      } as Variables;
+      fragmentVariables = {
         ...fetchVariables,
         ...fragmentVariables,
-      }: Variables);
+      } as Variables;
 
       const cacheConfig: ?{...CacheConfig} = options
         ? {force: !!options.force}
@@ -825,7 +829,7 @@ function createContainerWithFragments<
       }
       this._hasFetched = true;
 
-      const onNext = (payload: mixed, complete: () => void) => {
+      const onNext = (payload: unknown, complete: () => void) => {
         const prevData = this._resolver.resolve();
         this._resolver.setVariables(
           getFragmentVariables(
@@ -848,10 +852,10 @@ function createContainerWithFragments<
         if (!areEqual(prevData, nextData)) {
           this.setState(
             {
-              data: nextData,
               contextForChildren: {
                 environment: this.props.__relayContext.environment,
               },
+              data: nextData,
             },
             complete,
           );
@@ -884,8 +888,8 @@ function createContainerWithFragments<
         )
         // use do instead of finally so that observer's `complete` fires after cleanup
         .do({
-          error: cleanup,
           complete: cleanup,
+          error: cleanup,
           unsubscribe: cleanup,
         })
         .subscribe(observer || {});
@@ -937,14 +941,17 @@ function createContainerWithFragments<
  * `fragmentSpec` is memoized once per environment, rather than once per
  * instance of the container constructed/rendered.
  */
-function createContainer<Props: {...}, TComponent: component(...Props)>(
+function createContainer<
+  Props extends {...},
+  TComponent extends component(...Props),
+>(
   Component: TComponent,
   fragmentSpec: GeneratedNodeMap,
   connectionConfig: ConnectionConfig,
 ): component(
   ...$RelayProps<React.ElementConfig<TComponent>, RelayPaginationProp>
 ) {
-  // $FlowFixMe[incompatible-return]
+  // $FlowFixMe[incompatible-type]
   return buildReactRelayContainer(
     Component,
     fragmentSpec,

package/ReactRelayQueryFetcher.js.flow

@@ -116,7 +116,7 @@ class ReactRelayQueryFetcher {
     environment,
     operation,
     preservePreviousReferences = false,
-  }: ExecuteConfig): Observable<mixed> {
+  }: ExecuteConfig): Observable<unknown> {
     const reference = environment.retain(operation);
     const error = () => {
       // We may have partially fulfilled the request, so let the next request

package/ReactRelayQueryRenderer.js.flow

@@ -61,7 +61,7 @@ const queryRendererContext: ReactRelayQueryRendererContextType = {
   rootIsQueryRenderer: true,
 };
 
-export type Props = $ReadOnly<{
+export type Props = Readonly<{
   cacheConfig?: ?CacheConfig,
   fetchPolicy?: 'store-and-network' | 'network-only',
   environment: IEnvironment,
@@ -105,7 +105,7 @@ class ReactRelayQueryRenderer extends React.Component<Props, State> {
     // "leak" them before mounting (since we would be unable to clean up). For
     // that reason, we define them as null initially and fill them in after
     // mounting to avoid leaking memory.
-    const retryCallbacks = {
+    const retryCallbacks: RetryCallbacks = {
       handleDataChange: null,
       handleRetryAfterError: null,
     };

package/ReactRelayQueryRendererContext.js.flow

@@ -14,6 +14,6 @@ const React = require('react');
 
 export type ReactRelayQueryRendererContext = {rootIsQueryRenderer: boolean};
 
-module.exports = (React.createContext({
+module.exports = React.createContext({
   rootIsQueryRenderer: false,
-}): React.Context<ReactRelayQueryRendererContext | null>);
+}) as React.Context<ReactRelayQueryRendererContext | null>;

package/ReactRelayRefetchContainer.js.flow

@@ -52,7 +52,7 @@ const warning = require('warning');
 type ContainerProps = $FlowFixMe;
 
 type ContainerState = {
-  data: {[key: string]: mixed, ...},
+  data: {[key: string]: unknown, ...},
   prevProps: ContainerProps,
   localVariables: ?Variables,
   prevPropsContext: RelayContext,
@@ -68,8 +68,8 @@ type ContainerState = {
  * updates.
  */
 function createContainerWithFragments<
-  Props: {...},
-  TComponent: component(...Props),
+  Props extends {...},
+  TComponent extends component(...Props),
 >(
   Component: TComponent,
   fragments: FragmentMap,
@@ -104,11 +104,11 @@ function createContainerWithFragments<
         rootIsQueryRenderer,
       );
       this.state = {
+        contextForChildren: relayContext,
         data: resolver.resolve(),
         localVariables: null,
         prevProps: props,
         prevPropsContext: relayContext,
-        contextForChildren: relayContext,
         relayProp: getRelayProp(relayContext.environment, this._refetch),
         resolver,
       };
@@ -146,7 +146,7 @@ function createContainerWithFragments<
       prevState: ContainerState,
     ): 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.
+      // This is an unusual pattern, but necessary for this container use case.
       const {prevProps} = prevState;
       const relayContext = assertRelayContext(nextProps.__relayContext);
       const rootIsQueryRenderer = nextProps.__rootIsQueryRenderer ?? false;
@@ -187,11 +187,11 @@ function createContainerWithFragments<
           rootIsQueryRenderer,
         );
         return {
+          contextForChildren: relayContext,
           data: resolver.resolve(),
           localVariables: null,
           prevProps: nextProps,
           prevPropsContext: relayContext,
-          contextForChildren: relayContext,
           relayProp: getRelayProp(
             relayContext.environment,
             prevState.relayProp.refetch,
@@ -349,12 +349,12 @@ function createContainerWithFragments<
       const observer =
         typeof observerOrCallback === 'function'
           ? {
-              // callback is not exectued on complete or unsubscribe
+              error: observerOrCallback,
+              // callback is not executed on complete or unsubscribe
               // for backward compatibility
               next: observerOrCallback,
-              error: observerOrCallback,
             }
-          : observerOrCallback || ({}: any);
+          : observerOrCallback || ({} as any);
 
       const query = getRequest(taggedNode);
       const operation = createOperationDescriptor(
@@ -385,10 +385,10 @@ function createContainerWithFragments<
         );
         this.setState(
           latestState => ({
-            data: latestState.resolver.resolve(),
             contextForChildren: {
               environment: this.props.__relayContext.environment,
             },
+            data: latestState.resolver.resolve(),
           }),
           () => {
             observer.next && observer.next();
@@ -415,10 +415,10 @@ function createContainerWithFragments<
           return Observable.create<void>(sink =>
             this.setState(
               latestState => ({
-                data: latestState.resolver.resolve(),
                 contextForChildren: {
                   environment: this.props.__relayContext.environment,
                 },
+                data: latestState.resolver.resolve(),
               }),
               () => {
                 sink.next();
@@ -429,7 +429,7 @@ function createContainerWithFragments<
         })
         .finally(() => {
           // Finalizing a refetch should only clear this._refetchSubscription
-          // if the finizing subscription is the most recent call.
+          // if the finalizing subscription is the most recent call.
           if (this._refetchSubscription === refetchSubscription) {
             this._refetchSubscription = null;
           }
@@ -486,14 +486,17 @@ function getRelayProp(
  * `fragmentSpec` is memoized once per environment, rather than once per
  * instance of the container constructed/rendered.
  */
-function createContainer<Props: {...}, TComponent: component(...Props)>(
+function createContainer<
+  Props extends {...},
+  TComponent extends component(...Props),
+>(
   Component: TComponent,
   fragmentSpec: GeneratedNodeMap,
   taggedNode: GraphQLTaggedNode,
 ): component(
   ...$RelayProps<React.ElementConfig<TComponent>, RelayRefetchProp>
 ) {
-  // $FlowFixMe[incompatible-return]
+  // $FlowFixMe[incompatible-type]
   return buildReactRelayContainer(
     Component,
     fragmentSpec,

package/ReactRelayTestMocker.js.flow

@@ -162,9 +162,9 @@ class ReactRelayTestMocker {
       }
 
       this._pendingFetches.push({
-        ident,
         cacheConfig,
-        deferred: {resolve, reject},
+        deferred: {reject, resolve},
+        ident,
         request,
         variables: strippedVars,
       });
@@ -199,16 +199,16 @@ class ReactRelayTestMocker {
       deferred.reject(payload.error);
     };
 
-    (env: any).mock = {
+    (env as any).mock = {
+      fetch,
       isLoading,
       rejectQuery,
       resolveRawQuery,
-      fetch,
     };
 
-    (env: any).hasMockedNetwork = true;
+    (env as any).hasMockedNetwork = true;
 
-    (env: any).__setNet(Network.create(fetch));
+    (env as any).__setNet(Network.create(fetch));
     return env;
   }
 
@@ -264,7 +264,7 @@ class ReactRelayTestMocker {
    */
   networkWrite(config: NetworkWriteConfig): void {
     invariant(
-      (this._environment: any).hasMockedNetwork,
+      (this._environment as any).hasMockedNetwork,
       'You cannot resolve queries without a mocked environment. Did you mean ' +
         'to use `writeDirect` instead?',
     );
@@ -315,16 +315,16 @@ class ReactRelayTestMocker {
     );
 
     const realPayload =
-      // $FlowFixMe[incompatible-call]
+      // $FlowFixMe[incompatible-type]
       typeof payload === 'function' ? payload(toResolve.variables) : payload;
 
     // if there are errors, reject the query
     if (realPayload.errors != null && realPayload.errors.length > 0) {
-      (this._environment: any).mock.rejectQuery(toResolve, {
+      (this._environment as any).mock.rejectQuery(toResolve, {
         error: realPayload.errors[0],
       });
     } else {
-      (this._environment: any).mock.resolveRawQuery(toResolve, realPayload);
+      (this._environment as any).mock.resolveRawQuery(toResolve, realPayload);
     }
   }
 }

package/ReactRelayTypes.js.flow

@@ -22,7 +22,7 @@ import type {
 
 export type GeneratedNodeMap = {[key: string]: GraphQLTaggedNode, ...};
 
-export type ObserverOrCallback = Observer<void> | ((error: ?Error) => mixed);
+export type ObserverOrCallback = Observer<void> | ((error: ?Error) => unknown);
 
 // NOTE: This is an inexact type in order to allow a RelayPaginationProp or
 // RelayRefetchProp to flow into a RelayProp.
@@ -57,7 +57,7 @@ export type RelayRefetchProp = {
 export type RefetchOptions = {
   +force?: boolean,
   +fetchPolicy?: 'store-or-network' | 'network-only',
-  +metadata?: {[key: string]: mixed, ...},
+  +metadata?: {[key: string]: unknown, ...},
 };
 
 /**
@@ -99,9 +99,9 @@ export type $FragmentRef<T> = {
 
 /* $FlowExpectedError[unclear-type]: Intentional so that it won't fail,
  * even if the type we want to exclude doesn't exist in Props */
-type LooseOmitRelayProps<Props, K: $Keys<any>> = Pick<
+type LooseOmitRelayProps<Props, K extends keyof any> = Pick<
   Props,
-  Exclude<$Keys<Props>, K>,
+  Exclude<keyof Props, K>,
 >;
 /**
  * A utility type that takes the Props of a component and the type of
@@ -121,44 +121,42 @@ type MapRelayProp<T> = [+t: T] extends [+t: {+$fragmentType: empty, ...}]
     : [+t: T] extends [+t: {+$fragmentType: FragmentType, ...}]
       ? $FragmentRef<T>
       : [+t: T] extends [+t: ?{+$fragmentType: FragmentType, ...}]
-        ? ?$FragmentRef<$NonMaybeType<T>>
+        ? ?$FragmentRef<NonNullable<T>>
         : [+t: T] extends [
-              +t: $ReadOnlyArray<
+              +t: ReadonlyArray<
                 infer V extends {+$fragmentType: FragmentType, ...},
               >,
             ]
-          ? $ReadOnlyArray<$FragmentRef<V>>
+          ? ReadonlyArray<$FragmentRef<V>>
           : [+t: T] extends [
-                +t: ?$ReadOnlyArray<
+                +t: ?ReadonlyArray<
                   infer V extends {+$fragmentType: FragmentType, ...},
                 >,
               ]
-            ? ?$ReadOnlyArray<$FragmentRef<V>>
+            ? ?ReadonlyArray<$FragmentRef<V>>
             : [+t: T] extends [
-                  +t: $ReadOnlyArray<?infer V extends {
+                  +t: ReadonlyArray<?infer V extends {
                     +$fragmentType: FragmentType,
                     ...
                   }>,
                 ]
-              ? $ReadOnlyArray<?$FragmentRef<$NonMaybeType<V>>>
+              ? ReadonlyArray<?$FragmentRef<NonNullable<V>>>
               : [+t: T] extends [
-                    +t: ?$ReadOnlyArray<?infer V extends {
+                    +t: ?ReadonlyArray<?infer V extends {
                       +$fragmentType: FragmentType,
                       ...
                     }>,
                   ]
-                ? ?$ReadOnlyArray<?$FragmentRef<$NonMaybeType<V>>>
+                ? ?ReadonlyArray<?$FragmentRef<NonNullable<V>>>
                 : T;
 
-export type RelayFragmentContainer<TComponent: component(...empty)> = component(
-  ...$RelayProps<React.ElementConfig<TComponent>, RelayProp>
-);
+export type RelayFragmentContainer<TComponent extends component(...empty)> =
+  component(...$RelayProps<React.ElementConfig<TComponent>, RelayProp>);
 
-export type RelayPaginationContainer<TComponent: component(...empty)> =
+export type RelayPaginationContainer<TComponent extends component(...empty)> =
   component(
     ...$RelayProps<React.ElementConfig<TComponent>, RelayPaginationProp>
   );
 
-export type RelayRefetchContainer<TComponent: component(...empty)> = component(
-  ...$RelayProps<React.ElementConfig<TComponent>, RelayRefetchProp>
-);
+export type RelayRefetchContainer<TComponent extends component(...empty)> =
+  component(...$RelayProps<React.ElementConfig<TComponent>, RelayRefetchProp>);

package/RelayContext.js.flow

@@ -20,21 +20,21 @@ const invariant = require('invariant');
  * Asserts that the input is a matches the `RelayContext` type defined in
  * `RelayEnvironmentTypes` and returns it as that type.
  */
-function assertRelayContext(relay: mixed): RelayContext {
+function assertRelayContext(relay: unknown): RelayContext {
   invariant(
     isRelayContext(relay),
     'RelayContext: Expected `context.relay` to be an object conforming to ' +
       'the `RelayContext` interface, got `%s`.',
     relay,
   );
-  return (relay: any);
+  return relay as any;
 }
 
 /**
  * Determine if the input is a plain object that matches the `RelayContext`
  * type defined in `RelayEnvironmentTypes`.
  */
-function isRelayContext(context: mixed): boolean {
+function isRelayContext(context: unknown): boolean {
   return (
     typeof context === 'object' &&
     context !== null &&