fix: deep merge fetch options (#243)

Co-authored-by: Pooya Parsa <pooya@pi0.io>

Author: DennisBetawerk

src/fetch.ts

@@ -8,6 +8,7 @@ import {
   detectResponseType,
   ResponseType,
   MappedType,
+  mergeFetchOptions,
 } from "./utils";
 
 export interface CreateFetchOptions {
@@ -129,7 +130,7 @@ export function createFetch(globalOptions: CreateFetchOptions): $Fetch {
   ) {
     const context: FetchContext = {
       request: _request,
-      options: { ...globalOptions.defaults, ..._options },
+      options: mergeFetchOptions(_options, globalOptions.defaults, Headers),
       response: undefined,
       error: undefined,
     };

src/utils.ts

@@ -1,3 +1,5 @@
+import type { FetchOptions } from "./fetch";
+
 const payloadMethods = new Set(
   Object.freeze(["PATCH", "POST", "PUT", "DELETE"])
 );
@@ -71,3 +73,39 @@ export function detectResponseType(_contentType = ""): ResponseType {
 
   return "blob";
 }
+
+// Merging of fetch option objects.
+export function mergeFetchOptions(
+  input: FetchOptions | undefined,
+  defaults: FetchOptions | undefined,
+  Headers = globalThis.Headers
+): FetchOptions {
+  const merged: FetchOptions = {
+    ...defaults,
+    ...input,
+  };
+
+  // Merge params and query
+  if (defaults?.params && input?.params) {
+    merged.params = {
+      ...defaults?.params,
+      ...input?.params,
+    };
+  }
+  if (defaults?.query && input?.query) {
+    merged.query = {
+      ...defaults?.query,
+      ...input?.query,
+    };
+  }
+
+  // Merge headers
+  if (defaults?.headers && input?.headers) {
+    merged.headers = new Headers(defaults?.headers || {});
+    for (const [key, value] of new Headers(input?.headers || {})) {
+      merged.headers.set(key, value);
+    }
+  }
+
+  return merged;
+}

test/index.test.ts

@@ -31,6 +31,17 @@ describe("ofetch", () => {
         "/url",
         eventHandler((event) => event.node.req.url)
       )
+      .use(
+        "/echo",
+        eventHandler(async (event) => ({
+          path: event.path,
+          body:
+            event.node.req.method === "POST"
+              ? await readRawBody(event)
+              : undefined,
+          headers: event.node.req.headers,
+        }))
+      )
       .use(
         "/post",
         eventHandler(async (event) => ({
@@ -45,10 +56,6 @@ describe("ofetch", () => {
           return new Blob(["binary"]);
         })
       )
-      .use(
-        "/echo",
-        eventHandler(async (event) => ({ body: await readRawBody(event) }))
-      )
       .use(
         "/403",
         eventHandler(() =>
@@ -202,4 +209,40 @@ describe("ofetch", () => {
     }
     expect(abortHandle()).rejects.toThrow(/aborted/);
   });
+
+  it("deep merges defaultOptions", async () => {
+    const _customFetch = $fetch.create({
+      query: {
+        a: 0,
+      },
+      params: {
+        b: 2,
+      },
+      headers: {
+        "x-header-a": "0",
+        "x-header-b": "2",
+      },
+    });
+    const { headers, path } = await _customFetch(getURL("echo"), {
+      query: {
+        a: 1,
+      },
+      params: {
+        c: 3,
+      },
+      headers: {
+        "Content-Type": "text/plain",
+        "x-header-a": "1",
+        "x-header-c": "3",
+      },
+    });
+
+    expect(headers).to.include({
+      "x-header-a": "1",
+      "x-header-b": "2",
+      "x-header-c": "3",
+    });
+
+    expect(path).to.eq("?b=2&c=3&a=1");
+  });
 });