feat(fetch): add fetch client

Author: OliverDudgeon

.vscode/settings.json

@@ -10,7 +10,8 @@
     "custom-instance",
     "editor",
     "input-transformer",
-    "zod"
+    "zod",
+    "fetch"
   ],
   "cSpell.words": [
     "orval",

orval.config.ts

@@ -5,16 +5,39 @@ export default defineConfig({
     input: { target: "./openapi.yaml", validation: false },
     output: { client: "zod", mode: "tags-split", target: "./src/api", fileExtension: ".zod.ts" },
   },
-  api: {
+  fetch: {
     input: { target: "./openapi.yaml", validation: false },
     output: {
+      clean: true,
       mode: "tags-split",
-      target: "./src/api/api.ts",
+      target: "./src/api",
+      schemas: "./src/api/api-schemas",
+      fileExtension: ".fetch.ts",
       client: "react-query",
-      baseUrl: "",
+      httpClient: "fetch",
       override: {
         operationName: (operation) => operation["x-semantic-name"],
-        mutator: { path: "./src/custom-instance.ts", name: "customInstance" },
+        mutator: { path: "./src/custom-fetch.ts", name: "customFetch" },
+        query: {
+          useQuery: true,
+          useSuspenseQuery: true,
+          useInvalidate: true,
+          shouldSplitQueryKey: true,
+        },
+      },
+    },
+  },
+  axios: {
+    input: { target: "./openapi.yaml", validation: false },
+    output: {
+      mode: "tags-split",
+      target: "./src/api",
+      schemas: "./src/api/api-schemas",
+      client: "react-query",
+      httpClient: "axios",
+      override: {
+        operationName: (operation) => operation["x-semantic-name"],
+        mutator: { path: "./src/custom-axios.ts", name: "customInstance" },
         query: {
           useQuery: true,
           useSuspenseQuery: true,

src/custom-instance.ts src/custom-axios.tssrc/custom-instance.ts renamed to src/custom-axios.ts

@@ -32,19 +32,6 @@ export const setBaseUrl = (baseUrl: string) => {
 export const customInstance = <TReturn>(
   config: AxiosRequestConfig,
   options?: AxiosRequestConfig,
-): Promise<TReturn> => {
-  const source = Axios.CancelToken.source();
-
-  const promise = AXIOS_INSTANCE({ ...config, ...options, cancelToken: source.token }).then(
-    ({ data }) => data,
-  );
-
-  // @ts-expect-error need to add a cancel method to the promise
-  promise.cancel = () => {
-    source.cancel("Query was cancelled");
-  };
-
-  return promise;
-};
+): Promise<TReturn> => AXIOS_INSTANCE({ ...config, ...options }).then(({ data }) => data);
 
 export type ErrorType<TError> = AxiosError<TError>;

src/custom-fetch.ts

@@ -0,0 +1,59 @@
+// Custom fetch instance with runtime base URL configuration
+// Based on Orval docs: https://orval.dev/guides/custom-client
+
+let baseURL = "";
+
+/**
+ * Set the base URL for all fetch requests
+ * @param url - The base URL to use for all API calls
+ */
+export const setBaseURL = (url: string) => {
+  baseURL = url.replace(/\/$/, ""); // Remove trailing slash
+};
+
+/**
+ * Get the current base URL
+ */
+export const getBaseURL = () => baseURL;
+
+/**
+ * Custom fetch wrapper that prepends the base URL
+ * Compatible with Orval's generated RequestInit spreading
+ */
+export const customFetch = async <T>(
+  url: string,
+  options?: RequestInit & { params?: Record<string, unknown> },
+): Promise<T> => {
+  const { params, ...requestInit } = options ?? {};
+
+  let targetUrl = `${baseURL}${url}`;
+
+  if (params) {
+    targetUrl += "?" + new URLSearchParams(params as Record<string, string>);
+  }
+
+  // If body exists and is an object, stringify it
+  const processedBody =
+    requestInit.body && typeof requestInit.body === "object"
+      ? JSON.stringify(requestInit.body)
+      : requestInit.body;
+
+  const response = await fetch(targetUrl, {
+    ...requestInit,
+    body: processedBody,
+    headers: { "Content-Type": "application/json", ...requestInit.headers },
+  });
+
+  if (!response.ok) {
+    throw response;
+  }
+
+  // Handle empty responses
+  if ([204, 205, 304].includes(response.status)) {
+    return {} as T;
+  }
+
+  return response.json();
+};
+
+export type ErrorType<Error> = Error;

src/index.ts

@@ -1,6 +1,6 @@
 // Generated by orval
 // API_TARGET_NAME Is replaced with the api name
-export * from "./api/api.schemas";
+export * from "./api/api-schemas";
 
 // Request instance and methods to change the baseUrl and auth token
-export * from "./custom-instance";
+export * from "./custom-axios";

tsdown.config.ts

@@ -1,7 +1,13 @@
 import { defineConfig } from "tsdown";
 
 export default defineConfig({
-  entry: ["src/index.ts", "src/api/*/*.ts", "src/api/*/*.zod.ts"],
+  entry: [
+    "src/index.ts",
+    "src/api/*/*.ts",
+    "src/api/*/*.fetch.ts",
+    "src/api/*/*.zod.ts",
+    "!src/api/api-schemas/**",
+  ],
   dts: true,
   format: ["cjs", "esm"],
   target: "es2022",
@@ -23,7 +29,7 @@ export default defineConfig({
         if (chunks) {
           for (const chunk of chunks) {
             if (chunk.type === "chunk" && chunk.fileName) {
-              // Match pattern: api/{moduleName}/{moduleName}.js (or .cjs) and api/{moduleName}/{moduleName}.zod.js
+              // Match pattern: api/{moduleName}/{moduleName}.js (or .cjs) for axios client
               const match = chunk.fileName.match(/^api\/([^/]+)\/\1\.(js|cjs)$/);
               if (match && match[1]) {
                 modules.add(match[1]);
@@ -33,9 +39,9 @@ export default defineConfig({
         }
       }
 
-      // For each module, create simplified export paths for both regular and zod files
+      // For each module, create simplified export paths for axios, fetch, and zod files
       for (const moduleName of modules) {
-        // Regular exports
+        // Axios client (default)
         pkg[`./${moduleName}`] = {
           import: {
             types: `./dist/api/${moduleName}/${moduleName}.d.ts`,
@@ -47,7 +53,19 @@ export default defineConfig({
           },
         };
 
-        // Zod exports
+        // Fetch client
+        pkg[`./${moduleName}/fetch`] = {
+          import: {
+            types: `./dist/api/${moduleName}/${moduleName}.fetch.d.ts`,
+            default: `./dist/api/${moduleName}/${moduleName}.fetch.js`,
+          },
+          require: {
+            types: `./dist/api/${moduleName}/${moduleName}.fetch.d.cts`,
+            default: `./dist/api/${moduleName}/${moduleName}.fetch.cjs`,
+          },
+        };
+
+        // Zod schemas
         pkg[`./${moduleName}/zod`] = {
           import: {
             types: `./dist/api/${moduleName}/${moduleName}.zod.d.ts`,