Defer resolving globalThis.fetch until calling endpoint

packages/connect-web-bench/README.md

@@ -10,5 +10,5 @@ it like a web server would usually do.
 
 | code generator | bundle size        | minified               | compressed           |
 |----------------|-------------------:|-----------------------:|---------------------:|
-| connect        | 112,976 b | 49,590 b | 13,282 b |
+| connect        | 113,120 b | 49,644 b | 13,266 b |
 | grpc-web       | 414,906 b    | 301,127 b    | 53,279 b |

packages/connect-web-test/src/fetch.spec.ts

@@ -17,9 +17,16 @@ import {
   SimpleRequest,
   SimpleResponse,
 } from "./gen/grpc/testing/messages_pb.js";
-import { createConnectTransport } from "@bufbuild/connect-web";
+import {
+  createConnectTransport,
+  createGrpcWebTransport,
+} from "@bufbuild/connect-web";
 
 describe("custom fetch", function () {
+  let originFetch: typeof fetch;
+  beforeEach(() => (originFetch = globalThis.fetch));
+  afterEach(() => (globalThis.fetch = originFetch));
+
   describe("with Connect transport", () => {
     it("should only call Response#json with the JSON format", async function () {
       const response = new Response(
@@ -107,5 +114,63 @@ describe("custom fetch", function () {
       expect(response.json).toHaveBeenCalledTimes(1); // eslint-disable-line @typescript-eslint/unbound-method
       expect(response.arrayBuffer).toHaveBeenCalledTimes(0); // eslint-disable-line @typescript-eslint/unbound-method
     });
+    it("should should defer resolving fetch until calling endpoint", async function () {
+      const response = new Response(
+        new SimpleResponse({ username: "donald" }).toJsonString(),
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      spyOn(response, "arrayBuffer").and.callThrough();
+      spyOn(response, "json").and.callThrough();
+      const transport = createConnectTransport({
+        baseUrl: "https://example.com",
+      });
+      // Patch globalThis.fetch to mimic a polyfill or patch
+      globalThis.fetch = () => Promise.resolve(response);
+      await transport.unary(
+        TestService,
+        TestService.methods.unaryCall,
+        undefined,
+        undefined,
+        undefined,
+        new SimpleRequest()
+      );
+      expect(response.json).toHaveBeenCalledTimes(1); // eslint-disable-line @typescript-eslint/unbound-method
+      expect(response.arrayBuffer).toHaveBeenCalledTimes(0); // eslint-disable-line @typescript-eslint/unbound-method
+    });
+  });
+  describe("with gRPC-web transport", () => {
+    it("should should defer resolving fetch until calling endpoint", async function () {
+      const response = new Response(
+        new SimpleResponse({ username: "donald" }).toJsonString(),
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      spyOn(response, "arrayBuffer").and.callThrough();
+      spyOn(response, "json").and.callThrough();
+      const transport = createGrpcWebTransport({
+        baseUrl: "https://example.com",
+        useBinaryFormat: false,
+      });
+      // Patch globalThis.fetch to mimic a polyfill or patch
+      globalThis.fetch = () =>
+        Promise.reject("test-error-raised-from-patched-fetch");
+      await expectAsync(
+        transport.unary(
+          TestService,
+          TestService.methods.unaryCall,
+          undefined,
+          undefined,
+          undefined,
+          new SimpleRequest()
+        )
+      ).toBeRejectedWithError(/test-error-raised-from-patched-fetch/);
+    });
   });
 });

packages/connect-web/src/connect-transport.ts

@@ -124,7 +124,6 @@ export function createConnectTransport(
 ): Transport {
   assertFetchApi();
   const useBinaryFormat = options.useBinaryFormat ?? false;
-  const fetch = options.fetch ?? globalThis.fetch;
   return {
     async unary<
       I extends Message<I> = AnyMessage,
@@ -180,6 +179,7 @@ export function createConnectTransport(
           } else {
             body = serialize(req.message);
           }
+          const fetch = options.fetch ?? globalThis.fetch;
           const response = await fetch(req.url, {
             ...req.init,
             headers: req.header,
@@ -303,6 +303,7 @@ export function createConnectTransport(
           message: input,
         },
         next: async (req) => {
+          const fetch = options.fetch ?? globalThis.fetch;
           const fRes = await fetch(req.url, {
             ...req.init,
             headers: req.header,

packages/connect-web/src/grpc-web-transport.ts

@@ -119,7 +119,6 @@ export function createGrpcWebTransport(
 ): Transport {
   assertFetchApi();
   const useBinaryFormat = options.useBinaryFormat ?? true;
-  const fetch = options.fetch ?? globalThis.fetch;
   return {
     async unary<
       I extends Message<I> = AnyMessage,
@@ -157,6 +156,7 @@ export function createGrpcWebTransport(
           message: normalize(message),
         },
         next: async (req: UnaryRequest<I, O>): Promise<UnaryResponse<I, O>> => {
+          const fetch = options.fetch ?? globalThis.fetch;
           const response = await fetch(req.url, {
             ...req.init,
             headers: req.header,
@@ -308,6 +308,7 @@ export function createGrpcWebTransport(
           message: input,
         },
         next: async (req) => {
+          const fetch = options.fetch ?? globalThis.fetch;
           const fRes = await fetch(req.url, {
             ...req.init,
             headers: req.header,