Handle variable update from new export variables

Author: jerelmiller

src/core/ObservableQuery.ts

@@ -1932,16 +1932,54 @@ Did you mean to call refetch(variables) instead of refetch({ variables })?`,
     },
     SubjectValue<TData, TVariables>
   > = filterMap((notification) => {
-    const { query, variables, meta } = notification;
+    const { query, meta } = notification;
 
     if (notification.source === "setResult") {
-      return { query, variables, result: notification.value, meta };
+      return {
+        query,
+        variables: this.variables,
+        result: notification.value,
+        meta,
+      };
     }
 
-    if (notification.kind === "C" || !isEqualQuery(notification, this)) {
+    if (notification.kind === "C") {
       return;
     }
 
+    const resolvedVariables =
+      "resolvedVariables" in notification ?
+        notification.resolvedVariables
+      : undefined;
+
+    // Usually we prefer to drop notifications that don't match this query
+    // but this breaks when used with `@export` queries that resolve variables
+    // after the request is initiated. `notification.resolvedVariables` gives us
+    // the variables the query actually resolved with during evaluation in
+    // QueryManager (which is the variables value after `@export` variables have
+    // been applied), but we need to update this query with those resolved
+    // variables maybe in the middle of a request (updating is handled below).
+    // When we update this.variables to the resolved variables, this causes
+    // isEqualQuery(notification, this) to fail for future notifications since
+    // the notification.variables holds the stale variables value. In this case,
+    // we want to allow the notification through only if the current variables
+    // value matches the resolved variables.
+    //
+    // Note: the check for matching resolved variables typically kicks in for
+    // multi-emission fetches (such as defer, or cache-and-network, etc).
+    if (!equal(resolvedVariables, this.variables)) {
+      if (!isEqualQuery(notification, this)) {
+        return;
+      }
+
+      if (resolvedVariables) {
+        this.options.variables = resolvedVariables as TVariables;
+        this.resubscribeCache();
+      }
+    }
+
+    const variables = this.variables;
+
     let result: ObservableQuery.Result<TData>;
     const previous = this.subject.getValue();
 
@@ -1964,7 +2002,11 @@ Did you mean to call refetch(variables) instead of refetch({ variables })?`,
       result =
         notification.kind === "E" ?
           ({
-            ...(isEqualQuery(previous, notification) ?
+            ...((
+              isEqualQuery(previous, notification) ||
+              (resolvedVariables &&
+                equal(resolvedVariables, previous.variables))
+            ) ?
               previous.result
             : { data: undefined, dataState: "empty", partial: true }),
             error: notification.error,

src/core/QueryManager.ts

@@ -1612,6 +1612,10 @@ export class QueryManager {
         return of({
           kind: "N",
           value: toResult(data),
+          // Always attach the variables used for this fetch so @export
+          // resolution can update ObservableQuery.options.variables and
+          // resubscribe the cache watch under the correct variable set.
+          resolvedVariables: variables,
           source: "cache",
         });
       };
@@ -1646,6 +1650,10 @@ export class QueryManager {
             (resolved): QueryNotification.FromCache<TData> => ({
               kind: "N",
               value: toResult(resolved.data || void 0),
+              // Always attach the variables used for this fetch so @export
+              // resolution can update ObservableQuery.options.variables and
+              // resubscribe the cache watch under the correct variable set.
+              resolvedVariables: variables,
               source: "cache",
             })
           )
@@ -1688,6 +1696,10 @@ export class QueryManager {
         map(
           (result): QueryNotification.FromNetwork<TData> => ({
             ...result,
+            // Always attach the variables used for this fetch so @export
+            // resolution can update ObservableQuery.options.variables and
+            // resubscribe the cache watch under the correct variable set.
+            resolvedVariables: variables,
             source: "network",
           })
         )

src/core/types.ts

@@ -385,10 +385,12 @@ export declare namespace QueryNotification {
   type FromNetwork<TData> = ObservableNotification<
     ObservableQuery.Result<TData>
   > & {
+    resolvedVariables?: OperationVariables;
     source: "network";
   };
 
   type FromCache<TData> = NextNotification<ObservableQuery.Result<TData>> & {
+    resolvedVariables?: OperationVariables;
     source: "cache";
   };