react-relay 11.0.2 → 13.0.0-rc.2

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,5 +1,5 @@
 /**
- * Relay v11.0.2
+ * Relay v13.0.0-rc.2
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
  *

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,27 +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 getRootVariablesForFragments = require('./getRootVariablesForFragments');
-
 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, ...},
@@ -149,17 +146,17 @@ function createContainerWithFragments<
     }
 
     componentDidMount() {
-      this._subscribeToNewResolver();
-      this._rerenderIfStoreHasChanged();
+      this._subscribeToNewResolverAndRerenderIfStoreHasChanged();
     }
 
     componentDidUpdate(prevProps: ContainerProps, prevState: ContainerState) {
       if (this.state.resolver !== prevState.resolver) {
         prevState.resolver.dispose();
 
-        this._subscribeToNewResolver();
+        this._subscribeToNewResolverAndRerenderIfStoreHasChanged();
+      } else {
+        this._rerenderIfStoreHasChanged();
       }
-      this._rerenderIfStoreHasChanged();
     }
 
     componentWillUnmount() {
@@ -222,21 +219,24 @@ function createContainerWithFragments<
       }
     }
 
-    _subscribeToNewResolver() {
-      const {resolver} = this.state;
+    _subscribeToNewResolverAndRerenderIfStoreHasChanged() {
+      const {data, resolver} = this.state;
+      const maybeNewData = resolver.resolve();
 
       // Event listeners are only safe to add during the commit phase,
       // So they won't leak if render is interrupted or errors.
-      resolver.setCallback(this._handleFragmentDataUpdate);
+      resolver.setCallback(this.props, this._handleFragmentDataUpdate);
+
+      // External values could change between render and commit.
+      // Check for this case, even though it requires an extra store read.
+      if (data !== maybeNewData) {
+        this.setState({data: maybeNewData});
+      }
     }
 
     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,
-  getSelector,
-  getVariablesFromObject,
-  isScalarAndEqual,
-} = require('relay-runtime');
-
 import type {
-  $RelayProps,
-  ObserverOrCallback,
   GeneratedNodeMap,
+  ObserverOrCallback,
   RefetchOptions,
   RelayPaginationProp,
+  $RelayProps,
 } from './ReactRelayTypes';
 import type {
   CacheConfig,
@@ -60,11 +33,37 @@ 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,
   prevContext: RelayContext,
   contextForChildren: RelayContext,
+  resolverGeneration: number,
   ...
 };
 
@@ -257,7 +256,6 @@ function createGetFragmentVariables(
     'ReactRelayPaginationContainer: Unable to synthesize a ' +
       'getFragmentVariables function.',
   );
-  // $FlowFixMe[cannot-spread-interface]
   return (prevVars: Variables, totalCount: number) => ({
     ...prevVars,
     [countVariable]: totalCount,
@@ -365,19 +363,31 @@ function createContainerWithFragments<
       this._isARequestInFlight = false;
       this._refetchSubscription = null;
       this._refetchVariables = null;
-      this._resolver = createFragmentSpecResolver(
-        relayContext,
-        containerName,
-        fragments,
-        props,
-        rootIsQueryRenderer,
-        this._handleFragmentDataUpdate,
-      );
+
+      if (RelayFeatureFlags.ENABLE_CONTAINERS_SUBSCRIBE_ON_COMMIT === true) {
+        this._resolver = createFragmentSpecResolver(
+          relayContext,
+          containerName,
+          fragments,
+          props,
+          rootIsQueryRenderer,
+        );
+      } else {
+        this._resolver = createFragmentSpecResolver(
+          relayContext,
+          containerName,
+          fragments,
+          props,
+          rootIsQueryRenderer,
+          this._handleFragmentDataUpdate,
+        );
+      }
       this.state = {
         data: this._resolver.resolve(),
         prevContext: relayContext,
         contextForChildren: relayContext,
         relayProp: this._buildRelayProp(relayContext),
+        resolverGeneration: 0,
       };
       this._isUnmounted = false;
       this._hasFetched = false;
@@ -385,6 +395,19 @@ function createContainerWithFragments<
 
     componentDidMount() {
       this._isUnmounted = false;
+      if (RelayFeatureFlags.ENABLE_CONTAINERS_SUBSCRIBE_ON_COMMIT === true) {
+        this._subscribeToNewResolverAndRerenderIfStoreHasChanged();
+      }
+    }
+
+    componentDidUpdate(prevProps: Props, prevState: ContainerState) {
+      if (RelayFeatureFlags.ENABLE_CONTAINERS_SUBSCRIBE_ON_COMMIT === true) {
+        if (prevState.resolverGeneration !== this.state.resolverGeneration) {
+          this._subscribeToNewResolverAndRerenderIfStoreHasChanged();
+        } else {
+          this._rerenderIfStoreHasChanged();
+        }
+      }
     }
 
     /**
@@ -418,19 +441,30 @@ function createContainerWithFragments<
       ) {
         this._cleanup();
         // Child containers rely on context.relay being mutated (for gDSFP).
-        this._resolver = createFragmentSpecResolver(
-          relayContext,
-          containerName,
-          fragments,
-          nextProps,
-          rootIsQueryRenderer,
-          this._handleFragmentDataUpdate,
-        );
-        this.setState({
+        if (RelayFeatureFlags.ENABLE_CONTAINERS_SUBSCRIBE_ON_COMMIT === true) {
+          this._resolver = createFragmentSpecResolver(
+            relayContext,
+            containerName,
+            fragments,
+            nextProps,
+            rootIsQueryRenderer,
+          );
+        } else {
+          this._resolver = createFragmentSpecResolver(
+            relayContext,
+            containerName,
+            fragments,
+            nextProps,
+            rootIsQueryRenderer,
+            this._handleFragmentDataUpdate,
+          );
+        }
+        this.setState(prevState => ({
           prevContext: relayContext,
           contextForChildren: relayContext,
           relayProp: this._buildRelayProp(relayContext),
-        });
+          resolverGeneration: prevState.resolverGeneration + 1,
+        }));
       } else if (!this._hasFetched) {
         this._resolver.setProps(nextProps);
       }
@@ -449,7 +483,8 @@ function createContainerWithFragments<
       // Short-circuit if any Relay-related data has changed
       if (
         nextState.data !== this.state.data ||
-        nextState.relayProp !== this.state.relayProp
+        nextState.relayProp !== this.state.relayProp ||
+        nextState.resolverGeneration !== this.state.resolverGeneration
       ) {
         return true;
       }
@@ -487,6 +522,31 @@ function createContainerWithFragments<
       };
     }
 
+    _rerenderIfStoreHasChanged() {
+      const {data} = this.state;
+      // External values could change between render and commit.
+      // Check for this case, even though it requires an extra store read.
+      const maybeNewData = this._resolver.resolve();
+      if (data !== maybeNewData) {
+        this.setState({data: maybeNewData});
+      }
+    }
+
+    _subscribeToNewResolverAndRerenderIfStoreHasChanged() {
+      const {data} = this.state;
+      const maybeNewData = this._resolver.resolve();
+
+      // Event listeners are only safe to add during the commit phase,
+      // So they won't leak if render is interrupted or errors.
+      this._resolver.setCallback(this.props, this._handleFragmentDataUpdate);
+
+      // External values could change between render and commit.
+      // Check for this case, even though it requires an extra store read.
+      if (data !== maybeNewData) {
+        this.setState({data: maybeNewData});
+      }
+    }
+
     /**
      * Render new data for the existing props/context.
      */
@@ -703,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,
@@ -726,7 +784,6 @@ function createContainerWithFragments<
         fetchVariables,
         componentName,
       );
-      // $FlowFixMe[cannot-spread-interface]
       fetchVariables = {
         ...fetchVariables,
         ...this._refetchVariables,
@@ -843,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}),