react-relay 12.0.0 → 13.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) Facebook, Inc. and its affiliates.
+Copyright (c) Meta Platforms, Inc. and affiliates.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -0,0 +1,47 @@
+React APIs for Relay
+---
+
+This package contains a collection of React APIs: Hooks and Components that are integrated with Relay runtime.
+
+Example:
+
+```js
+
+// @flow
+
+import type {UserComponent_user$key} from 'UserComponent_user.graphql';
+
+const React = require('react');
+
+const {graphql, useFragment} = require('react-relay');
+
+type Props = {
+  user: UserComponent_user$key,
+};
+
+function UserComponent(props: Props) {
+  const data = useFragment(
+    graphql`
+      fragment UserComponent_user on User {
+        name
+        profile_picture(scale: 2) {
+          uri
+        }
+      }
+    `,
+    props.user,
+  );
+
+  return (
+    <>
+      <h1>{data.name}</h1>
+      <div>
+        <img src={data.profile_picture?.uri} />
+      </div>
+    </>
+  );
+}
+
+```
+
+For complete API reference, visit https://relay.dev/.

package/ReactRelayContainerUtils.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/ReactRelayContext.js

@@ -1,7 +1,7 @@
 /**
- * Relay v12.0.0
+ * Relay v13.0.0
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/ReactRelayContext.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -11,14 +11,13 @@
 // flowlint ambiguous-object-type:error
 
 'use strict';
-const React = require('react');
+import type {RelayContext} from 'relay-runtime/store/RelayStoreTypes';
 
+const React = require('react');
 const {
   __internal: {createRelayContext},
 } = require('relay-runtime');
 
-import type {RelayContext} from 'relay-runtime/store/RelayStoreTypes';
-
 module.exports = (createRelayContext(
   React,
 ): React$Context<RelayContext | null>);

package/ReactRelayFragmentContainer.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,26 +12,24 @@
 
 'use strict';
 
-const React = require('react');
+import type {GeneratedNodeMap, RelayProp, $RelayProps} from './ReactRelayTypes';
+import type {
+  FragmentMap,
+  FragmentSpecResolver,
+  RelayContext,
+} from 'relay-runtime';
 
-const areEqual = require('areEqual');
 const buildReactRelayContainer = require('./buildReactRelayContainer');
-
 const {getContainerName} = require('./ReactRelayContainerUtils');
 const {assertRelayContext} = require('./RelayContext');
+const areEqual = require('areEqual');
+const React = require('react');
 const {
   createFragmentSpecResolver,
   getDataIDsFromObject,
   isScalarAndEqual,
 } = require('relay-runtime');
 
-import type {$RelayProps, GeneratedNodeMap, RelayProp} from './ReactRelayTypes';
-import type {
-  FragmentMap,
-  FragmentSpecResolver,
-  RelayContext,
-} from 'relay-runtime';
-
 type ContainerProps = $FlowFixMeProps;
 type ContainerState = {
   data: {[key: string]: mixed, ...},
@@ -237,12 +235,8 @@ function createContainerWithFragments<
     }
 
     render() {
-      const {
-        componentRef,
-        __relayContext,
-        __rootIsQueryRenderer,
-        ...props
-      } = this.props;
+      const {componentRef, __relayContext, __rootIsQueryRenderer, ...props} =
+        this.props;
       return React.createElement(Component, {
         ...props,
         ...this.state.data,

package/ReactRelayFragmentMockRenderer.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,8 +12,8 @@
 
 'use strict';
 
-const React = require('react');
 const ReactRelayContext = require('./ReactRelayContext');
+const React = require('react');
 
 function ReactRelayFragmentMockRenderer(props: Object): React.Node {
   return (

package/ReactRelayLocalQueryRenderer.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,21 +12,20 @@
 
 'use strict';
 
-const React = require('react');
+import type {ReactRelayQueryRendererContext as ReactRelayQueryRendererContextType} from './ReactRelayQueryRendererContext';
+import type {GraphQLTaggedNode, IEnvironment, Variables} from 'relay-runtime';
+
 const ReactRelayContext = require('./ReactRelayContext');
 const ReactRelayQueryRendererContext = require('./ReactRelayQueryRendererContext');
-
-const {useLayoutEffect, useState, useRef, useMemo} = React;
+const areEqual = require('areEqual');
+const React = require('react');
 const {
   createOperationDescriptor,
   deepFreeze,
   getRequest,
 } = require('relay-runtime');
 
-const areEqual = require('areEqual');
-
-import type {ReactRelayQueryRendererContext as ReactRelayQueryRendererContextType} from './ReactRelayQueryRendererContext';
-import type {GraphQLTaggedNode, IEnvironment, Variables} from 'relay-runtime';
+const {useLayoutEffect, useState, useRef, useMemo} = React;
 
 type Props = {
   environment: IEnvironment,

package/ReactRelayPaginationContainer.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,39 +12,12 @@
 
 'use strict';
 
-const React = require('react');
-const ReactRelayContext = require('./ReactRelayContext');
-const ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
-
-const areEqual = require('areEqual');
-const buildReactRelayContainer = require('./buildReactRelayContainer');
-const getRootVariablesForFragments = require('./getRootVariablesForFragments');
-const invariant = require('invariant');
-const warning = require('warning');
-
-const {
-  getComponentName,
-  getContainerName,
-} = require('./ReactRelayContainerUtils');
-const {assertRelayContext} = require('./RelayContext');
-const {
-  ConnectionInterface,
-  Observable,
-  createFragmentSpecResolver,
-  createOperationDescriptor,
-  getDataIDsFromObject,
-  getRequest,
-  getVariablesFromObject,
-  isScalarAndEqual,
-  RelayFeatureFlags,
-} = require('relay-runtime');
-
 import type {
-  $RelayProps,
-  ObserverOrCallback,
   GeneratedNodeMap,
+  ObserverOrCallback,
   RefetchOptions,
   RelayPaginationProp,
+  $RelayProps,
 } from './ReactRelayTypes';
 import type {
   CacheConfig,
@@ -60,6 +33,31 @@ import type {
   Variables,
 } from 'relay-runtime';
 
+const buildReactRelayContainer = require('./buildReactRelayContainer');
+const getRootVariablesForFragments = require('./getRootVariablesForFragments');
+const {
+  getComponentName,
+  getContainerName,
+} = require('./ReactRelayContainerUtils');
+const ReactRelayContext = require('./ReactRelayContext');
+const ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
+const {assertRelayContext} = require('./RelayContext');
+const areEqual = require('areEqual');
+const invariant = require('invariant');
+const React = require('react');
+const {
+  ConnectionInterface,
+  Observable,
+  RelayFeatureFlags,
+  createFragmentSpecResolver,
+  createOperationDescriptor,
+  getDataIDsFromObject,
+  getRequest,
+  getVariablesFromObject,
+  isScalarAndEqual,
+} = require('relay-runtime');
+const warning = require('warning');
+
 type ContainerState = {
   data: {[key: string]: mixed, ...},
   relayProp: RelayPaginationProp,
@@ -258,7 +256,6 @@ function createGetFragmentVariables(
     'ReactRelayPaginationContainer: Unable to synthesize a ' +
       'getFragmentVariables function.',
   );
-  // $FlowFixMe[cannot-spread-interface]
   return (prevVars: Variables, totalCount: number) => ({
     ...prevVars,
     [countVariable]: totalCount,
@@ -766,9 +763,7 @@ function createContainerWithFragments<
       };
       let fragmentVariables;
       const rootVariables = getRootVariablesForFragments(fragments, restProps);
-      // $FlowFixMe[cannot-spread-interface]
       fragmentVariables = getVariablesFromObject(fragments, restProps);
-      // $FlowFixMe[cannot-spread-interface]
       fragmentVariables = {
         ...rootVariables,
         ...fragmentVariables,
@@ -789,7 +784,6 @@ function createContainerWithFragments<
         fetchVariables,
         componentName,
       );
-      // $FlowFixMe[cannot-spread-interface]
       fetchVariables = {
         ...fetchVariables,
         ...this._refetchVariables,
@@ -906,12 +900,8 @@ function createContainerWithFragments<
     }
 
     render() {
-      const {
-        componentRef,
-        __relayContext,
-        __rootIsQueryRenderer,
-        ...props
-      } = this.props;
+      const {componentRef, __relayContext, __rootIsQueryRenderer, ...props} =
+        this.props;
       return (
         <ReactRelayContext.Provider value={this.state.contextForChildren}>
           <Component

package/ReactRelayQueryFetcher.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,14 +12,6 @@
 
 'use strict';
 
-const invariant = require('invariant');
-
-const {
-  createOperationDescriptor,
-  isRelayModernEnvironment,
-  __internal: {fetchQuery},
-} = require('relay-runtime');
-
 import type {
   CacheConfig,
   Disposable,
@@ -29,6 +21,13 @@ import type {
   Snapshot,
 } from 'relay-runtime';
 
+const invariant = require('invariant');
+const {
+  __internal: {fetchQuery},
+  createOperationDescriptor,
+  isRelayModernEnvironment,
+} = require('relay-runtime');
+
 type OnDataChange = ({
   error?: Error,
   snapshot?: Snapshot,
@@ -341,8 +340,8 @@ class ReactRelayQueryFetcher {
     this._rootSubscription = environment.subscribe(this._snapshot, snapshot => {
       // Read from this._fetchOptions in case onDataChange() was lazily added.
       if (this._fetchOptions != null) {
-        const maybeNewOnDataChangeCallbacks = this._fetchOptions
-          .onDataChangeCallbacks;
+        const maybeNewOnDataChangeCallbacks =
+          this._fetchOptions.onDataChangeCallbacks;
         if (Array.isArray(maybeNewOnDataChangeCallbacks)) {
           maybeNewOnDataChangeCallbacks.forEach(onDataChange =>
             onDataChange({snapshot}),

package/ReactRelayQueryRenderer.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,20 +12,6 @@
 
 'use strict';
 
-const React = require('react');
-const ReactRelayContext = require('./ReactRelayContext');
-const ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
-const ReactRelayQueryRendererContext = require('./ReactRelayQueryRendererContext');
-
-const areEqual = require('areEqual');
-
-const {
-  createOperationDescriptor,
-  deepFreeze,
-  getRequest,
-  RelayFeatureFlags,
-} = require('relay-runtime');
-
 import type {ReactRelayQueryRendererContext as ReactRelayQueryRendererContextType} from './ReactRelayQueryRendererContext';
 import type {
   CacheConfig,
@@ -36,6 +22,19 @@ import type {
   Snapshot,
   Variables,
 } from 'relay-runtime';
+
+const ReactRelayContext = require('./ReactRelayContext');
+const ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
+const ReactRelayQueryRendererContext = require('./ReactRelayQueryRendererContext');
+const areEqual = require('areEqual');
+const React = require('react');
+const {
+  RelayFeatureFlags,
+  createOperationDescriptor,
+  deepFreeze,
+  getRequest,
+} = require('relay-runtime');
+
 type RetryCallbacks = {|
   handleDataChange:
     | null
@@ -340,7 +339,8 @@ function resetQueryStateForUpdate(
 ): $Shape<State> {
   const {query} = props;
 
-  const prevSelectionReferences = prevState.queryFetcher.getSelectionReferences();
+  const prevSelectionReferences =
+    prevState.queryFetcher.getSelectionReferences();
   prevState.queryFetcher.disposeRequest();
 
   let queryFetcher;

package/ReactRelayQueryRendererContext.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/ReactRelayRefetchContainer.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,33 +12,12 @@
 
 'use strict';
 
-const React = require('react');
-const ReactRelayContext = require('./ReactRelayContext');
-const ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
-
-const areEqual = require('areEqual');
-const buildReactRelayContainer = require('./buildReactRelayContainer');
-const getRootVariablesForFragments = require('./getRootVariablesForFragments');
-const warning = require('warning');
-
-const {getContainerName} = require('./ReactRelayContainerUtils');
-const {assertRelayContext} = require('./RelayContext');
-const {
-  Observable,
-  createFragmentSpecResolver,
-  createOperationDescriptor,
-  getDataIDsFromObject,
-  getRequest,
-  getVariablesFromObject,
-  isScalarAndEqual,
-} = require('relay-runtime');
-
 import type {
-  $RelayProps,
-  ObserverOrCallback,
   GeneratedNodeMap,
+  ObserverOrCallback,
   RefetchOptions,
   RelayRefetchProp,
+  $RelayProps,
 } from './ReactRelayTypes';
 import type {
   CacheConfig,
@@ -51,6 +30,25 @@ import type {
 } from 'relay-runtime';
 import type {FragmentSpecResolver} from 'relay-runtime';
 
+const buildReactRelayContainer = require('./buildReactRelayContainer');
+const getRootVariablesForFragments = require('./getRootVariablesForFragments');
+const {getContainerName} = require('./ReactRelayContainerUtils');
+const ReactRelayContext = require('./ReactRelayContext');
+const ReactRelayQueryFetcher = require('./ReactRelayQueryFetcher');
+const {assertRelayContext} = require('./RelayContext');
+const areEqual = require('areEqual');
+const React = require('react');
+const {
+  Observable,
+  createFragmentSpecResolver,
+  createOperationDescriptor,
+  getDataIDsFromObject,
+  getRequest,
+  getVariablesFromObject,
+  isScalarAndEqual,
+} = require('relay-runtime');
+const warning = require('warning');
+
 type ContainerProps = $FlowFixMeProps;
 
 type ContainerState = {
@@ -332,11 +330,9 @@ function createContainerWithFragments<
         typeof refetchVariables === 'function'
           ? refetchVariables(this._getFragmentVariables())
           : refetchVariables;
-      // $FlowFixMe[cannot-spread-interface]
       fetchVariables = {...rootVariables, ...fetchVariables};
       const fragmentVariables = renderVariables
-        ? // $FlowFixMe[cannot-spread-interface]
-          {...fetchVariables, ...renderVariables}
+        ? {...fetchVariables, ...renderVariables}
         : fetchVariables;
 
       const cacheConfig: ?CacheConfig = options
@@ -452,12 +448,8 @@ function createContainerWithFragments<
     };
 
     render() {
-      const {
-        componentRef,
-        __relayContext,
-        __rootIsQueryRenderer,
-        ...props
-      } = this.props;
+      const {componentRef, __relayContext, __rootIsQueryRenderer, ...props} =
+        this.props;
       const {relayProp, contextForChildren} = this.state;
       return (
         <ReactRelayContext.Provider value={contextForChildren}>

package/ReactRelayTestMocker.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,16 +12,6 @@
 
 'use strict';
 
-const areEqual = require('areEqual');
-const invariant = require('invariant');
-const warning = require('warning');
-
-const {
-  createOperationDescriptor,
-  isRelayModernEnvironment,
-  Network,
-} = require('relay-runtime');
-
 import type {
   CacheConfig,
   ConcreteRequest,
@@ -32,6 +22,15 @@ import type {
   Variables,
 } from 'relay-runtime';
 
+const areEqual = require('areEqual');
+const invariant = require('invariant');
+const {
+  Network,
+  createOperationDescriptor,
+  isRelayModernEnvironment,
+} = require('relay-runtime');
+const warning = require('warning');
+
 export type DataWriteConfig = {
   query: ConcreteRequest,
   variables: Variables,
@@ -66,7 +65,7 @@ let nextId = 0;
 
 class ReactRelayTestMocker {
   _environment: IEnvironment;
-  _defaults: {[string]: $PropertyType<NetworkWriteConfig, 'payload'>, ...} = {};
+  _defaults: {[string]: NetworkWriteConfig['payload'], ...} = {};
   _pendingFetches: Array<PendingFetch> = [];
 
   constructor(env: IEnvironment) {
@@ -118,7 +117,6 @@ class ReactRelayTestMocker {
    * annoying to test (e.g. client_mutation_id, actor_id)
    */
   static stripUnused(variables: Variables): Variables {
-    // $FlowFixMe[prop-missing]
     if (variables.input) {
       const toRemove = [
         'client_mutation_id',
@@ -126,7 +124,6 @@ class ReactRelayTestMocker {
         'clientMutationId',
         'actorId',
       ];
-      // $FlowFixMe[cannot-spread-interface]
       const strippedVariables = {...variables, input: {...variables.input}};
       toRemove.forEach(item => (strippedVariables.input[item] = undefined));
       return strippedVariables;
@@ -143,7 +140,11 @@ class ReactRelayTestMocker {
    * their components behave under error conditions.
    */
   _mockNetworkLayer(env: IEnvironment): IEnvironment {
-    const fetch = (request, variables, cacheConfig) => {
+    const fetch = (
+      request: RequestParameters,
+      variables: Variables,
+      cacheConfig: CacheConfig,
+    ) => {
       let resolve;
       let reject;
       const promise = new Promise((res, rej) => {
@@ -314,6 +315,7 @@ class ReactRelayTestMocker {
     );
 
     const realPayload =
+      // $FlowFixMe[incompatible-call]
       typeof payload === 'function' ? payload(toResolve.variables) : payload;
 
     // if there are errors, reject the query

package/ReactRelayTypes.js.flow

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -14,7 +14,7 @@
 
 import type {
   Disposable,
-  FragmentReference,
+  FragmentType,
   GraphQLTaggedNode,
   IEnvironment,
   Observer,
@@ -94,7 +94,7 @@ export type RefetchOptions = {|
  *
  */
 export type $FragmentRef<T> = {
-  +$fragmentRefs: $PropertyType<T, '$refType'>,
+  +$fragmentSpreads: T['$fragmentType'],
   ...
 };
 
@@ -105,14 +105,14 @@ export type $FragmentRef<T> = {
 // prettier-ignore
 export type $RelayProps<Props, RelayPropT = RelayProp> = $ObjMap<
   $Diff<Props, { relay: RelayPropT | void, ... }>,
-  & (<T: { +$refType: empty, ... }>( T) =>  T)
-  & (<T: { +$refType: empty, ... }>(?T) => ?T)
-  & (<TRef: FragmentReference, T: { +$refType: TRef, ... }>(                 T ) =>                  $FragmentRef<T> )
-  & (<TRef: FragmentReference, T: { +$refType: TRef, ... }>(?                T ) => ?                $FragmentRef<T> )
-  & (<TRef: FragmentReference, T: { +$refType: TRef, ... }>( $ReadOnlyArray< T>) =>  $ReadOnlyArray< $FragmentRef<T>>)
-  & (<TRef: FragmentReference, T: { +$refType: TRef, ... }>(?$ReadOnlyArray< T>) => ?$ReadOnlyArray< $FragmentRef<T>>)
-  & (<TRef: FragmentReference, T: { +$refType: TRef, ... }>( $ReadOnlyArray<?T>) =>  $ReadOnlyArray<?$FragmentRef<T>>)
-  & (<TRef: FragmentReference, T: { +$refType: TRef, ... }>(?$ReadOnlyArray<?T>) => ?$ReadOnlyArray<?$FragmentRef<T>>)
+  & (<T: { +$fragmentType: empty, ... }>( T) =>  T)
+  & (<T: { +$fragmentType: empty, ... }>(?T) => ?T)
+  & (<TFragmentType: FragmentType, T: { +$fragmentType: TFragmentType, ... }>(                 T ) =>                  $FragmentRef<T> )
+  & (<TFragmentType: FragmentType, T: { +$fragmentType: TFragmentType, ... }>(?                T ) => ?                $FragmentRef<T> )
+  & (<TFragmentType: FragmentType, T: { +$fragmentType: TFragmentType, ... }>( $ReadOnlyArray< T>) =>  $ReadOnlyArray< $FragmentRef<T>>)
+  & (<TFragmentType: FragmentType, T: { +$fragmentType: TFragmentType, ... }>(?$ReadOnlyArray< T>) => ?$ReadOnlyArray< $FragmentRef<T>>)
+  & (<TFragmentType: FragmentType, T: { +$fragmentType: TFragmentType, ... }>( $ReadOnlyArray<?T>) =>  $ReadOnlyArray<?$FragmentRef<T>>)
+  & (<TFragmentType: FragmentType, T: { +$fragmentType: TFragmentType, ... }>(?$ReadOnlyArray<?T>) => ?$ReadOnlyArray<?$FragmentRef<T>>)
   & (<T>(T) => T),
 >;