relay-runtime 11.0.2 → 13.0.0-rc.2

package/store/RelayModernEnvironment.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.
@@ -13,33 +13,14 @@
 
 'use strict';
 
-const OperationExecutor = require('./OperationExecutor');
-const RelayDefaultHandlerProvider = require('../handlers/RelayDefaultHandlerProvider');
-const RelayFeatureFlags = require('../util/RelayFeatureFlags');
-const RelayObservable = require('../network/RelayObservable');
-const RelayOperationTracker = require('../store/RelayOperationTracker');
-const RelayPublishQueue = require('./RelayPublishQueue');
-const RelayRecordSource = require('./RelayRecordSource');
-
-const defaultGetDataID = require('./defaultGetDataID');
-const defaultRequiredFieldLogger = require('./defaultRequiredFieldLogger');
-const generateID = require('../util/generateID');
-const invariant = require('invariant');
-
 import type {HandlerProvider} from '../handlers/RelayDefaultHandlerProvider';
+import type {ActorIdentifier} from '../multi-actor-environment/ActorIdentifier';
 import type {
   GraphQLResponse,
   INetwork,
   PayloadData,
-  UploadableMap,
 } from '../network/RelayNetworkTypes';
-import type {RequestParameters} from '../util/RelayConcreteNode';
-import type {
-  CacheConfig,
-  Disposable,
-  RenderPolicy,
-  Variables,
-} from '../util/RelayRuntimeTypes';
+import type {Disposable, RenderPolicy} from '../util/RelayRuntimeTypes';
 import type {ActiveState, TaskScheduler} from './OperationExecutor';
 import type {GetDataID} from './RelayResponseNormalizer';
 import type {
@@ -47,6 +28,7 @@ import type {
   IEnvironment,
   LogFunction,
   MissingFieldHandler,
+  MutationParameters,
   OperationAvailability,
   OperationDescriptor,
   OperationLoader,
@@ -64,6 +46,23 @@ import type {
   StoreUpdater,
 } from './RelayStoreTypes';
 
+const RelayDefaultHandlerProvider = require('../handlers/RelayDefaultHandlerProvider');
+const {
+  INTERNAL_ACTOR_IDENTIFIER_DO_NOT_USE,
+  assertInternalActorIndentifier,
+} = require('../multi-actor-environment/ActorIdentifier');
+const RelayObservable = require('../network/RelayObservable');
+const wrapNetworkWithLogObserver = require('../network/wrapNetworkWithLogObserver');
+const RelayOperationTracker = require('../store/RelayOperationTracker');
+const registerEnvironmentWithDevTools = require('../util/registerEnvironmentWithDevTools');
+const RelayFeatureFlags = require('../util/RelayFeatureFlags');
+const defaultGetDataID = require('./defaultGetDataID');
+const defaultRequiredFieldLogger = require('./defaultRequiredFieldLogger');
+const OperationExecutor = require('./OperationExecutor');
+const RelayPublishQueue = require('./RelayPublishQueue');
+const RelayRecordSource = require('./RelayRecordSource');
+const invariant = require('invariant');
+
 export type EnvironmentConfig = {|
   +configName?: string,
   +handlerProvider?: ?HandlerProvider,
@@ -143,7 +142,7 @@ class RelayModernEnvironment implements IEnvironment {
         : 'full';
     this._operationLoader = operationLoader;
     this._operationExecutions = new Map();
-    this._network = this.__wrapNetworkWithLogObserver(config.network);
+    this._network = wrapNetworkWithLogObserver(this, config.network);
     this._getDataID = config.getDataID ?? defaultGetDataID;
     this._publishQueue = new RelayPublishQueue(
       config.store,
@@ -156,31 +155,23 @@ class RelayModernEnvironment implements IEnvironment {
     this._isServer = config.isServer ?? false;
 
     (this: any).__setNet = newNet =>
-      (this._network = this.__wrapNetworkWithLogObserver(newNet));
+      (this._network = wrapNetworkWithLogObserver(this, newNet));
 
     if (__DEV__) {
       const {inspect} = require('./StoreInspector');
       (this: any).DEBUG_inspect = (dataID: ?string) => inspect(this, dataID);
     }
 
-    // Register this Relay Environment with Relay DevTools if it exists.
-    // Note: this must always be the last step in the constructor.
-    const _global =
-      typeof global !== 'undefined'
-        ? global
-        : typeof window !== 'undefined'
-        ? window
-        : undefined;
-    const devToolsHook = _global && _global.__RELAY_DEVTOOLS_HOOK__;
-    if (devToolsHook) {
-      devToolsHook.registerEnvironment(this);
-    }
     this._missingFieldHandlers = config.missingFieldHandlers;
     this._operationTracker =
       config.operationTracker ?? new RelayOperationTracker();
     this._reactFlightPayloadDeserializer = reactFlightPayloadDeserializer;
     this._reactFlightServerErrorHandler = reactFlightServerErrorHandler;
     this._shouldProcessClientComponents = config.shouldProcessClientComponents;
+
+    // Register this Relay Environment with Relay DevTools if it exists.
+    // Note: this must always be the last step in the constructor.
+    registerEnvironmentWithDevTools(this);
   }
 
   getStore(): Store {
@@ -236,7 +227,9 @@ class RelayModernEnvironment implements IEnvironment {
     });
   }
 
-  applyMutation(optimisticConfig: OptimisticResponseConfig): Disposable {
+  applyMutation<TMutation: MutationParameters>(
+    optimisticConfig: OptimisticResponseConfig<TMutation>,
+  ): Disposable {
     const subscription = this._execute({
       createSource: () => RelayObservable.create(_sink => {}),
       isClientPayload: false,
@@ -303,7 +296,19 @@ class RelayModernEnvironment implements IEnvironment {
     handlers: $ReadOnlyArray<MissingFieldHandler>,
   ): OperationAvailability {
     const target = RelayRecordSource.create();
-    const result = this._store.check(operation, {target, handlers});
+    const source = this._store.getSource();
+    const result = this._store.check(operation, {
+      handlers,
+      defaultActorIdentifier: INTERNAL_ACTOR_IDENTIFIER_DO_NOT_USE,
+      getSourceForActor(actorIdentifier: ActorIdentifier) {
+        assertInternalActorIndentifier(actorIdentifier);
+        return source;
+      },
+      getTargetForActor(actorIdentifier: ActorIdentifier) {
+        assertInternalActorIndentifier(actorIdentifier);
+        return target;
+      },
+    });
     if (target.size() > 0) {
       this._scheduleUpdates(() => {
         this._publishQueue.commitSource(target);
@@ -324,7 +329,7 @@ class RelayModernEnvironment implements IEnvironment {
 
   /**
    * Returns an Observable of GraphQLResponse resulting from executing the
-   * provided Query or Subscription operation, each result of which is then
+   * provided Query operation, each result of which is then
    * normalized and committed to the publish queue.
    *
    * Note: Observables are lazy, so calling this method will do nothing until
@@ -332,10 +337,38 @@ class RelayModernEnvironment implements IEnvironment {
    */
   execute({
     operation,
+  }: {|
+    operation: OperationDescriptor,
+  |}): RelayObservable<GraphQLResponse> {
+    return this._execute({
+      createSource: () =>
+        this._network.execute(
+          operation.request.node.params,
+          operation.request.variables,
+          operation.request.cacheConfig || {},
+          null,
+        ),
+      isClientPayload: false,
+      operation,
+      optimisticConfig: null,
+      updater: null,
+    });
+  }
+
+  /**
+   * Returns an Observable of GraphQLResponse resulting from executing the
+   * provided Subscription operation, each result of which is then
+   * normalized and committed to the publish queue.
+   *
+   * Note: Observables are lazy, so calling this method will do nothing until
+   * the result is subscribed to: environment.execute({...}).subscribe({...}).
+   */
+  executeSubscription<TMutation: MutationParameters>({
+    operation,
     updater,
   }: {|
     operation: OperationDescriptor,
-    updater?: ?SelectorStoreUpdater,
+    updater?: ?SelectorStoreUpdater<TMutation['response']>,
   |}): RelayObservable<GraphQLResponse> {
     return this._execute({
       createSource: () =>
@@ -362,13 +395,13 @@ class RelayModernEnvironment implements IEnvironment {
    * the result is subscribed to:
    * environment.executeMutation({...}).subscribe({...}).
    */
-  executeMutation({
+  executeMutation<TMutation: MutationParameters>({
     operation,
     optimisticResponse,
     optimisticUpdater,
     updater,
     uploadables,
-  }: ExecuteMutationConfig): RelayObservable<GraphQLResponse> {
+  }: ExecuteMutationConfig<TMutation>): RelayObservable<GraphQLResponse> {
     let optimisticConfig;
     if (optimisticResponse || optimisticUpdater) {
       optimisticConfig = {
@@ -398,7 +431,7 @@ class RelayModernEnvironment implements IEnvironment {
   /**
    * Returns an Observable of GraphQLResponse resulting from executing the
    * provided Query or Subscription operation responses, the result of which is
-   * then normalized and comitted to the publish queue.
+   * then normalized and committed to the publish queue.
    *
    * Note: Observables are lazy, so calling this method will do nothing until
    * the result is subscribed to:
@@ -424,7 +457,7 @@ class RelayModernEnvironment implements IEnvironment {
     return `RelayModernEnvironment(${this.configName ?? ''})`;
   }
 
-  _execute({
+  _execute<TMutation: MutationParameters>({
     createSource,
     isClientPayload,
     operation,
@@ -434,19 +467,26 @@ class RelayModernEnvironment implements IEnvironment {
     createSource: () => RelayObservable<GraphQLResponse>,
     isClientPayload: boolean,
     operation: OperationDescriptor,
-    optimisticConfig: ?OptimisticResponseConfig,
-    updater: ?SelectorStoreUpdater,
+    optimisticConfig: ?OptimisticResponseConfig<TMutation>,
+    updater: ?SelectorStoreUpdater<TMutation['response']>,
   |}): RelayObservable<GraphQLResponse> {
+    const publishQueue = this._publishQueue;
+    const store = this._store;
     return RelayObservable.create(sink => {
       const executor = OperationExecutor.execute({
+        actorIdentifier: INTERNAL_ACTOR_IDENTIFIER_DO_NOT_USE,
         getDataID: this._getDataID,
         isClientPayload,
+        log: this.__log,
         operation,
         operationExecutions: this._operationExecutions,
         operationLoader: this._operationLoader,
         operationTracker: this._operationTracker,
         optimisticConfig,
-        publishQueue: this._publishQueue,
+        getPublishQueue(actorIdentifier: ActorIdentifier) {
+          assertInternalActorIndentifier(actorIdentifier);
+          return publishQueue;
+        },
         reactFlightPayloadDeserializer: this._reactFlightPayloadDeserializer,
         reactFlightServerErrorHandler: this._reactFlightServerErrorHandler,
         scheduler: this._scheduler,
@@ -455,80 +495,16 @@ class RelayModernEnvironment implements IEnvironment {
         // NOTE: Some product tests expect `Network.execute` to be called only
         //       when the Observable is executed.
         source: createSource(),
-        store: this._store,
+        getStore(actorIdentifier: ActorIdentifier) {
+          assertInternalActorIndentifier(actorIdentifier);
+          return store;
+        },
         treatMissingFieldsAsNull: this._treatMissingFieldsAsNull,
         updater,
       });
       return () => executor.cancel();
     });
   }
-
-  /**
-   * Wraps the network with logging to ensure that network requests are
-   * always logged. Relying on each network callsite to be wrapped is
-   * untenable and will eventually lead to holes in the logging.
-   */
-  __wrapNetworkWithLogObserver(network: INetwork): INetwork {
-    const that = this;
-    return {
-      execute(
-        params: RequestParameters,
-        variables: Variables,
-        cacheConfig: CacheConfig,
-        uploadables?: ?UploadableMap,
-      ): RelayObservable<GraphQLResponse> {
-        const transactionID = generateID();
-        const log = that.__log;
-        const logObserver = {
-          start: subscription => {
-            log({
-              name: 'network.start',
-              transactionID,
-              params,
-              variables,
-              cacheConfig,
-            });
-          },
-          next: response => {
-            log({
-              name: 'network.next',
-              transactionID,
-              response,
-            });
-          },
-          error: error => {
-            log({
-              name: 'network.error',
-              transactionID,
-              error,
-            });
-          },
-          complete: () => {
-            log({
-              name: 'network.complete',
-              transactionID,
-            });
-          },
-          unsubscribe: () => {
-            log({
-              name: 'network.unsubscribe',
-              transactionID,
-            });
-          },
-        };
-        const logRequestInfo = info => {
-          log({
-            name: 'network.info',
-            transactionID,
-            info,
-          });
-        };
-        return network
-          .execute(params, variables, cacheConfig, uploadables, logRequestInfo)
-          .do(logObserver);
-      },
-    };
-  }
 }
 
 // Add a sigil for detection by `isRelayModernEnvironment()` to avoid a

package/store/RelayModernFragmentSpecResolver.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,29 +12,13 @@
 
 'use strict';
 
-const RelayFeatureFlags = require('../util/RelayFeatureFlags');
-
-const areEqual = require('areEqual');
-const invariant = require('invariant');
-const isScalarAndEqual = require('../util/isScalarAndEqual');
-const reportMissingRequiredFields = require('../util/reportMissingRequiredFields');
-const warning = require('warning');
-
-const {getPromiseForActiveRequest} = require('../query/fetchQueryInternal');
-const {createRequestDescriptor} = require('./RelayModernOperationDescriptor');
-const {
-  areEqualSelectors,
-  createReaderSelector,
-  getSelectorsFromObject,
-} = require('./RelayModernSelector');
-
 import type {ConcreteRequest} from '../util/RelayConcreteNode';
 import type {Disposable, Variables} from '../util/RelayRuntimeTypes';
 import type {
-  IEnvironment,
   FragmentMap,
   FragmentSpecResolver,
   FragmentSpecResults,
+  IEnvironment,
   MissingRequiredFields,
   PluralReaderSelector,
   RelayContext,
@@ -43,10 +27,25 @@ import type {
   Snapshot,
 } from './RelayStoreTypes';
 
+const getPendingOperationsForFragment = require('../util/getPendingOperationsForFragment');
+const isScalarAndEqual = require('../util/isScalarAndEqual');
+const recycleNodesInto = require('../util/recycleNodesInto');
+const RelayFeatureFlags = require('../util/RelayFeatureFlags');
+const reportMissingRequiredFields = require('../util/reportMissingRequiredFields');
+const {createRequestDescriptor} = require('./RelayModernOperationDescriptor');
+const {
+  areEqualSelectors,
+  createReaderSelector,
+  getSelectorsFromObject,
+} = require('./RelayModernSelector');
+const areEqual = require('areEqual');
+const invariant = require('invariant');
+const warning = require('warning');
+
 type Props = {[key: string]: mixed, ...};
 type Resolvers = {
   [key: string]: ?(SelectorListResolver | SelectorResolver),
-  ...,
+  ...
 };
 
 /**
@@ -137,13 +136,16 @@ class RelayModernFragmentSpecResolver implements FragmentSpecResolver {
     return this._data;
   }
 
-  setCallback(callback: () => void): void {
+  setCallback(props: Props, callback: () => void): void {
     this._callback = callback;
+    if (RelayFeatureFlags.ENABLE_CONTAINERS_SUBSCRIBE_ON_COMMIT === true) {
+      this.setProps(props);
+    }
   }
 
   setProps(props: Props): void {
-    const ownedSelectors = getSelectorsFromObject(this._fragments, props);
     this._props = {};
+    const ownedSelectors = getSelectorsFromObject(this._fragments, props);
 
     for (const key in ownedSelectors) {
       if (ownedSelectors.hasOwnProperty(key)) {
@@ -160,6 +162,7 @@ class RelayModernFragmentSpecResolver implements FragmentSpecResolver {
               this._context.environment,
               this._rootIsQueryRenderer,
               ownedSelector,
+              this._callback != null,
               this._onChange,
             );
           } else {
@@ -176,6 +179,7 @@ class RelayModernFragmentSpecResolver implements FragmentSpecResolver {
               this._context.environment,
               this._rootIsQueryRenderer,
               ownedSelector,
+              this._callback != null,
               this._onChange,
             );
           } else {
@@ -232,6 +236,7 @@ class SelectorResolver {
     environment: IEnvironment,
     rootIsQueryRenderer: boolean,
     selector: SingularReaderSelector,
+    subscribeOnConstruction: boolean,
     callback: () => void,
   ) {
     const snapshot = environment.lookup(selector);
@@ -242,7 +247,13 @@ class SelectorResolver {
     this._environment = environment;
     this._rootIsQueryRenderer = rootIsQueryRenderer;
     this._selector = selector;
-    this._subscription = environment.subscribe(snapshot, this._onChange);
+    if (RelayFeatureFlags.ENABLE_CONTAINERS_SUBSCRIBE_ON_COMMIT === true) {
+      if (subscribeOnConstruction) {
+        this._subscription = environment.subscribe(snapshot, this._onChange);
+      }
+    } else {
+      this._subscription = environment.subscribe(snapshot, this._onChange);
+    }
   }
 
   dispose(): void {
@@ -253,10 +264,7 @@ class SelectorResolver {
   }
 
   resolve(): ?Object {
-    if (
-      RelayFeatureFlags.ENABLE_RELAY_CONTAINERS_SUSPENSE === true &&
-      this._isMissingData === true
-    ) {
+    if (this._isMissingData === true) {
       // NOTE: This branch exists to handle the case in which:
       // - A RelayModern container is rendered as a descendant of a Relay Hook
       //   root using a "partial" renderPolicy (this means that eargerly
@@ -278,11 +286,12 @@ class SelectorResolver {
       // This should eventually go away with something like @optional, where we only
       // suspend at specific boundaries depending on whether the boundary
       // can be fulfilled or not.
-      const promise =
-        getPromiseForActiveRequest(this._environment, this._selector.owner) ??
-        this._environment
-          .getOperationTracker()
-          .getPromiseForPendingOperationsAffectingOwner(this._selector.owner);
+      const pendingOperationsResult = getPendingOperationsForFragment(
+        this._environment,
+        this._selector.node,
+        this._selector.owner,
+      );
+      const promise: void | Promise<void> = pendingOperationsResult?.promise;
       if (promise != null) {
         if (this._rootIsQueryRenderer) {
           warning(
@@ -293,6 +302,8 @@ class SelectorResolver {
             this._selector.node.name,
           );
         } else {
+          const pendingOperations =
+            pendingOperationsResult?.pendingOperations ?? [];
           warning(
             false,
             'Relay: Relay Container for fragment `%s` suspended. When using ' +
@@ -300,6 +311,15 @@ class SelectorResolver {
               'of a Relay Container.',
             this._selector.node.name,
           );
+          this._environment.__log({
+            name: 'suspense.fragment',
+            data: this._data,
+            fragment: this._selector.node,
+            isRelayHooks: false,
+            isMissingData: this._isMissingData,
+            isPromiseCached: false,
+            pendingOperations,
+          });
           throw promise;
         }
       }
@@ -322,7 +342,7 @@ class SelectorResolver {
     }
     this.dispose();
     const snapshot = this._environment.lookup(selector);
-    this._data = snapshot.data;
+    this._data = recycleNodesInto(this._data, snapshot.data);
     this._isMissingData = snapshot.isMissingData;
     this._missingRequiredFields = snapshot.missingRequiredFields;
     this._selector = selector;
@@ -375,11 +395,13 @@ class SelectorListResolver {
   _resolvers: Array<SelectorResolver>;
   _rootIsQueryRenderer: boolean;
   _stale: boolean;
+  _subscribeOnConstruction: boolean;
 
   constructor(
     environment: IEnvironment,
     rootIsQueryRenderer: boolean,
     selector: PluralReaderSelector,
+    subscribeOnConstruction: boolean,
     callback: () => void,
   ) {
     this._callback = callback;
@@ -388,6 +410,7 @@ class SelectorListResolver {
     this._resolvers = [];
     this._stale = true;
     this._rootIsQueryRenderer = rootIsQueryRenderer;
+    this._subscribeOnConstruction = subscribeOnConstruction;
 
     this.setSelector(selector);
   }
@@ -433,6 +456,7 @@ class SelectorListResolver {
           this._environment,
           this._rootIsQueryRenderer,
           selectors[ii],
+          this._subscribeOnConstruction,
           this._onChange,
         );
       }

package/store/RelayModernOperationDescriptor.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,9 +12,18 @@
 
 'use strict';
 
+import type {ConcreteRequest} from '../util/RelayConcreteNode';
+import type {
+  CacheConfig,
+  DataID,
+  OperationType,
+  Variables,
+  VariablesOf,
+} from '../util/RelayRuntimeTypes';
+import type {OperationDescriptor, RequestDescriptor} from './RelayStoreTypes';
+
 const deepFreeze = require('../util/deepFreeze');
 const getRequestIdentifier = require('../util/getRequestIdentifier');
-
 const {getOperationVariables} = require('./RelayConcreteVariables');
 const {
   createNormalizationSelector,
@@ -22,19 +31,15 @@ const {
 } = require('./RelayModernSelector');
 const {ROOT_ID} = require('./RelayStoreUtils');
 
-import type {ConcreteRequest} from '../util/RelayConcreteNode';
-import type {CacheConfig, DataID, Variables} from '../util/RelayRuntimeTypes';
-import type {OperationDescriptor, RequestDescriptor} from './RelayStoreTypes';
-
 /**
  * Creates an instance of the `OperationDescriptor` type defined in
  * `RelayStoreTypes` given an operation and some variables. The input variables
  * are filtered to exclude variables that do not match defined arguments on the
  * operation, and default values are populated for null values.
  */
-function createOperationDescriptor(
+function createOperationDescriptor<TQuery: OperationType>(
   request: ConcreteRequest,
-  variables: Variables,
+  variables: VariablesOf<TQuery>,
   cacheConfig?: ?CacheConfig,
   dataID?: DataID = ROOT_ID,
 ): OperationDescriptor {