relay-runtime 0.0.0-main-c3ad9027 → 0.0.0-main-74926b6f

package/store/RelayModernSelector.js.flow

@@ -16,6 +16,7 @@ import type {NormalizationSelectableNode} from '../util/NormalizationNode';
 import type {ReaderFragment} from '../util/ReaderNode';
 import type {DataID, Variables} from '../util/RelayRuntimeTypes';
 import type {
+  ClientEdgeTraversalPath,
   NormalizationSelector,
   PluralReaderSelector,
   ReaderSelector,
@@ -25,6 +26,7 @@ import type {
 
 const {getFragmentVariables} = require('./RelayConcreteVariables');
 const {
+  CLIENT_EDGE_TRAVERSAL_PATH,
   FRAGMENT_OWNER_KEY,
   FRAGMENTS_KEY,
   ID_KEY,
@@ -79,6 +81,7 @@ function getSingularSelector(
   const mixedOwner = item[FRAGMENT_OWNER_KEY];
   const isWithinUnmatchedTypeRefinement =
     item[IS_WITHIN_UNMATCHED_TYPE_REFINEMENT] === true;
+  const mixedClientEdgeTraversalPath = item[CLIENT_EDGE_TRAVERSAL_PATH];
   if (
     typeof dataID === 'string' &&
     typeof fragments === 'object' &&
@@ -86,22 +89,28 @@ function getSingularSelector(
     typeof fragments[fragment.name] === 'object' &&
     fragments[fragment.name] !== null &&
     typeof mixedOwner === 'object' &&
-    mixedOwner !== null
+    mixedOwner !== null &&
+    (mixedClientEdgeTraversalPath == null ||
+      Array.isArray(mixedClientEdgeTraversalPath))
   ) {
     const owner: RequestDescriptor = (mixedOwner: $FlowFixMe);
-    const argumentVariables = fragments[fragment.name];
+    const clientEdgeTraversalPath: ?ClientEdgeTraversalPath =
+      (mixedClientEdgeTraversalPath: $FlowFixMe);
 
+    const argumentVariables = fragments[fragment.name];
     const fragmentVariables = getFragmentVariables(
       fragment,
       owner.variables,
       argumentVariables,
     );
+
     return createReaderSelector(
       fragment,
       dataID,
       fragmentVariables,
       owner,
       isWithinUnmatchedTypeRefinement,
+      clientEdgeTraversalPath,
     );
   }
 
@@ -418,11 +427,13 @@ function createReaderSelector(
   variables: Variables,
   request: RequestDescriptor,
   isWithinUnmatchedTypeRefinement: boolean = false,
+  clientEdgeTraversalPath: ?ClientEdgeTraversalPath,
 ): SingularReaderSelector {
   return {
     kind: 'SingularReaderSelector',
     dataID,
     isWithinUnmatchedTypeRefinement,
+    clientEdgeTraversalPath: clientEdgeTraversalPath ?? null,
     node: fragment,
     variables,
     owner: request,

package/store/RelayReader.js.flow

@@ -14,6 +14,7 @@
 
 import type {
   ReaderActorChange,
+  ReaderClientEdge,
   ReaderFlightField,
   ReaderFragment,
   ReaderFragmentSpread,
@@ -28,7 +29,9 @@ import type {
 } from '../util/ReaderNode';
 import type {DataID, Variables} from '../util/RelayRuntimeTypes';
 import type {
+  ClientEdgeTraversalInfo,
   DataIDSet,
+  MissingClientEdgeRequestInfo,
   MissingRequiredFields,
   Record,
   RecordSource,
@@ -41,6 +44,7 @@ import type {ResolverCache} from './ResolverCache';
 
 const {
   ACTOR_CHANGE,
+  CLIENT_EDGE,
   CLIENT_EXTENSION,
   CONDITION,
   DEFER,
@@ -60,6 +64,7 @@ const ClientID = require('./ClientID');
 const RelayModernRecord = require('./RelayModernRecord');
 const {getReactFlightClientResponse} = require('./RelayStoreReactFlightUtils');
 const {
+  CLIENT_EDGE_TRAVERSAL_PATH,
   FRAGMENT_OWNER_KEY,
   FRAGMENT_PROP_NAME_KEY,
   FRAGMENTS_KEY,
@@ -93,7 +98,9 @@ function read(
  * @private
  */
 class RelayReader {
+  _clientEdgeTraversalPath: Array<ClientEdgeTraversalInfo | null>;
   _isMissingData: boolean;
+  _missingClientEdges: Array<MissingClientEdgeRequestInfo>;
   _isWithinUnmatchedTypeRefinement: boolean;
   _missingRequiredFields: ?MissingRequiredFields;
   _owner: RequestDescriptor;
@@ -108,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;
@@ -182,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,
@@ -197,7 +234,7 @@ class RelayReader {
     this._seenRecords.add(dataID);
     if (record == null) {
       if (record === undefined) {
-        this._isMissingData = true;
+        this._markDataAsMissing();
       }
       return record;
     }
@@ -344,7 +381,7 @@ class RelayReader {
               this._isMissingData = parentIsMissingData;
             } else if (implementsInterface == null) {
               // Don't know if the type implements the interface or not
-              this._isMissingData = true;
+              this._markDataAsMissing();
             }
           }
           break;
@@ -372,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;
           }
@@ -404,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(
@@ -450,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(
@@ -523,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(
@@ -539,7 +653,7 @@ class RelayReader {
     if (reactFlightClientResponseRecordID == null) {
       data[applicationName] = reactFlightClientResponseRecordID;
       if (reactFlightClientResponseRecordID === undefined) {
-        this._isMissingData = true;
+        this._markDataAsMissing();
       }
       return reactFlightClientResponseRecordID;
     }
@@ -550,7 +664,7 @@ class RelayReader {
     if (reactFlightClientResponseRecord == null) {
       data[applicationName] = reactFlightClientResponseRecord;
       if (reactFlightClientResponseRecord === undefined) {
-        this._isMissingData = true;
+        this._markDataAsMissing();
       }
       return reactFlightClientResponseRecord;
     }
@@ -570,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;
@@ -587,7 +701,7 @@ class RelayReader {
     if (linkedID == null) {
       data[applicationName] = linkedID;
       if (linkedID === undefined) {
-        this._isMissingData = true;
+        this._markDataAsMissing();
       }
       return linkedID;
     }
@@ -622,7 +736,7 @@ class RelayReader {
     if (externalRef == null) {
       data[applicationName] = externalRef;
       if (externalRef === undefined) {
-        this._isMissingData = true;
+        this._markDataAsMissing();
       }
       return data[applicationName];
     }
@@ -655,7 +769,7 @@ class RelayReader {
     if (linkedIDs == null) {
       data[applicationName] = linkedIDs;
       if (linkedIDs === undefined) {
-        this._isMissingData = true;
+        this._markDataAsMissing();
       }
       return linkedIDs;
     }
@@ -673,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;
@@ -711,7 +825,7 @@ class RelayReader {
     const component = RelayModernRecord.getValue(record, componentKey);
     if (component == null) {
       if (component === undefined) {
-        this._isMissingData = true;
+        this._markDataAsMissing();
       }
       return;
     }
@@ -758,6 +872,17 @@ class RelayReader {
     data[FRAGMENT_OWNER_KEY] = this._owner;
     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/RelayStoreSubscriptions.js.flow

@@ -101,6 +101,7 @@ class RelayStoreSubscriptions implements StoreSubscriptions {
         subscription.snapshot = {
           data: subscription.snapshot.data,
           isMissingData: backup.isMissingData,
+          missingClientEdges: backup.missingClientEdges,
           seenRecords: backup.seenRecords,
           selector: backup.selector,
           missingRequiredFields: backup.missingRequiredFields,
@@ -162,6 +163,7 @@ class RelayStoreSubscriptions implements StoreSubscriptions {
     nextSnapshot = ({
       data: nextData,
       isMissingData: nextSnapshot.isMissingData,
+      missingClientEdges: nextSnapshot.missingClientEdges,
       seenRecords: nextSnapshot.seenRecords,
       selector: nextSnapshot.selector,
       missingRequiredFields: nextSnapshot.missingRequiredFields,

package/store/RelayStoreTypes.js.flow

@@ -35,7 +35,7 @@ import type {
   NormalizationScalarField,
   NormalizationSelectableNode,
 } from '../util/NormalizationNode';
-import type {ReaderFragment} from '../util/ReaderNode';
+import type {ReaderClientEdge, ReaderFragment} from '../util/ReaderNode';
 import type {
   ConcreteRequest,
   RequestParameters,
@@ -82,6 +82,7 @@ export type SingularReaderSelector = {|
   +kind: 'SingularReaderSelector',
   +dataID: DataID,
   +isWithinUnmatchedTypeRefinement: boolean,
+  +clientEdgeTraversalPath: ClientEdgeTraversalPath | null,
   +node: ReaderFragment,
   +owner: RequestDescriptor,
   +variables: Variables,
@@ -120,12 +121,26 @@ export type MissingRequiredFields =
   | {|action: 'THROW', field: MissingRequiredField|}
   | {|action: 'LOG', fields: Array<MissingRequiredField>|};
 
+export type ClientEdgeTraversalInfo = {|
+  +readerClientEdge: ReaderClientEdge,
+  +clientEdgeDestinationID: DataID,
+|};
+
+export type ClientEdgeTraversalPath =
+  $ReadOnlyArray<ClientEdgeTraversalInfo | null>;
+
+export type MissingClientEdgeRequestInfo = {|
+  +request: ConcreteRequest,
+  +clientEdgeDestinationID: DataID,
+|};
+
 /**
  * A representation of a selector and its results at a particular point in time.
  */
 export type Snapshot = {|
   +data: ?SelectorData,
   +isMissingData: boolean,
+  +missingClientEdges: null | $ReadOnlyArray<MissingClientEdgeRequestInfo>,
   +seenRecords: DataIDSet,
   +selector: SingularReaderSelector,
   +missingRequiredFields: ?MissingRequiredFields,

package/store/RelayStoreUtils.js.flow

@@ -202,6 +202,7 @@ function getModuleOperationKey(documentName: string): string {
  */
 const RelayStoreUtils = {
   ACTOR_IDENTIFIER_KEY: '__actorIdentifier',
+  CLIENT_EDGE_TRAVERSAL_PATH: '__clientEdgeTraversalPath',
   FRAGMENTS_KEY: '__fragments',
   FRAGMENT_OWNER_KEY: '__fragmentOwner',
   FRAGMENT_PROP_NAME_KEY: '__fragmentPropName',

package/util/ReaderNode.js.flow

@@ -232,8 +232,16 @@ export type ReaderRelayResolver = {|
   }) => mixed,
 |};
 
+export type ReaderClientEdge = {|
+  +kind: 'ClientEdge',
+  +linkedField: ReaderLinkedField,
+  +operation: ConcreteRequest,
+  +backingField: ReaderRelayResolver | ReaderClientExtension,
+|};
+
 export type ReaderSelection =
   | ReaderCondition
+  | ReaderClientEdge
   | ReaderClientExtension
   | ReaderDefer
   | ReaderField

package/util/RelayConcreteNode.js.flow

@@ -70,6 +70,7 @@ const RelayConcreteNode = {
   ACTOR_CHANGE: 'ActorChange',
   CONDITION: 'Condition',
   CLIENT_COMPONENT: 'ClientComponent',
+  CLIENT_EDGE: 'ClientEdge',
   CLIENT_EXTENSION: 'ClientExtension',
   DEFER: 'Defer',
   CONNECTION: 'Connection',

package/util/RelayFeatureFlags.js.flow

@@ -14,8 +14,9 @@
 
 import type {Disposable} from '../util/RelayRuntimeTypes';
 
-type FeatureFlags = {|
+export type FeatureFlags = {|
   DELAY_CLEANUP_OF_PENDING_PRELOAD_QUERIES: boolean,
+  ENABLE_CLIENT_EDGES: boolean,
   ENABLE_VARIABLE_CONNECTION_KEY: boolean,
   ENABLE_PARTIAL_RENDERING_DEFAULT: boolean,
   ENABLE_REACT_FLIGHT_COMPONENT_FIELD: boolean,
@@ -30,12 +31,14 @@ type FeatureFlags = {|
   ENABLE_CONTAINERS_SUBSCRIBE_ON_COMMIT: boolean,
   ENABLE_QUERY_RENDERER_OFFSCREEN_SUPPORT: boolean,
   MAX_DATA_ID_LENGTH: ?number,
+  REFACTOR_SUSPENSE_RESOURCE: boolean,
   STRING_INTERN_LEVEL: number,
   USE_REACT_CACHE: boolean,
 |};
 
 const RelayFeatureFlags: FeatureFlags = {
   DELAY_CLEANUP_OF_PENDING_PRELOAD_QUERIES: false,
+  ENABLE_CLIENT_EDGES: false,
   ENABLE_VARIABLE_CONNECTION_KEY: false,
   ENABLE_PARTIAL_RENDERING_DEFAULT: true,
   ENABLE_REACT_FLIGHT_COMPONENT_FIELD: false,
@@ -50,6 +53,7 @@ const RelayFeatureFlags: FeatureFlags = {
   ENABLE_CONTAINERS_SUBSCRIBE_ON_COMMIT: false,
   ENABLE_QUERY_RENDERER_OFFSCREEN_SUPPORT: false,
   MAX_DATA_ID_LENGTH: null,
+  REFACTOR_SUSPENSE_RESOURCE: true,
   STRING_INTERN_LEVEL: 0,
   USE_REACT_CACHE: false,
 };