Fix issue with non-absolute URLs

Author: ejsmith

src/FetchClient.test.ts

@@ -762,6 +762,46 @@ Deno.test("can use kitchen sink", async () => {
   assert(optionsCalled);
 });
 
+Deno.test("can getJSON relative URL", async () => {
+  const provider = new FetchClientProvider();
+  let requestedUrl = "";
+  const fakeFetch = (req: URL | Request | string): Promise<Response> =>
+    new Promise((resolve) => {
+      if (typeof req === "string") {
+        requestedUrl = req;
+      } else if (req instanceof Request) {
+        requestedUrl = req.url;
+      } else {
+        requestedUrl = req.toString();
+      }
+      const data = JSON.stringify({});
+      resolve(new Response(data));
+    });
+
+  provider.fetch = fakeFetch;
+  const client = provider.getFetchClient();
+
+  await client.getJSON<Products>(
+    `/todos/1`,
+    {
+      params: {
+        limit: 3,
+      },
+    },
+  );
+  assertEquals(requestedUrl, "http://localhost/todos/1?limit=3");
+
+  await client.getJSON<Products>(
+    `todos/1`,
+    {
+      params: {
+        limit: 3,
+      },
+    },
+  );
+  assertEquals(requestedUrl, "http://localhost/todos/1?limit=3");
+});
+
 function someMiddleware(ctx: FetchClientContext, next: () => Promise<void>) {
   ctx.someMiddleware = true;
   return next();

src/FetchClient.ts

@@ -485,12 +485,29 @@ export class FetchClient {
     this.#counter.increment();
     this.#provider.counter.increment();
 
+    let request: Request | null = null;
+
+    try {
+      request = new Request(url, init);
+    } catch {
+      // try converting to absolute URL
+      const origin = globalThis.location?.origin ?? "http://localhost";
+      if (!url.startsWith("http")) {
+        if (url.startsWith("/")) {
+          request = new Request(origin + url, init);
+        } else {
+          request = new Request(origin + url, init);
+        }
+      }
+    }
+
     const context: FetchClientContext = {
       options,
-      request: new Request(url, init),
+      request: request!,
       response: null,
       meta: {},
     };
+
     await this.invokeMiddleware(context, middleware);
 
     this.#counter.decrement();
@@ -619,21 +636,23 @@ export class FetchClient {
   }
 
   private buildUrl(url: string, options: RequestOptions | undefined): string {
-    if (url.startsWith("/")) {
-      url = url.substring(1);
-    }
+    let builtUrl = url;
 
-    if (!url.startsWith("http") && this.options?.baseUrl) {
-      url = this.options.baseUrl + "/" + url;
+    if (!builtUrl.startsWith("http") && this.options?.baseUrl) {
+      if (this.options.baseUrl.endsWith("/") || builtUrl.startsWith("/")) {
+        builtUrl = this.options.baseUrl + builtUrl;
+      } else {
+        builtUrl = this.options.baseUrl + "/" + builtUrl;
+      }
     }
 
-    const isAbsoluteUrl = url.startsWith("http");
+    const isAbsoluteUrl = builtUrl.startsWith("http");
 
     const origin: string | undefined = isAbsoluteUrl
       ? undefined
-      : globalThis.location?.origin ?? undefined;
+      : globalThis.location?.origin ?? "http://localhost";
 
-    const parsed = new URL(url, origin);
+    const parsed = new URL(builtUrl, origin);
 
     if (options?.params) {
       for (const [key, value] of Object.entries(options?.params)) {
@@ -644,10 +663,13 @@ export class FetchClient {
         }
       }
 
-      url = parsed.toString();
+      builtUrl = parsed.toString();
     }
 
-    const result = isAbsoluteUrl ? url : `${parsed.pathname}${parsed.search}`;
+    const result = isAbsoluteUrl
+      ? builtUrl
+      : `${parsed.pathname}${parsed.search}`;
+
     return result;
   }