relay-runtime 10.0.0 → 10.1.2

package/store/DataChecker.js.flow

@@ -18,10 +18,12 @@ const RelayFeatureFlags = require('../util/RelayFeatureFlags');
 const RelayModernRecord = require('./RelayModernRecord');
 const RelayRecordSourceMutator = require('../mutations/RelayRecordSourceMutator');
 const RelayRecordSourceProxy = require('../mutations/RelayRecordSourceProxy');
+const RelayStoreReactFlightUtils = require('./RelayStoreReactFlightUtils');
 const RelayStoreUtils = require('./RelayStoreUtils');
 
 const cloneRelayHandleSourceField = require('./cloneRelayHandleSourceField');
 const cloneRelayScalarHandleSourceField = require('./cloneRelayScalarHandleSourceField');
+const getOperation = require('../util/getOperation');
 const invariant = require('invariant');
 
 const {isClientID} = require('./ClientID');
@@ -30,6 +32,7 @@ const {generateTypeID} = require('./TypeID');
 
 import type {
   NormalizationField,
+  NormalizationFlightField,
   NormalizationLinkedField,
   NormalizationModuleImport,
   NormalizationNode,
@@ -43,6 +46,7 @@ import type {
   MutableRecordSource,
   NormalizationSelector,
   OperationLoader,
+  ReactFlightReachableQuery,
   Record,
   RecordSource,
 } from './RelayStoreTypes';
@@ -56,6 +60,7 @@ const {
   CONDITION,
   CLIENT_EXTENSION,
   DEFER,
+  FLIGHT_FIELD,
   FRAGMENT_SPREAD,
   INLINE_FRAGMENT,
   LINKED_FIELD,
@@ -67,6 +72,7 @@ const {
   TYPE_DISCRIMINATOR,
 } = RelayConcreteNode;
 const {
+  ROOT_ID,
   getModuleOperationKey,
   getStorageKey,
   getArgumentValues,
@@ -375,6 +381,7 @@ class DataChecker {
         case STREAM:
           this._traverseSelections(selection.selections, dataID);
           break;
+        // $FlowFixMe[incompatible-type]
         case FRAGMENT_SPREAD:
           invariant(
             false,
@@ -409,6 +416,13 @@ class DataChecker {
             } // else: if it does or doesn't implement, we don't need to check or skip anything else
           }
           break;
+        case FLIGHT_FIELD:
+          if (RelayFeatureFlags.ENABLE_REACT_FLIGHT_COMPONENT_FIELD) {
+            this._checkFlightField(selection, dataID);
+          } else {
+            throw new Error('Flight fields are not yet supported.');
+          }
+          break;
         default:
           (selection: empty);
           invariant(
@@ -437,8 +451,9 @@ class DataChecker {
       }
       return;
     }
-    const operation = operationLoader.get(operationReference);
-    if (operation != null) {
+    const normalizationRootNode = operationLoader.get(operationReference);
+    if (normalizationRootNode != null) {
+      const operation = getOperation(normalizationRootNode);
       this._traverse(operation, dataID);
     } else {
       // If the fragment is not available, we assume that the data cannot have been
@@ -495,6 +510,57 @@ class DataChecker {
       });
     }
   }
+
+  _checkFlightField(field: NormalizationFlightField, dataID: DataID): void {
+    const storageKey = getStorageKey(field, this._variables);
+    const linkedID = this._mutator.getLinkedRecordID(dataID, storageKey);
+
+    if (linkedID == null) {
+      if (linkedID === undefined) {
+        this._handleMissing();
+        return;
+      }
+      return;
+    }
+
+    const tree = this._mutator.getValue(
+      linkedID,
+      RelayStoreReactFlightUtils.REACT_FLIGHT_TREE_STORAGE_KEY,
+    );
+    const reachableQueries = this._mutator.getValue(
+      linkedID,
+      RelayStoreReactFlightUtils.REACT_FLIGHT_QUERIES_STORAGE_KEY,
+    );
+
+    if (tree == null || !Array.isArray(reachableQueries)) {
+      this._handleMissing();
+      return;
+    }
+
+    const operationLoader = this._operationLoader;
+    invariant(
+      operationLoader !== null,
+      'DataChecker: Expected an operationLoader to be configured when using ' +
+        'React Flight.',
+    );
+    // In Flight, the variables that are in scope for reachable queries aren't
+    // the same as what's in scope for the outer query.
+    const prevVariables = this._variables;
+    // $FlowFixMe[incompatible-cast]
+    for (const query of (reachableQueries: Array<ReactFlightReachableQuery>)) {
+      this._variables = query.variables;
+      const normalizationRootNode = operationLoader.get(query.module);
+      if (normalizationRootNode != null) {
+        const operation = getOperation(normalizationRootNode);
+        this._traverseSelections(operation.selections, ROOT_ID);
+      } else {
+        // If the fragment is not available, we assume that the data cannot have
+        // been processed yet and must therefore be missing.
+        this._handleMissing();
+      }
+    }
+    this._variables = prevVariables;
+  }
 }
 
 module.exports = {

package/store/RelayModernEnvironment.js.flow

@@ -22,6 +22,7 @@ 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');
 
@@ -29,7 +30,6 @@ import type {HandlerProvider} from '../handlers/RelayDefaultHandlerProvider';
 import type {
   GraphQLResponse,
   INetwork,
-  LogRequestInfoFunction,
   PayloadData,
   UploadableMap,
 } from '../network/RelayNetworkTypes';
@@ -48,6 +48,7 @@ import type {
   IEnvironment,
   LogFunction,
   MissingFieldHandler,
+  RequiredFieldLogger,
   OperationAvailability,
   OperationDescriptor,
   OperationLoader,
@@ -55,6 +56,7 @@ import type {
   OptimisticResponseConfig,
   OptimisticUpdateFunction,
   PublishQueue,
+  ReactFlightPayloadDeserializer,
   SelectorStoreUpdater,
   SingularReaderSelector,
   Snapshot,
@@ -68,6 +70,7 @@ export type EnvironmentConfig = {|
   +treatMissingFieldsAsNull?: boolean,
   +log?: ?LogFunction,
   +operationLoader?: ?OperationLoader,
+  +reactFlightPayloadDeserializer?: ?ReactFlightPayloadDeserializer,
   +network: INetwork,
   +scheduler?: ?TaskScheduler,
   +store: Store,
@@ -82,12 +85,14 @@ export type EnvironmentConfig = {|
   +UNSTABLE_defaultRenderPolicy?: ?RenderPolicy,
   +options?: mixed,
   +isServer?: boolean,
+  +requiredFieldLogger?: ?RequiredFieldLogger,
 |};
 
 class RelayModernEnvironment implements IEnvironment {
   __log: LogFunction;
   +_defaultRenderPolicy: RenderPolicy;
   _operationLoader: ?OperationLoader;
+  _reactFlightPayloadDeserializer: ?ReactFlightPayloadDeserializer;
   _network: INetwork;
   _publishQueue: PublishQueue;
   _scheduler: ?TaskScheduler;
@@ -100,6 +105,7 @@ class RelayModernEnvironment implements IEnvironment {
   _operationExecutions: Map<string, ActiveState>;
   +options: mixed;
   +_isServer: boolean;
+  requiredFieldLogger: RequiredFieldLogger;
 
   constructor(config: EnvironmentConfig) {
     this.configName = config.configName;
@@ -108,6 +114,8 @@ class RelayModernEnvironment implements IEnvironment {
       : RelayDefaultHandlerProvider;
     this._treatMissingFieldsAsNull = config.treatMissingFieldsAsNull === true;
     const operationLoader = config.operationLoader;
+    const reactFlightPayloadDeserializer =
+      config.reactFlightPayloadDeserializer;
     if (__DEV__) {
       if (operationLoader != null) {
         invariant(
@@ -119,8 +127,18 @@ class RelayModernEnvironment implements IEnvironment {
           operationLoader,
         );
       }
+      if (reactFlightPayloadDeserializer != null) {
+        invariant(
+          typeof reactFlightPayloadDeserializer === 'function',
+          'RelayModernEnvironment: Expected `reactFlightPayloadDeserializer` ' +
+            ' to be a function, got `%s`.',
+          reactFlightPayloadDeserializer,
+        );
+      }
     }
     this.__log = config.log ?? emptyFunction;
+    this.requiredFieldLogger =
+      config.requiredFieldLogger ?? defaultRequiredFieldLogger;
     this._defaultRenderPolicy =
       config.UNSTABLE_defaultRenderPolicy ??
       RelayFeatureFlags.ENABLE_PARTIAL_RENDERING_DEFAULT === true
@@ -128,7 +146,7 @@ class RelayModernEnvironment implements IEnvironment {
         : 'full';
     this._operationLoader = operationLoader;
     this._operationExecutions = new Map();
-    this._network = config.network;
+    this._network = this.__wrapNetworkWithLogObserver(config.network);
     this._getDataID = config.UNSTABLE_DO_NOT_USE_getDataID ?? defaultGetDataID;
     this._publishQueue = new RelayPublishQueue(
       config.store,
@@ -140,7 +158,8 @@ class RelayModernEnvironment implements IEnvironment {
     this.options = config.options;
     this._isServer = config.isServer ?? false;
 
-    (this: any).__setNet = newNet => (this._network = newNet);
+    (this: any).__setNet = newNet =>
+      (this._network = this.__wrapNetworkWithLogObserver(newNet));
 
     if (__DEV__) {
       const {inspect} = require('./StoreInspector');
@@ -162,6 +181,7 @@ class RelayModernEnvironment implements IEnvironment {
     this._missingFieldHandlers = config.missingFieldHandlers;
     this._operationTracker =
       config.operationTracker ?? new RelayOperationTracker();
+    this._reactFlightPayloadDeserializer = reactFlightPayloadDeserializer;
   }
 
   getStore(): Store {
@@ -226,6 +246,7 @@ class RelayModernEnvironment implements IEnvironment {
         operationLoader: this._operationLoader,
         optimisticConfig,
         publishQueue: this._publishQueue,
+        reactFlightPayloadDeserializer: this._reactFlightPayloadDeserializer,
         scheduler: this._scheduler,
         sink,
         source,
@@ -263,6 +284,7 @@ class RelayModernEnvironment implements IEnvironment {
         operationLoader: this._operationLoader,
         optimisticConfig: null,
         publishQueue: this._publishQueue,
+        reactFlightPayloadDeserializer: this._reactFlightPayloadDeserializer,
         scheduler: this._scheduler,
         sink,
         source: RelayObservable.from({
@@ -339,34 +361,25 @@ class RelayModernEnvironment implements IEnvironment {
    */
   execute({
     operation,
-    cacheConfig,
     updater,
-  }: {
+  }: {|
     operation: OperationDescriptor,
-    cacheConfig?: ?CacheConfig,
     updater?: ?SelectorStoreUpdater,
-    ...
-  }): RelayObservable<GraphQLResponse> {
-    const [logObserver, logRequestInfo] = this.__createLogObserver(
-      operation.request.node.params,
-      operation.request.variables,
-    );
+  |}): RelayObservable<GraphQLResponse> {
     return RelayObservable.create(sink => {
-      const source = this._network
-        .execute(
-          operation.request.node.params,
-          operation.request.variables,
-          cacheConfig || {},
-          null,
-          logRequestInfo,
-        )
-        .do(logObserver);
+      const source = this._network.execute(
+        operation.request.node.params,
+        operation.request.variables,
+        operation.request.cacheConfig || {},
+        null,
+      );
       const executor = RelayModernQueryExecutor.execute({
         operation,
         operationExecutions: this._operationExecutions,
         operationLoader: this._operationLoader,
         optimisticConfig: null,
         publishQueue: this._publishQueue,
+        reactFlightPayloadDeserializer: this._reactFlightPayloadDeserializer,
         scheduler: this._scheduler,
         sink,
         source,
@@ -391,24 +404,18 @@ class RelayModernEnvironment implements IEnvironment {
    * environment.executeMutation({...}).subscribe({...}).
    */
   executeMutation({
-    cacheConfig,
     operation,
     optimisticResponse,
     optimisticUpdater,
     updater,
     uploadables,
   }: {|
-    cacheConfig?: ?CacheConfig,
     operation: OperationDescriptor,
     optimisticUpdater?: ?SelectorStoreUpdater,
     optimisticResponse?: ?Object,
     updater?: ?SelectorStoreUpdater,
     uploadables?: ?UploadableMap,
   |}): RelayObservable<GraphQLResponse> {
-    const [logObserver, logRequestInfo] = this.__createLogObserver(
-      operation.request.node.params,
-      operation.request.variables,
-    );
     return RelayObservable.create(sink => {
       let optimisticConfig;
       if (optimisticResponse || optimisticUpdater) {
@@ -418,24 +425,22 @@ class RelayModernEnvironment implements IEnvironment {
           updater: optimisticUpdater,
         };
       }
-      const source = this._network
-        .execute(
-          operation.request.node.params,
-          operation.request.variables,
-          {
-            ...cacheConfig,
-            force: true,
-          },
-          uploadables,
-          logRequestInfo,
-        )
-        .do(logObserver);
+      const source = this._network.execute(
+        operation.request.node.params,
+        operation.request.variables,
+        {
+          ...operation.request.cacheConfig,
+          force: true,
+        },
+        uploadables,
+      );
       const executor = RelayModernQueryExecutor.execute({
         operation,
         operationExecutions: this._operationExecutions,
         operationLoader: this._operationLoader,
         optimisticConfig,
         publishQueue: this._publishQueue,
+        reactFlightPayloadDeserializer: this._reactFlightPayloadDeserializer,
         scheduler: this._scheduler,
         sink,
         source,
@@ -473,6 +478,7 @@ class RelayModernEnvironment implements IEnvironment {
         operationTracker: this._operationTracker,
         optimisticConfig: null,
         publishQueue: this._publishQueue,
+        reactFlightPayloadDeserializer: this._reactFlightPayloadDeserializer,
         scheduler: this._scheduler,
         sink,
         source,
@@ -488,56 +494,70 @@ class RelayModernEnvironment implements IEnvironment {
     return `RelayModernEnvironment(${this.configName ?? ''})`;
   }
 
-  __createLogObserver(
-    params: RequestParameters,
-    variables: Variables,
-  ): [Observer<GraphQLResponse>, LogRequestInfoFunction] {
-    const transactionID = generateID();
-    const log = this.__log;
-    const logObserver = {
-      start: subscription => {
-        log({
-          name: 'execute.start',
-          transactionID,
-          params,
-          variables,
-        });
-      },
-      next: response => {
-        log({
-          name: 'execute.next',
-          transactionID,
-          response,
-        });
-      },
-      error: error => {
-        log({
-          name: 'execute.error',
-          transactionID,
-          error,
-        });
-      },
-      complete: () => {
-        log({
-          name: 'execute.complete',
-          transactionID,
-        });
-      },
-      unsubscribe: () => {
-        log({
-          name: 'execute.unsubscribe',
-          transactionID,
-        });
+  /**
+   * 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,
+            });
+          },
+          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);
       },
     };
-    const logRequestInfo = info => {
-      log({
-        name: 'execute.info',
-        transactionID,
-        info,
-      });
-    };
-    return [logObserver, logRequestInfo];
   }
 }
 

package/store/RelayModernFragmentSpecResolver.js.flow

@@ -17,6 +17,7 @@ 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');
@@ -34,6 +35,7 @@ import type {
   FragmentMap,
   FragmentSpecResolver,
   FragmentSpecResults,
+  MissingRequiredFields,
   PluralReaderSelector,
   RelayContext,
   SelectorData,
@@ -216,6 +218,7 @@ class SelectorResolver {
   _data: ?SelectorData;
   _environment: IEnvironment;
   _isMissingData: boolean;
+  _missingRequiredFields: ?MissingRequiredFields;
   _selector: SingularReaderSelector;
   _subscription: ?Disposable;
 
@@ -228,6 +231,7 @@ class SelectorResolver {
     this._callback = callback;
     this._data = snapshot.data;
     this._isMissingData = snapshot.isMissingData;
+    this._missingRequiredFields = snapshot.missingRequiredFields;
     this._environment = environment;
     this._selector = selector;
     this._subscription = environment.subscribe(snapshot, this._onChange);
@@ -282,6 +286,12 @@ class SelectorResolver {
         throw promise;
       }
     }
+    if (this._missingRequiredFields != null) {
+      reportMissingRequiredFields(
+        this._environment,
+        this._missingRequiredFields,
+      );
+    }
     return this._data;
   }
 
@@ -296,6 +306,7 @@ class SelectorResolver {
     const snapshot = this._environment.lookup(selector);
     this._data = snapshot.data;
     this._isMissingData = snapshot.isMissingData;
+    this._missingRequiredFields = snapshot.missingRequiredFields;
     this._selector = selector;
     this._subscription = this._environment.subscribe(snapshot, this._onChange);
   }
@@ -314,7 +325,7 @@ class SelectorResolver {
     // NOTE: We manually create the request descriptor here instead of
     // calling createOperationDescriptor() because we want to set a
     // descriptor with *unaltered* variables as the fragment owner.
-    // This is a hack that allows us to preserve exisiting (broken)
+    // This is a hack that allows us to preserve existing (broken)
     // behavior of RelayModern containers while using fragment ownership
     // to propagate variables instead of Context.
     // For more details, see the summary of D13999308
@@ -331,6 +342,7 @@ class SelectorResolver {
   _onChange = (snapshot: Snapshot): void => {
     this._data = snapshot.data;
     this._isMissingData = snapshot.isMissingData;
+    this._missingRequiredFields = snapshot.missingRequiredFields;
     this._callback();
   };
 }

package/store/RelayModernOperationDescriptor.js.flow

@@ -23,7 +23,7 @@ const {
 const {ROOT_ID} = require('./RelayStoreUtils');
 
 import type {ConcreteRequest} from '../util/RelayConcreteNode';
-import type {DataID, Variables} from '../util/RelayRuntimeTypes';
+import type {CacheConfig, DataID, Variables} from '../util/RelayRuntimeTypes';
 import type {OperationDescriptor, RequestDescriptor} from './RelayStoreTypes';
 
 /**
@@ -35,6 +35,7 @@ import type {OperationDescriptor, RequestDescriptor} from './RelayStoreTypes';
 function createOperationDescriptor(
   request: ConcreteRequest,
   variables: Variables,
+  cacheConfig?: ?CacheConfig,
   dataID?: DataID = ROOT_ID,
 ): OperationDescriptor {
   const operation = request.operation;
@@ -42,6 +43,7 @@ function createOperationDescriptor(
   const requestDescriptor = createRequestDescriptor(
     request,
     operationVariables,
+    cacheConfig,
   );
   const operationDescriptor = {
     fragment: createReaderSelector(
@@ -68,11 +70,13 @@ function createOperationDescriptor(
 function createRequestDescriptor(
   request: ConcreteRequest,
   variables: Variables,
+  cacheConfig?: ?CacheConfig,
 ): RequestDescriptor {
   const requestDescriptor = {
     identifier: getRequestIdentifier(request.params, variables),
     node: request,
     variables: variables,
+    cacheConfig: cacheConfig,
   };
   if (__DEV__) {
     deepFreeze(variables);