fix(react): Prevent the operation queue from being flushed during synchronous cache reads

.changeset/hip-ears-wash.md

@@ -0,0 +1,6 @@
+---
+'@urql/core': patch
+urql: patch
+---
+
+Fix missing React updates after an incoming response that schedules a mount. We now prevent dispatched operations from continuing to flush synchronously when the original source that runs the queue has terminated. This is important for the React bindings, because an update (e.g. `setState`) may recursively schedule a mount, which then disabled other `setState` updates from being processed. Previously we assumed that React used a trampoline scheduler for updates, however it appears that `setState` can recursively start more React work.

packages/core/src/client.ts

@@ -163,10 +163,13 @@ export const Client: new (opts: ClientOptions) => Client = function Client(
   // activated to allow `reexecuteOperation` to be trampoline-scheduled
   let isOperationBatchActive = false;
   function dispatchOperation(operation?: Operation | void) {
-    isOperationBatchActive = true;
     if (operation) nextOperation(operation);
-    while ((operation = queue.shift())) nextOperation(operation);
-    isOperationBatchActive = false;
+    if (!isOperationBatchActive) {
+      isOperationBatchActive = true;
+      while (isOperationBatchActive && (operation = queue.shift()))
+        nextOperation(operation);
+      isOperationBatchActive = false;
+    }
   }
 
   /** Defines how result streams are created */
@@ -195,7 +198,7 @@ export const Client: new (opts: ClientOptions) => Client = function Client(
     if (operation.kind === 'mutation') {
       return pipe(
         result$,
-        onStart(() => dispatchOperation(operation)),
+        onStart(() => nextOperation(operation)),
         take(1)
       );
     }
@@ -241,9 +244,7 @@ export const Client: new (opts: ClientOptions) => Client = function Client(
         for (let i = queue.length - 1; i >= 0; i--)
           if (queue[i].key === operation.key) queue.splice(i, 1);
         // Dispatch a teardown signal for the stopped operation
-        dispatchOperation(
-          makeOperation('teardown', operation, operation.context)
-        );
+        nextOperation(makeOperation('teardown', operation, operation.context));
       }),
       share
     );
@@ -269,9 +270,7 @@ export const Client: new (opts: ClientOptions) => Client = function Client(
       // operation's exchange results
       if (operation.kind === 'mutation' || active.has(operation.key)) {
         queue.push(operation);
-        if (!isOperationBatchActive) {
-          Promise.resolve().then(dispatchOperation);
-        }
+        Promise.resolve().then(dispatchOperation);
       }
     },
 
@@ -344,7 +343,10 @@ export const Client: new (opts: ClientOptions) => Client = function Client(
               dispatchOperation(operation);
             }
           }),
-          onEnd(observer.complete),
+          onEnd(() => {
+            isOperationBatchActive = false;
+            observer.complete();
+          }),
           subscribe(observer.next)
         ).unsubscribe;
       });

packages/react-urql/src/hooks/useQuery.ts

@@ -44,8 +44,6 @@ export type UseQueryResponse<Data = any, Variables = object> = [
 const isSuspense = (client: Client, context?: Partial<OperationContext>) =>
   client.suspense && (!context || context.suspense !== false);
 
-let currentInit = false;
-
 export function useQuery<Data = any, Variables = object>(
   args: UseQueryArgs<Variables, Data>
 ): UseQueryResponse<Data, Variables> {
@@ -127,18 +125,14 @@ export function useQuery<Data = any, Variables = object>(
     args.pause,
   ] as const;
 
-  const [state, setState] = useState(() => {
-    currentInit = true;
-    try {
-      return [
+  const [state, setState] = useState(
+    () =>
+      [
         source,
         computeNextState(initialState, getSnapshot(source, suspense)),
         deps,
-      ] as const;
-    } finally {
-      currentInit = false;
-    }
-  });
+      ] as const
+  );
 
   let currentResult = state[1];
   if (source !== state[0] && hasDepsChanged(state[2], deps)) {
@@ -160,14 +154,12 @@ export function useQuery<Data = any, Variables = object>(
 
     const updateResult = (result: Partial<UseQueryState<Data, Variables>>) => {
       hasResult = true;
-      if (!currentInit) {
-        setState(state => {
-          const nextResult = computeNextState(state[1], result);
-          return state[1] !== nextResult
-            ? [state[0], nextResult, state[2]]
-            : state;
-        });
-      }
+      setState(state => {
+        const nextResult = computeNextState(state[1], result);
+        return state[1] !== nextResult
+          ? [state[0], nextResult, state[2]]
+          : state;
+      });
     };
 
     if (source) {