kubb-labs · stijnvanhulle · Jan 7, 2025 · Jan 7, 2025
diff --git a/.changeset/light-bulldogs-smoke.md b/.changeset/light-bulldogs-smoke.md
@@ -0,0 +1,5 @@
+---
+"@kubb/plugin-client": minor
+---
+
+decouple URI (with params) from fetching
diff --git a/.changeset/three-bags-brush.md b/.changeset/three-bags-brush.md
@@ -0,0 +1,5 @@
+---
+"@kubb/plugin-client": patch
+---
+
+use of URL and SearchParams to support queryParams for fetch
diff --git a/.changeset/wicked-cats-decide.md b/.changeset/wicked-cats-decide.md
@@ -0,0 +1,5 @@
+---
+"@kubb/plugin-client": patch
+---
+
+add header in response object
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -4,6 +4,11 @@ title: Changelog
 
 # Changelog
 
+## 3.4.0
+- [`plugin-client`](/plugins/plugin-client): decouple URI (with params) from fetching
+- [`plugin-client`](/plugins/plugin-client): add header in response object
+- [`plugin-client`](/plugins/plugin-client): use of URL and SearchParams to support queryParams for fetch
+
 ## 3.3.5
 - [`plugin-react-query`](/plugins/plugin-react-query/): queryOptions with custom Error type
 - [`plugin-svelte-query`](/plugins/plugin-svelte-query/): queryOptions with custom Error type

diff --git a/docs/package.json b/docs/package.json
@@ -25,7 +25,7 @@
     "mermaid": "^11.4.1",
     "sitemap": "^8.0.0",
     "vitepress": "^1.5.0",
-    "vitepress-plugin-group-icons": "^1.3.2",
+    "vitepress-plugin-group-icons": "^1.3.3",
     "vue": "^3.5.13"
   },
   "devDependencies": {
@@ -44,7 +44,7 @@
     "@kubb/plugin-zod": "workspace:*",
     "@kubb/react": "workspace:*",
     "@mermaid-js/mermaid-cli": "^11.4.2",
-    "@types/node": "^20.17.11",
+    "@types/node": "^20.17.12",
     "@types/react": "catalog:",
     "cross-env": "^7.0.3",
     "react": "catalog:",

diff --git a/e2e/package.json b/e2e/package.json
@@ -32,14 +32,14 @@
     "@kubb/plugin-ts": "workspace:*",
     "@kubb/plugin-zod": "workspace:*",
     "@kubb/react": "workspace:*",
-    "@tanstack/react-query": "^5.62.12",
-    "@tanstack/solid-query": "^5.62.12",
-    "@tanstack/svelte-query": "^5.62.12",
-    "@tanstack/vue-query": "^5.62.12",
+    "@tanstack/react-query": "^5.62.16",
+    "@tanstack/solid-query": "^5.62.16",
+    "@tanstack/svelte-query": "^5.62.16",
+    "@tanstack/vue-query": "^5.62.16",
     "axios": "^1.7.9",
     "msw": "^2.7.0",
     "react": "catalog:",
-    "solid-js": "^1.9.3",
+    "solid-js": "^1.9.4",
     "svelte": "^3.59.2",
     "swr": "^2.3.0",
     "tsup": "catalog:",

diff --git a/e2e/src/client.ts b/e2e/src/client.ts
@@ -27,6 +27,8 @@ export type ResponseConfig<TData = unknown> = {
   headers?: AxiosResponse['headers']
 }
 
+export type ResponseErrorConfig<TError = unknown> = TError
+
 export const axiosInstance = axios.create({
   baseURL: typeof AXIOS_BASE !== 'undefined' ? AXIOS_BASE : undefined,
   headers: typeof AXIOS_HEADERS !== 'undefined' ? (JSON.parse(AXIOS_HEADERS) as AxiosHeaders) : undefined,

diff --git a/examples/advanced/package.json b/examples/advanced/package.json
@@ -38,16 +38,16 @@
     "@kubb/plugin-ts": "workspace:*",
     "@kubb/plugin-zod": "workspace:*",
     "@kubb/react": "workspace:*",
-    "@tanstack/query-core": "^5.62.12",
-    "@tanstack/react-query": "^5.62.12",
-    "@tanstack/solid-query": "^5.62.12",
-    "@tanstack/svelte-query": "^5.62.12",
-    "@tanstack/vue-query": "^5.62.12",
-    "@types/react": "^19.0.2",
+    "@tanstack/query-core": "^5.62.16",
+    "@tanstack/react-query": "^5.62.16",
+    "@tanstack/solid-query": "^5.62.16",
+    "@tanstack/svelte-query": "^5.62.16",
+    "@tanstack/vue-query": "^5.62.16",
+    "@types/react": "^19.0.3",
     "axios": "^1.7.9",
     "msw": "^2.7.0",
     "react": "^19.0.0",
-    "solid-js": "^1.9.3",
+    "solid-js": "^1.9.4",
     "svelte": "^3.59.2",
     "swr": "^2.3.0",
     "vue": "^3.5.13",

diff --git a/examples/advanced/src/axios-client.ts b/examples/advanced/src/axios-client.ts
@@ -28,6 +28,8 @@ export type ResponseConfig<TData = unknown> = {
   headers?: AxiosResponse['headers']
 }
 
+export type ResponseErrorConfig<TError = unknown> = TError
+
 export const axiosInstance = axios.create({
   baseURL: typeof AXIOS_BASE !== 'undefined' ? AXIOS_BASE : undefined,
   headers: typeof AXIOS_HEADERS !== 'undefined' ? (JSON.parse(AXIOS_HEADERS) as AxiosHeaders) : undefined,

diff --git a/examples/advanced/src/client.ts b/examples/advanced/src/client.ts
@@ -27,6 +27,8 @@ export type ResponseConfig<TData = unknown> = {
   headers?: AxiosResponse['headers']
 }
 
+export type ResponseErrorConfig<TError = unknown> = TError
+
 export const axiosInstance = axios.create({
   baseURL: typeof AXIOS_BASE !== 'undefined' ? AXIOS_BASE : undefined,
   headers: typeof AXIOS_HEADERS !== 'undefined' ? (JSON.parse(AXIOS_HEADERS) as AxiosHeaders) : undefined,

diff --git a/examples/advanced/src/gen/clients/axios/index.ts b/examples/advanced/src/gen/clients/axios/index.ts
@@ -1,20 +1,20 @@
 export { operations } from './operations.ts'
-export { addPet } from './petService/addPet.ts'
-export { deletePet } from './petService/deletePet.ts'
-export { findPetsByStatus } from './petService/findPetsByStatus.ts'
-export { findPetsByTags } from './petService/findPetsByTags.ts'
-export { getPetById } from './petService/getPetById.ts'
+export { getAddPetUrl, addPet } from './petService/addPet.ts'
+export { getDeletePetUrl, deletePet } from './petService/deletePet.ts'
+export { getFindPetsByStatusUrl, findPetsByStatus } from './petService/findPetsByStatus.ts'
+export { getFindPetsByTagsUrl, findPetsByTags } from './petService/findPetsByTags.ts'
+export { getGetPetByIdUrl, getPetById } from './petService/getPetById.ts'
 export { petService } from './petService/petService.ts'
-export { updatePet } from './petService/updatePet.ts'
-export { updatePetWithForm } from './petService/updatePetWithForm.ts'
-export { uploadFile } from './petService/uploadFile.ts'
-export { createPets } from './petsService/createPets.ts'
+export { getUpdatePetUrl, updatePet } from './petService/updatePet.ts'
+export { getUpdatePetWithFormUrl, updatePetWithForm } from './petService/updatePetWithForm.ts'
+export { getUploadFileUrl, uploadFile } from './petService/uploadFile.ts'
+export { getCreatePetsUrl, createPets } from './petsService/createPets.ts'
 export { petsService } from './petsService/petsService.ts'
-export { createUser } from './userService/createUser.ts'
-export { createUsersWithListInput } from './userService/createUsersWithListInput.ts'
-export { deleteUser } from './userService/deleteUser.ts'
-export { getUserByName } from './userService/getUserByName.ts'
-export { loginUser } from './userService/loginUser.ts'
-export { logoutUser } from './userService/logoutUser.ts'
-export { updateUser } from './userService/updateUser.ts'
+export { getCreateUserUrl, createUser } from './userService/createUser.ts'
+export { getCreateUsersWithListInputUrl, createUsersWithListInput } from './userService/createUsersWithListInput.ts'
+export { getDeleteUserUrl, deleteUser } from './userService/deleteUser.ts'
+export { getGetUserByNameUrl, getUserByName } from './userService/getUserByName.ts'
+export { getLoginUserUrl, loginUser } from './userService/loginUser.ts'
+export { getLogoutUserUrl, logoutUser } from './userService/logoutUser.ts'
+export { getUpdateUserUrl, updateUser } from './userService/updateUser.ts'
 export { userService } from './userService/userService.ts'
diff --git a/examples/advanced/src/gen/clients/axios/petService/addPet.ts b/examples/advanced/src/gen/clients/axios/petService/addPet.ts
@@ -1,17 +1,20 @@
 import client from '../../../../axios-client.ts'
-import type { RequestConfig } from '../../../../axios-client.ts'
-import type { AddPetMutationRequest, AddPetMutationResponse, AddPet405 } from '../../../models/ts/petController/AddPet.ts'
+import type { RequestConfig, ResponseErrorConfig } from '../../../../axios-client.ts'
+import type { AddPet405, AddPetMutationRequest, AddPetMutationResponse } from '../../../models/ts/petController/AddPet.ts'
+
+export function getAddPetUrl() {
+  return new URL('/pet', 'https://petstore3.swagger.io/api/v3')
+}
 
 /**
  * @description Add a new pet to the store
  * @summary Add a new pet to the store
  * {@link /pet}
  */
 export async function addPet({ data }: { data: AddPetMutationRequest }, config: Partial<RequestConfig<AddPetMutationRequest>> = {}) {
-  const res = await client<AddPetMutationResponse, AddPet405, AddPetMutationRequest>({
+  const res = await client<AddPetMutationResponse, ResponseErrorConfig<AddPet405>, AddPetMutationRequest>({
     method: 'POST',
-    url: '/pet',
-    baseURL: 'https://petstore3.swagger.io/api/v3',
+    url: getAddPetUrl().toString(),
     data,
     ...config,
   })

diff --git a/examples/advanced/src/gen/clients/axios/petService/deletePet.ts b/examples/advanced/src/gen/clients/axios/petService/deletePet.ts
@@ -1,7 +1,11 @@
 import client from '../../../../axios-client.ts'
-import type { RequestConfig } from '../../../../axios-client.ts'
+import type { RequestConfig, ResponseErrorConfig } from '../../../../axios-client.ts'
 import type { DeletePetMutationResponse, DeletePetPathParams, DeletePetHeaderParams, DeletePet400 } from '../../../models/ts/petController/DeletePet.ts'
 
+export function getDeletePetUrl({ petId }: { petId: DeletePetPathParams['petId'] }) {
+  return new URL(`/pet/${petId}`, 'https://petstore3.swagger.io/api/v3')
+}
+
 /**
  * @description delete a pet
  * @summary Deletes a pet
@@ -11,10 +15,9 @@ export async function deletePet(
   { petId, headers }: { petId: DeletePetPathParams['petId']; headers?: DeletePetHeaderParams },
   config: Partial<RequestConfig> = {},
 ) {
-  const res = await client<DeletePetMutationResponse, DeletePet400, unknown>({
+  const res = await client<DeletePetMutationResponse, ResponseErrorConfig<DeletePet400>, unknown>({
     method: 'DELETE',
-    url: `/pet/${petId}`,
-    baseURL: 'https://petstore3.swagger.io/api/v3',
+    url: getDeletePetUrl({ petId }).toString(),
     headers: { ...headers, ...config.headers },
     ...config,
   })

diff --git a/examples/advanced/src/gen/clients/axios/petService/findPetsByStatus.ts b/examples/advanced/src/gen/clients/axios/petService/findPetsByStatus.ts
@@ -1,17 +1,20 @@
 import client from '../../../../axios-client.ts'
-import type { RequestConfig } from '../../../../axios-client.ts'
+import type { RequestConfig, ResponseErrorConfig } from '../../../../axios-client.ts'
 import type { FindPetsByStatusQueryResponse, FindPetsByStatusPathParams, FindPetsByStatus400 } from '../../../models/ts/petController/FindPetsByStatus.ts'
 
+export function getFindPetsByStatusUrl({ step_id }: { step_id: FindPetsByStatusPathParams['step_id'] }) {
+  return new URL(`/pet/findByStatus/${step_id}`, 'https://petstore3.swagger.io/api/v3')
+}
+
 /**
  * @description Multiple status values can be provided with comma separated strings
  * @summary Finds Pets by status
  * {@link /pet/findByStatus/:step_id}
  */
 export async function findPetsByStatus({ step_id }: { step_id: FindPetsByStatusPathParams['step_id'] }, config: Partial<RequestConfig> = {}) {
-  const res = await client<FindPetsByStatusQueryResponse, FindPetsByStatus400, unknown>({
+  const res = await client<FindPetsByStatusQueryResponse, ResponseErrorConfig<FindPetsByStatus400>, unknown>({
     method: 'GET',
-    url: `/pet/findByStatus/${step_id}`,
-    baseURL: 'https://petstore3.swagger.io/api/v3',
+    url: getFindPetsByStatusUrl({ step_id }).toString(),
     ...config,
   })
   return res

diff --git a/examples/advanced/src/gen/clients/axios/petService/findPetsByTags.ts b/examples/advanced/src/gen/clients/axios/petService/findPetsByTags.ts
@@ -1,12 +1,16 @@
 import client from '../../../../axios-client.ts'
-import type { RequestConfig } from '../../../../axios-client.ts'
+import type { RequestConfig, ResponseErrorConfig } from '../../../../axios-client.ts'
 import type {
   FindPetsByTagsQueryResponse,
   FindPetsByTagsQueryParams,
   FindPetsByTagsHeaderParams,
   FindPetsByTags400,
 } from '../../../models/ts/petController/FindPetsByTags.ts'
 
+export function getFindPetsByTagsUrl() {
+  return new URL('/pet/findByTags', 'https://petstore3.swagger.io/api/v3')
+}
+
 /**
  * @description Multiple tags can be provided with comma separated strings. Use tag1, tag2, tag3 for testing.
  * @summary Finds Pets by tags
@@ -16,10 +20,9 @@ export async function findPetsByTags(
   { headers, params }: { headers: FindPetsByTagsHeaderParams; params?: FindPetsByTagsQueryParams },
   config: Partial<RequestConfig> = {},
 ) {
-  const res = await client<FindPetsByTagsQueryResponse, FindPetsByTags400, unknown>({
+  const res = await client<FindPetsByTagsQueryResponse, ResponseErrorConfig<FindPetsByTags400>, unknown>({
     method: 'GET',
-    url: '/pet/findByTags',
-    baseURL: 'https://petstore3.swagger.io/api/v3',
+    url: getFindPetsByTagsUrl().toString(),
     params,
     headers: { ...headers, ...config.headers },
     ...config,

diff --git a/examples/advanced/src/gen/clients/axios/petService/getPetById.ts b/examples/advanced/src/gen/clients/axios/petService/getPetById.ts
@@ -1,17 +1,20 @@
 import client from '../../../../axios-client.ts'
-import type { RequestConfig } from '../../../../axios-client.ts'
+import type { RequestConfig, ResponseErrorConfig } from '../../../../axios-client.ts'
 import type { GetPetByIdQueryResponse, GetPetByIdPathParams, GetPetById400, GetPetById404 } from '../../../models/ts/petController/GetPetById.ts'
 
+export function getGetPetByIdUrl({ petId }: { petId: GetPetByIdPathParams['petId'] }) {
+  return new URL(`/pet/${petId}`, 'https://petstore3.swagger.io/api/v3')
+}
+
 /**
  * @description Returns a single pet
  * @summary Find pet by ID
  * {@link /pet/:petId}
  */
 export async function getPetById({ petId }: { petId: GetPetByIdPathParams['petId'] }, config: Partial<RequestConfig> = {}) {
-  const res = await client<GetPetByIdQueryResponse, GetPetById400 | GetPetById404, unknown>({
+  const res = await client<GetPetByIdQueryResponse, ResponseErrorConfig<GetPetById400 | GetPetById404>, unknown>({
     method: 'GET',
-    url: `/pet/${petId}`,
-    baseURL: 'https://petstore3.swagger.io/api/v3',
+    url: getGetPetByIdUrl({ petId }).toString(),
     ...config,
   })
   return res

diff --git a/examples/advanced/src/gen/clients/axios/petService/index.ts b/examples/advanced/src/gen/clients/axios/petService/index.ts
@@ -1,9 +1,9 @@
-export { addPet } from './addPet.ts'
-export { deletePet } from './deletePet.ts'
-export { findPetsByStatus } from './findPetsByStatus.ts'
-export { findPetsByTags } from './findPetsByTags.ts'
-export { getPetById } from './getPetById.ts'
+export { getAddPetUrl, addPet } from './addPet.ts'
+export { getDeletePetUrl, deletePet } from './deletePet.ts'
+export { getFindPetsByStatusUrl, findPetsByStatus } from './findPetsByStatus.ts'
+export { getFindPetsByTagsUrl, findPetsByTags } from './findPetsByTags.ts'
+export { getGetPetByIdUrl, getPetById } from './getPetById.ts'
 export { petService } from './petService.ts'
-export { updatePet } from './updatePet.ts'
-export { updatePetWithForm } from './updatePetWithForm.ts'
-export { uploadFile } from './uploadFile.ts'
+export { getUpdatePetUrl, updatePet } from './updatePet.ts'
+export { getUpdatePetWithFormUrl, updatePetWithForm } from './updatePetWithForm.ts'
+export { getUploadFileUrl, uploadFile } from './uploadFile.ts'
diff --git a/examples/advanced/src/gen/clients/axios/petService/updatePet.ts b/examples/advanced/src/gen/clients/axios/petService/updatePet.ts
@@ -1,5 +1,5 @@
 import client from '../../../../axios-client.ts'
-import type { RequestConfig } from '../../../../axios-client.ts'
+import type { RequestConfig, ResponseErrorConfig } from '../../../../axios-client.ts'
 import type {
   UpdatePetMutationRequest,
   UpdatePetMutationResponse,
@@ -8,16 +8,19 @@ import type {
   UpdatePet405,
 } from '../../../models/ts/petController/UpdatePet.ts'
 
+export function getUpdatePetUrl() {
+  return new URL('/pet', 'https://petstore3.swagger.io/api/v3')
+}
+
 /**
  * @description Update an existing pet by Id
  * @summary Update an existing pet
  * {@link /pet}
  */
 export async function updatePet({ data }: { data: UpdatePetMutationRequest }, config: Partial<RequestConfig<UpdatePetMutationRequest>> = {}) {
-  const res = await client<UpdatePetMutationResponse, UpdatePet400 | UpdatePet404 | UpdatePet405, UpdatePetMutationRequest>({
+  const res = await client<UpdatePetMutationResponse, ResponseErrorConfig<UpdatePet400 | UpdatePet404 | UpdatePet405>, UpdatePetMutationRequest>({
     method: 'PUT',
-    url: '/pet',
-    baseURL: 'https://petstore3.swagger.io/api/v3',
+    url: getUpdatePetUrl().toString(),
     data,
     ...config,
   })

diff --git a/examples/advanced/src/gen/clients/axios/petService/updatePetWithForm.ts b/examples/advanced/src/gen/clients/axios/petService/updatePetWithForm.ts
@@ -1,12 +1,16 @@
 import client from '../../../../axios-client.ts'
-import type { RequestConfig } from '../../../../axios-client.ts'
+import type { RequestConfig, ResponseErrorConfig } from '../../../../axios-client.ts'
 import type {
   UpdatePetWithFormMutationResponse,
   UpdatePetWithFormPathParams,
   UpdatePetWithFormQueryParams,
   UpdatePetWithForm405,
 } from '../../../models/ts/petController/UpdatePetWithForm.ts'
 
+export function getUpdatePetWithFormUrl({ petId }: { petId: UpdatePetWithFormPathParams['petId'] }) {
+  return new URL(`/pet/${petId}`, 'https://petstore3.swagger.io/api/v3')
+}
+
 /**
  * @summary Updates a pet in the store with form data
  * {@link /pet/:petId}
@@ -15,10 +19,9 @@ export async function updatePetWithForm(
   { petId, params }: { petId: UpdatePetWithFormPathParams['petId']; params?: UpdatePetWithFormQueryParams },
   config: Partial<RequestConfig> = {},
 ) {
-  const res = await client<UpdatePetWithFormMutationResponse, UpdatePetWithForm405, unknown>({
+  const res = await client<UpdatePetWithFormMutationResponse, ResponseErrorConfig<UpdatePetWithForm405>, unknown>({
     method: 'POST',
-    url: `/pet/${petId}`,
-    baseURL: 'https://petstore3.swagger.io/api/v3',
+    url: getUpdatePetWithFormUrl({ petId }).toString(),
     params,
     ...config,
   })

diff --git a/examples/advanced/src/gen/clients/axios/petService/uploadFile.ts b/examples/advanced/src/gen/clients/axios/petService/uploadFile.ts
@@ -1,12 +1,16 @@
 import client from '../../../../axios-client.ts'
-import type { RequestConfig } from '../../../../axios-client.ts'
+import type { RequestConfig, ResponseErrorConfig } from '../../../../axios-client.ts'
 import type {
   UploadFileMutationRequest,
   UploadFileMutationResponse,
   UploadFilePathParams,
   UploadFileQueryParams,
 } from '../../../models/ts/petController/UploadFile.ts'
 
+export function getUploadFileUrl({ petId }: { petId: UploadFilePathParams['petId'] }) {
+  return new URL(`/pet/${petId}/uploadImage`, 'https://petstore3.swagger.io/api/v3')
+}
+
 /**
  * @summary uploads an image
  * {@link /pet/:petId/uploadImage}
@@ -15,10 +19,9 @@ export async function uploadFile(
   { petId, data, params }: { petId: UploadFilePathParams['petId']; data?: UploadFileMutationRequest; params?: UploadFileQueryParams },
   config: Partial<RequestConfig<UploadFileMutationRequest>> = {},
 ) {
-  const res = await client<UploadFileMutationResponse, Error, UploadFileMutationRequest>({
+  const res = await client<UploadFileMutationResponse, ResponseErrorConfig<Error>, UploadFileMutationRequest>({
     method: 'POST',
-    url: `/pet/${petId}/uploadImage`,
-    baseURL: 'https://petstore3.swagger.io/api/v3',
+    url: getUploadFileUrl({ petId }).toString(),
     params,
     data,
     headers: { 'Content-Type': 'application/octet-stream', ...config.headers },