fix(core): Fix immediate cancellation of fetch requests

packages/core/src/exchanges/fetch.test.ts

@@ -147,8 +147,12 @@ describe('on teardown', () => {
     expect(true).toEqual(false);
   };
 
-  it('does not start the outgoing request on immediate teardowns', () => {
-    fetch.mockResolvedValue(new Response('text', { status: 200 }));
+  it('does not start the outgoing request on immediate teardowns', async () => {
+    fetch.mockImplementation(async () => {
+      await new Promise(() => {
+        /*noop*/
+      });
+    });
 
     const { unsubscribe } = pipe(
       fromValue(queryOperation),
@@ -157,27 +161,35 @@ describe('on teardown', () => {
     );
 
     unsubscribe();
+
+    // NOTE: We can only observe the async iterator's final run after a macro tick
+    await new Promise(resolve => setTimeout(resolve));
     expect(fetch).toHaveBeenCalledTimes(0);
-    expect(abort).toHaveBeenCalledTimes(0);
+    expect(abort).toHaveBeenCalledTimes(1);
   });
 
   it('aborts the outgoing request', async () => {
-    fetch.mockResolvedValue(new Response('text', { status: 200 }));
+    fetch.mockResolvedValue({
+      status: 200,
+      headers: new Map([['Content-Type', 'application/json']]),
+      text: vi.fn().mockResolvedValue('{ "data": null }'),
+    });
 
     const { unsubscribe } = pipe(
       fromValue(queryOperation),
       fetchExchange(exchangeArgs),
-      subscribe(fail)
+      subscribe(() => {
+        /*noop*/
+      })
     );
 
-    await Promise.resolve();
-
+    await new Promise(resolve => setTimeout(resolve));
     unsubscribe();
 
     // NOTE: We can only observe the async iterator's final run after a macro tick
     await new Promise(resolve => setTimeout(resolve));
     expect(fetch).toHaveBeenCalledTimes(1);
-    expect(abort).toHaveBeenCalled();
+    expect(abort).toHaveBeenCalledTimes(1);
   });
 
   it('does not call the query', () => {

packages/core/src/internal/fetchSource.test.ts

@@ -164,28 +164,42 @@ describe('on teardown', () => {
     expect(true).toEqual(false);
   };
 
-  it('does not start the outgoing request on immediate teardowns', () => {
-    fetch.mockResolvedValue(new Response('text', { status: 200 }));
+  it('does not start the outgoing request on immediate teardowns', async () => {
+    fetch.mockImplementation(async () => {
+      await new Promise(() => {
+        /*noop*/
+      });
+    });
 
     const { unsubscribe } = pipe(
       makeFetchSource(queryOperation, 'https://test.com/graphql', {}),
       subscribe(fail)
     );
 
     unsubscribe();
+
+    // NOTE: We can only observe the async iterator's final run after a macro tick
+
+    await new Promise(resolve => setTimeout(resolve));
     expect(fetch).toHaveBeenCalledTimes(0);
-    expect(abort).toHaveBeenCalledTimes(0);
+    expect(abort).toHaveBeenCalledTimes(1);
   });
 
   it('aborts the outgoing request', async () => {
-    fetch.mockResolvedValue(new Response('text', { status: 200 }));
+    fetch.mockResolvedValue({
+      status: 200,
+      headers: new Map([['Content-Type', 'application/json']]),
+      text: vi.fn().mockResolvedValue('{ "data": null }'),
+    });
 
     const { unsubscribe } = pipe(
       makeFetchSource(queryOperation, 'https://test.com/graphql', {}),
-      subscribe(fail)
+      subscribe(() => {
+        /*noop*/
+      })
     );
 
-    await Promise.resolve();
+    await new Promise(resolve => setTimeout(resolve));
     unsubscribe();
 
     // NOTE: We can only observe the async iterator's final run after a macro tick

packages/core/src/internal/fetchSource.ts

@@ -1,4 +1,4 @@
-import { Source, fromAsyncIterable } from 'wonka';
+import { Source, fromAsyncIterable, filter, pipe } from 'wonka';
 import { Operation, OperationResult, ExecutionResult } from '../types';
 import { makeResult, makeErrorResult, mergeResultPatch } from '../utils';
 
@@ -116,7 +116,7 @@ async function* fetchOperation(
 
     // Delay for a tick to give the Client a chance to cancel the request
     // if a teardown comes in immediately
-    await Promise.resolve();
+    yield await Promise.resolve();
 
     response = await (operation.context.fetch || fetch)(url, fetchOptions);
     const contentType = response.headers.get('Content-Type') || '';
@@ -194,5 +194,8 @@ export function makeFetchSource(
   url: string,
   fetchOptions: RequestInit
 ): Source<OperationResult> {
-  return fromAsyncIterable(fetchOperation(operation, url, fetchOptions));
+  return pipe(
+    fromAsyncIterable(fetchOperation(operation, url, fetchOptions)),
+    filter((result): result is OperationResult => !!result)
+  );
 }