relay-runtime 12.0.0 → 13.0.0-rc.0

package/store/RelayReader.js.flow

@@ -12,14 +12,39 @@
 
 'use strict';
 
-const ClientID = require('./ClientID');
-const RelayFeatureFlags = require('../util/RelayFeatureFlags');
-const RelayModernRecord = require('./RelayModernRecord');
-
-const invariant = require('invariant');
+import type {
+  ReaderActorChange,
+  ReaderClientEdge,
+  ReaderFlightField,
+  ReaderFragment,
+  ReaderFragmentSpread,
+  ReaderInlineDataFragmentSpread,
+  ReaderLinkedField,
+  ReaderModuleImport,
+  ReaderNode,
+  ReaderRelayResolver,
+  ReaderRequiredField,
+  ReaderScalarField,
+  ReaderSelection,
+} from '../util/ReaderNode';
+import type {DataID, Variables} from '../util/RelayRuntimeTypes';
+import type {
+  ClientEdgeTraversalInfo,
+  DataIDSet,
+  MissingClientEdgeRequestInfo,
+  MissingRequiredFields,
+  Record,
+  RecordSource,
+  RequestDescriptor,
+  SelectorData,
+  SingularReaderSelector,
+  Snapshot,
+} from './RelayStoreTypes';
+import type {ResolverCache} from './ResolverCache';
 
 const {
   ACTOR_CHANGE,
+  CLIENT_EDGE,
   CLIENT_EXTENSION,
   CONDITION,
   DEFER,
@@ -29,54 +54,32 @@ const {
   INLINE_FRAGMENT,
   LINKED_FIELD,
   MODULE_IMPORT,
-  REQUIRED_FIELD,
   RELAY_RESOLVER,
+  REQUIRED_FIELD,
   SCALAR_FIELD,
   STREAM,
 } = require('../util/RelayConcreteNode');
+const RelayFeatureFlags = require('../util/RelayFeatureFlags');
+const ClientID = require('./ClientID');
+const RelayModernRecord = require('./RelayModernRecord');
 const {getReactFlightClientResponse} = require('./RelayStoreReactFlightUtils');
 const {
-  FRAGMENTS_KEY,
+  CLIENT_EDGE_TRAVERSAL_PATH,
   FRAGMENT_OWNER_KEY,
   FRAGMENT_PROP_NAME_KEY,
+  FRAGMENTS_KEY,
   ID_KEY,
   IS_WITHIN_UNMATCHED_TYPE_REFINEMENT,
   MODULE_COMPONENT_KEY,
   ROOT_ID,
   getArgumentValues,
-  getStorageKey,
   getModuleComponentKey,
+  getStorageKey,
 } = require('./RelayStoreUtils');
 const {NoopResolverCache} = require('./ResolverCache');
 const {withResolverContext} = require('./ResolverFragments');
 const {generateTypeID} = require('./TypeID');
-
-import type {
-  ReaderFlightField,
-  ReaderFragment,
-  ReaderFragmentSpread,
-  ReaderInlineDataFragmentSpread,
-  ReaderLinkedField,
-  ReaderActorChange,
-  ReaderModuleImport,
-  ReaderNode,
-  ReaderRelayResolver,
-  ReaderRequiredField,
-  ReaderScalarField,
-  ReaderSelection,
-} from '../util/ReaderNode';
-import type {DataID, Variables} from '../util/RelayRuntimeTypes';
-import type {
-  Record,
-  RecordSource,
-  RequestDescriptor,
-  SelectorData,
-  SingularReaderSelector,
-  Snapshot,
-  MissingRequiredFields,
-  DataIDSet,
-} from './RelayStoreTypes';
-import type {ResolverCache} from './ResolverCache';
+const invariant = require('invariant');
 
 function read(
   recordSource: RecordSource,
@@ -95,7 +98,9 @@ function read(
  * @private
  */
 class RelayReader {
+  _clientEdgeTraversalPath: Array<ClientEdgeTraversalInfo | null>;
   _isMissingData: boolean;
+  _missingClientEdges: Array<MissingClientEdgeRequestInfo>;
   _isWithinUnmatchedTypeRefinement: boolean;
   _missingRequiredFields: ?MissingRequiredFields;
   _owner: RequestDescriptor;
@@ -110,6 +115,12 @@ class RelayReader {
     selector: SingularReaderSelector,
     resolverCache: ResolverCache,
   ) {
+    this._clientEdgeTraversalPath =
+      RelayFeatureFlags.ENABLE_CLIENT_EDGES &&
+      selector.clientEdgeTraversalPath?.length
+        ? [...selector.clientEdgeTraversalPath]
+        : [];
+    this._missingClientEdges = [];
     this._isMissingData = false;
     this._isWithinUnmatchedTypeRefinement = false;
     this._missingRequiredFields = null;
@@ -184,12 +195,36 @@ class RelayReader {
     return {
       data,
       isMissingData: this._isMissingData && isDataExpectedToBePresent,
+      missingClientEdges:
+        RelayFeatureFlags.ENABLE_CLIENT_EDGES && this._missingClientEdges.length
+          ? this._missingClientEdges
+          : null,
       seenRecords: this._seenRecords,
       selector: this._selector,
       missingRequiredFields: this._missingRequiredFields,
     };
   }
 
+  _markDataAsMissing(): void {
+    this._isMissingData = true;
+    if (
+      RelayFeatureFlags.ENABLE_CLIENT_EDGES &&
+      this._clientEdgeTraversalPath.length
+    ) {
+      const top =
+        this._clientEdgeTraversalPath[this._clientEdgeTraversalPath.length - 1];
+      // Top can be null if we've traversed past a client edge into an ordinary
+      // client extension field; we never want to fetch in response to missing
+      // data off of a client extension field.
+      if (top !== null) {
+        this._missingClientEdges.push({
+          request: top.readerClientEdge.operation,
+          clientEdgeDestinationID: top.clientEdgeDestinationID,
+        });
+      }
+    }
+  }
+
   _traverse(
     node: ReaderNode,
     dataID: DataID,
@@ -199,7 +234,7 @@ class RelayReader {
     this._seenRecords.add(dataID);
     if (record == null) {
       if (record === undefined) {
-        this._isMissingData = true;
+        this._markDataAsMissing();
       }
       return record;
     }
@@ -218,7 +253,6 @@ class RelayReader {
       'RelayReader(): Undefined variable `%s`.',
       name,
     );
-    // $FlowFixMe[cannot-write]
     return this._variables[name];
   }
 
@@ -325,8 +359,8 @@ class RelayReader {
 
             // store flags to reset after reading
             const parentIsMissingData = this._isMissingData;
-            const parentIsWithinUnmatchedTypeRefinement = this
-              ._isWithinUnmatchedTypeRefinement;
+            const parentIsWithinUnmatchedTypeRefinement =
+              this._isWithinUnmatchedTypeRefinement;
 
             const typeName = RelayModernRecord.getType(record);
             const typeID = generateTypeID(typeName);
@@ -339,14 +373,15 @@ class RelayReader {
               parentIsWithinUnmatchedTypeRefinement ||
               implementsInterface === false;
             this._traverseSelections(selection.selections, record, data);
-            this._isWithinUnmatchedTypeRefinement = parentIsWithinUnmatchedTypeRefinement;
+            this._isWithinUnmatchedTypeRefinement =
+              parentIsWithinUnmatchedTypeRefinement;
 
             if (implementsInterface === false) {
               // Type known to not implement the interface, no data expected
               this._isMissingData = parentIsMissingData;
             } else if (implementsInterface == null) {
               // Don't know if the type implements the interface or not
-              this._isMissingData = true;
+              this._markDataAsMissing();
             }
           }
           break;
@@ -374,12 +409,24 @@ class RelayReader {
         case DEFER:
         case CLIENT_EXTENSION: {
           const isMissingData = this._isMissingData;
+          const alreadyMissingClientEdges = this._missingClientEdges.length;
+          if (RelayFeatureFlags.ENABLE_CLIENT_EDGES) {
+            this._clientEdgeTraversalPath.push(null);
+          }
           const hasExpectedData = this._traverseSelections(
             selection.selections,
             record,
             data,
           );
-          this._isMissingData = isMissingData;
+          // The only case where we want to suspend due to missing data off of
+          // a client extension is if we reached a client edge that we might be
+          // able to fetch:
+          this._isMissingData =
+            isMissingData ||
+            this._missingClientEdges.length > alreadyMissingClientEdges;
+          if (RelayFeatureFlags.ENABLE_CLIENT_EDGES) {
+            this._clientEdgeTraversalPath.pop();
+          }
           if (!hasExpectedData) {
             return false;
           }
@@ -406,6 +453,13 @@ class RelayReader {
         case ACTOR_CHANGE:
           this._readActorChange(selection, record, data);
           break;
+        case CLIENT_EDGE:
+          if (RelayFeatureFlags.ENABLE_CLIENT_EDGES) {
+            this._readClientEdge(selection, record, data);
+          } else {
+            throw new Error('Client edges are not yet supported.');
+          }
+          break;
         default:
           (selection: empty);
           invariant(
@@ -452,7 +506,7 @@ class RelayReader {
     field: ReaderRelayResolver,
     record: Record,
     data: SelectorData,
-  ): ?mixed {
+  ): void {
     const {resolverModule, fragment} = field;
     const storageKey = getStorageKey(field, this._variables);
     const resolverID = ClientID.generateClientID(
@@ -525,8 +579,66 @@ class RelayReader {
     if (seenRecord != null) {
       this._seenRecords.add(seenRecord);
     }
-    data[storageKey] = result;
-    return result;
+
+    const applicationName = field.alias ?? field.name;
+    data[applicationName] = result;
+  }
+
+  _readClientEdge(
+    field: ReaderClientEdge,
+    record: Record,
+    data: SelectorData,
+  ): void {
+    const backingField = field.backingField;
+
+    // Because ReaderClientExtension doesn't have `alias` or `name` and so I don't know
+    // how to get its applicationName or storageKey yet:
+    invariant(
+      backingField.kind !== 'ClientExtension',
+      'Client extension client edges are not yet implemented.',
+    );
+
+    const applicationName = backingField.alias ?? backingField.name;
+
+    const backingFieldData = {};
+    this._traverseSelections([backingField], record, backingFieldData);
+    const destinationDataID = backingFieldData[applicationName];
+
+    if (destinationDataID == null) {
+      data[applicationName] = destinationDataID;
+      return;
+    }
+
+    invariant(
+      typeof destinationDataID === 'string',
+      'Plural client edges not are yet implemented',
+    ); // FIXME support plural
+
+    // Not wrapping the push/pop in a try/finally because if we throw, the
+    // Reader object is not usable after that anyway.
+    this._clientEdgeTraversalPath.push({
+      readerClientEdge: field,
+      clientEdgeDestinationID: destinationDataID,
+    });
+
+    const prevData = data[applicationName];
+    invariant(
+      prevData == null || typeof prevData === 'object',
+      'RelayReader(): Expected data for field `%s` on record `%s` ' +
+        'to be an object, got `%s`.',
+      applicationName,
+      RelayModernRecord.getDataID(record),
+      prevData,
+    );
+    const value = this._traverse(
+      field.linkedField,
+      destinationDataID,
+      // $FlowFixMe[incompatible-variance]
+      prevData,
+    );
+    data[applicationName] = value;
+
+    this._clientEdgeTraversalPath.pop();
   }
 
   _readFlightField(
@@ -536,14 +648,12 @@ class RelayReader {
   ): ?mixed {
     const applicationName = field.alias ?? field.name;
     const storageKey = getStorageKey(field, this._variables);
-    const reactFlightClientResponseRecordID = RelayModernRecord.getLinkedRecordID(
-      record,
-      storageKey,
-    );
+    const reactFlightClientResponseRecordID =
+      RelayModernRecord.getLinkedRecordID(record, storageKey);
     if (reactFlightClientResponseRecordID == null) {
       data[applicationName] = reactFlightClientResponseRecordID;
       if (reactFlightClientResponseRecordID === undefined) {
-        this._isMissingData = true;
+        this._markDataAsMissing();
       }
       return reactFlightClientResponseRecordID;
     }
@@ -554,7 +664,7 @@ class RelayReader {
     if (reactFlightClientResponseRecord == null) {
       data[applicationName] = reactFlightClientResponseRecord;
       if (reactFlightClientResponseRecord === undefined) {
-        this._isMissingData = true;
+        this._markDataAsMissing();
       }
       return reactFlightClientResponseRecord;
     }
@@ -574,7 +684,7 @@ class RelayReader {
     const storageKey = getStorageKey(field, this._variables);
     const value = RelayModernRecord.getValue(record, storageKey);
     if (value === undefined) {
-      this._isMissingData = true;
+      this._markDataAsMissing();
     }
     data[applicationName] = value;
     return value;
@@ -591,7 +701,7 @@ class RelayReader {
     if (linkedID == null) {
       data[applicationName] = linkedID;
       if (linkedID === undefined) {
-        this._isMissingData = true;
+        this._markDataAsMissing();
       }
       return linkedID;
     }
@@ -626,7 +736,7 @@ class RelayReader {
     if (externalRef == null) {
       data[applicationName] = externalRef;
       if (externalRef === undefined) {
-        this._isMissingData = true;
+        this._markDataAsMissing();
       }
       return data[applicationName];
     }
@@ -659,7 +769,7 @@ class RelayReader {
     if (linkedIDs == null) {
       data[applicationName] = linkedIDs;
       if (linkedIDs === undefined) {
-        this._isMissingData = true;
+        this._markDataAsMissing();
       }
       return linkedIDs;
     }
@@ -677,7 +787,7 @@ class RelayReader {
     linkedIDs.forEach((linkedID, nextIndex) => {
       if (linkedID == null) {
         if (linkedID === undefined) {
-          this._isMissingData = true;
+          this._markDataAsMissing();
         }
         // $FlowFixMe[cannot-write]
         linkedArray[nextIndex] = linkedID;
@@ -715,7 +825,7 @@ class RelayReader {
     const component = RelayModernRecord.getValue(record, componentKey);
     if (component == null) {
       if (component === undefined) {
-        this._isMissingData = true;
+        this._markDataAsMissing();
       }
       return;
     }
@@ -760,9 +870,19 @@ class RelayReader {
       ? getArgumentValues(fragmentSpread.args, this._variables)
       : {};
     data[FRAGMENT_OWNER_KEY] = this._owner;
-    data[
-      IS_WITHIN_UNMATCHED_TYPE_REFINEMENT
-    ] = this._isWithinUnmatchedTypeRefinement;
+    data[IS_WITHIN_UNMATCHED_TYPE_REFINEMENT] =
+      this._isWithinUnmatchedTypeRefinement;
+
+    if (RelayFeatureFlags.ENABLE_CLIENT_EDGES) {
+      if (
+        this._clientEdgeTraversalPath.length > 0 &&
+        this._clientEdgeTraversalPath[
+          this._clientEdgeTraversalPath.length - 1
+        ] !== null
+      ) {
+        data[CLIENT_EDGE_TRAVERSAL_PATH] = [...this._clientEdgeTraversalPath];
+      }
+    }
   }
 
   _createInlineDataOrResolverFragmentPointer(

package/store/RelayRecordSource.js.flow

@@ -12,8 +12,6 @@
 
 'use strict';
 
-const RelayRecordState = require('./RelayRecordState');
-
 import type {DataID} from '../util/RelayRuntimeTypes';
 import type {RecordState} from './RelayRecordState';
 import type {
@@ -22,6 +20,8 @@ import type {
   RecordObjectMap,
 } from './RelayStoreTypes';
 
+const RelayRecordState = require('./RelayRecordState');
+
 const {EXISTENT, NONEXISTENT, UNKNOWN} = RelayRecordState;
 
 /**

package/store/RelayReferenceMarker.js.flow

@@ -12,19 +12,6 @@
 
 'use strict';
 
-const RelayConcreteNode = require('../util/RelayConcreteNode');
-const RelayFeatureFlags = require('../util/RelayFeatureFlags');
-const RelayModernRecord = require('./RelayModernRecord');
-const RelayStoreReactFlightUtils = require('./RelayStoreReactFlightUtils');
-const RelayStoreUtils = require('./RelayStoreUtils');
-
-const cloneRelayHandleSourceField = require('./cloneRelayHandleSourceField');
-const getOperation = require('../util/getOperation');
-const invariant = require('invariant');
-
-const {getLocalVariables} = require('./RelayConcreteVariables');
-const {generateTypeID} = require('./TypeID');
-
 import type {
   NormalizationFlightField,
   NormalizationLinkedField,
@@ -37,11 +24,22 @@ import type {
   DataIDSet,
   NormalizationSelector,
   OperationLoader,
+  ReactFlightReachableExecutableDefinitions,
   Record,
   RecordSource,
-  ReactFlightReachableExecutableDefinitions,
 } from './RelayStoreTypes';
 
+const getOperation = require('../util/getOperation');
+const RelayConcreteNode = require('../util/RelayConcreteNode');
+const RelayFeatureFlags = require('../util/RelayFeatureFlags');
+const cloneRelayHandleSourceField = require('./cloneRelayHandleSourceField');
+const {getLocalVariables} = require('./RelayConcreteVariables');
+const RelayModernRecord = require('./RelayModernRecord');
+const RelayStoreReactFlightUtils = require('./RelayStoreReactFlightUtils');
+const RelayStoreUtils = require('./RelayStoreUtils');
+const {generateTypeID} = require('./TypeID');
+const invariant = require('invariant');
+
 const {
   ACTOR_CHANGE,
   CONDITION,
@@ -127,7 +125,6 @@ class RelayReferenceMarker {
       'RelayReferenceMarker(): Undefined variable `%s`.',
       name,
     );
-    // $FlowFixMe[cannot-write]
     return this._variables[name];
   }
 

package/store/RelayResponseNormalizer.js.flow

@@ -12,12 +12,31 @@
 
 'use strict';
 
-const RelayFeatureFlags = require('../util/RelayFeatureFlags');
-const RelayModernRecord = require('./RelayModernRecord');
-
-const areEqual = require('areEqual');
-const invariant = require('invariant');
-const warning = require('warning');
+import type {ActorIdentifier} from '../multi-actor-environment/ActorIdentifier';
+import type {PayloadData} from '../network/RelayNetworkTypes';
+import type {
+  NormalizationActorChange,
+  NormalizationDefer,
+  NormalizationFlightField,
+  NormalizationLinkedField,
+  NormalizationModuleImport,
+  NormalizationNode,
+  NormalizationScalarField,
+  NormalizationStream,
+} from '../util/NormalizationNode';
+import type {DataID, Variables} from '../util/RelayRuntimeTypes';
+import type {
+  FollowupPayload,
+  HandleFieldPayload,
+  IncrementalDataPlaceholder,
+  MutableRecordSource,
+  NormalizationSelector,
+  ReactFlightPayloadDeserializer,
+  ReactFlightReachableExecutableDefinitions,
+  ReactFlightServerErrorHandler,
+  Record,
+  RelayResponsePayload,
+} from './RelayStoreTypes';
 
 const {
   ACTOR_IDENTIFIER_FIELD_NAME,
@@ -25,9 +44,9 @@ const {
 } = require('../multi-actor-environment/ActorUtils');
 const {
   ACTOR_CHANGE,
-  CONDITION,
   CLIENT_COMPONENT,
   CLIENT_EXTENSION,
+  CONDITION,
   DEFER,
   FLIGHT_FIELD,
   FRAGMENT_SPREAD,
@@ -40,52 +59,31 @@ const {
   STREAM,
   TYPE_DISCRIMINATOR,
 } = require('../util/RelayConcreteNode');
+const RelayFeatureFlags = require('../util/RelayFeatureFlags');
 const {generateClientID, isClientID} = require('./ClientID');
 const {getLocalVariables} = require('./RelayConcreteVariables');
+const RelayModernRecord = require('./RelayModernRecord');
 const {createNormalizationSelector} = require('./RelayModernSelector');
 const {
-  refineToReactFlightPayloadData,
   REACT_FLIGHT_EXECUTABLE_DEFINITIONS_STORAGE_KEY,
   REACT_FLIGHT_TREE_STORAGE_KEY,
   REACT_FLIGHT_TYPE_NAME,
+  refineToReactFlightPayloadData,
 } = require('./RelayStoreReactFlightUtils');
 const {
+  ROOT_ID,
+  ROOT_TYPE,
+  TYPENAME_KEY,
   getArgumentValues,
   getHandleStorageKey,
   getModuleComponentKey,
   getModuleOperationKey,
   getStorageKey,
-  TYPENAME_KEY,
-  ROOT_ID,
-  ROOT_TYPE,
 } = require('./RelayStoreUtils');
-const {generateTypeID, TYPE_SCHEMA_TYPE} = require('./TypeID');
-
-import type {ActorIdentifier} from '../multi-actor-environment/ActorIdentifier';
-import type {PayloadData} from '../network/RelayNetworkTypes';
-import type {
-  NormalizationActorChange,
-  NormalizationDefer,
-  NormalizationFlightField,
-  NormalizationLinkedField,
-  NormalizationModuleImport,
-  NormalizationNode,
-  NormalizationScalarField,
-  NormalizationStream,
-} from '../util/NormalizationNode';
-import type {DataID, Variables} from '../util/RelayRuntimeTypes';
-import type {
-  FollowupPayload,
-  HandleFieldPayload,
-  IncrementalDataPlaceholder,
-  MutableRecordSource,
-  NormalizationSelector,
-  ReactFlightPayloadDeserializer,
-  ReactFlightReachableExecutableDefinitions,
-  ReactFlightServerErrorHandler,
-  Record,
-  RelayResponsePayload,
-} from './RelayStoreTypes';
+const {TYPE_SCHEMA_TYPE, generateTypeID} = require('./TypeID');
+const areEqual = require('areEqual');
+const invariant = require('invariant');
+const warning = require('warning');
 
 export type GetDataID = (
   fieldValue: interface {[string]: mixed},
@@ -192,7 +190,6 @@ class RelayResponseNormalizer {
       'RelayResponseNormalizer(): Undefined variable `%s`.',
       name,
     );
-    // $FlowFixMe[cannot-write]
     return this._variables[name];
   }
 
@@ -508,7 +505,11 @@ class RelayResponseNormalizer {
           this._validateConflictingFieldsWithIdenticalId(
             record,
             storageKey,
-            fieldValue,
+            // When using `treatMissingFieldsAsNull` the conflicting validation raises a false positive
+            // because the value is set using `null` but validated using `fieldValue` which at this point
+            // will be `undefined`.
+            // Setting this to `null` matches the value that we actually set to the `fieldValue`.
+            null,
           );
         }
       }
@@ -765,7 +766,8 @@ class RelayResponseNormalizer {
       reactFlightClientResponse,
     );
 
-    const reachableExecutableDefinitions: Array<ReactFlightReachableExecutableDefinitions> = [];
+    const reachableExecutableDefinitions: Array<ReactFlightReachableExecutableDefinitions> =
+      [];
     for (const query of reactFlightPayload.queries) {
       if (query.response.data != null) {
         this._followupPayloads.push({

package/store/RelayStoreReactFlightUtils.js.flow

@@ -12,13 +12,12 @@
 
 'use strict';
 
-const invariant = require('invariant');
-
-const {getType} = require('./RelayModernRecord');
-
 import type {ReactFlightPayloadData} from '../network/RelayNetworkTypes';
 import type {ReactFlightClientResponse, Record} from './RelayStoreTypes';
 
+const {getType} = require('./RelayModernRecord');
+const invariant = require('invariant');
+
 // Reachable (client) executable definitions encountered while server component
 // rendering
 const REACT_FLIGHT_EXECUTABLE_DEFINITIONS_STORAGE_KEY = 'executableDefinitions';