Feat/1195 object style params (#1358)

* feat: object style params * chore: update snapshots * chore: update examples * feat: `paramsType` with options `'inline'` and `'object'` to have control over the amount of parameters when calling one of the generated functions. * chore: upgrade packages * chore: fix ts issues
kubb-labs · Oct 30, 2024 · 4db1509 · 4db1509
1 parent 2b48b97
commit 4db1509
Show file tree

Hide file tree

Showing 187 changed files with 2,872 additions and 883 deletions.
diff --git a/.changeset/quiet-parrots-cry.md b/.changeset/quiet-parrots-cry.md
@@ -0,0 +1,10 @@
+---
+"@kubb/plugin-svelte-query": minor
+"@kubb/plugin-react-query": minor
+"@kubb/plugin-solid-query": minor
+"@kubb/plugin-vue-query": minor
+"@kubb/plugin-client": minor
+"@kubb/plugin-swr": minor
+---
+
+`paramsType` to change the amount of parameters when calling a query
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -4,6 +4,13 @@ title: Changelog
 
 # Changelog
 
+## 3.0.0-beta.10
+- [`plugin-react-query`](/plugins/plugin-react-query/): `paramsType` with options `'inline'` and `'object'` to have control over the amount of parameters when calling one of the generated functions.
+- [`plugin-svelte-query`](/plugins/plugin-svelte-query/): `paramsType` with options `'inline'` and `'object'` to have control over the amount of parameters when calling one of the generated functions.
+- [`plugin-vue-query`](/plugins/plugin-vue-query/): `paramsType` with options `'inline'` and `'object'` to have control over the amount of parameters when calling one of the generated functions.
+- [`plugin-solid-query`](/plugins/plugin-solid-query/): `paramsType` with options `'inline'` and `'object'` to have control over the amount of parameters when calling one of the generated functions.
+- [`plugin-client`](/plugins/plugin-client/): `paramsType` with options `'inline'` and `'object'` to have control over the amount of parameters when calling one of the generated functions.
+
 ## 3.0.0-beta.9
 - [`plugin-msw`](/plugins/plugin-msw): `parser` option to disable faker generation
   - `'faker'` will use `@kubb/plugin-faker` to generate the data for the response

diff --git a/docs/migration-guide.md b/docs/migration-guide.md
@@ -324,6 +324,7 @@ See [Filter And Sort](/knowledge-base/filter-and-sort).
 - `client.importPath` becomes `importPath`
 - `operations` will control the creation of a file with all operations grouped by methods.
 - `parser` will make it possible to chose between using no parser(`client`) or using Zod(`zod`).
+- `paramsType` will make it possible to have one object to pass your pathParams, params, headers and data.
 
 ### @kubb/plugin-ts
 - `enumType` `'asPascalConst'` has been removed as an option.
@@ -349,6 +350,7 @@ See [Filter And Sort](/knowledge-base/filter-and-sort).
 - `mutation.key` same as in `@kubb/plugin-react-query`
 - `mutation.methods` same as in `@kubb/plugin-react-query`
 - `mutation.importPath` same as in `@kubb/plugin-react-query`
+- `paramsType` will make it possible to have one object to pass your pathParams, params, headers and data.
 
 ### @kubb/plugin-react-query
 - `dataReturnType` becomes `client.dataReturnType`
@@ -363,6 +365,7 @@ See [Filter And Sort](/knowledge-base/filter-and-sort).
 - `enabled` will be generated based on which params are required
 - Support for `signal`, this makes it possible to cancel a request
 - Removal of `mutate.variablesType` and use `'mutate'` as default
+- `paramsType` will make it possible to have one object to pass your pathParams, params, headers and data.
 
 ### @kubb/plugin-msw
 - `parser` to switch between using Faker(`'faker'`) for your data or define your own data with `'data'`.

diff --git a/docs/package.json b/docs/package.json
@@ -24,7 +24,7 @@
     "@shikijs/vitepress-twoslash": "^1.22.2",
     "mermaid": "^11.3.0",
     "sitemap": "^8.0.0",
-    "vitepress": "^1.4.1",
+    "vitepress": "^1.4.2",
     "vitepress-plugin-group-icons": "^1.3.0",
     "vue": "^3.5.12"
   },
@@ -44,7 +44,7 @@
     "@kubb/plugin-zod": "workspace:*",
     "@kubb/react": "workspace:*",
     "@mermaid-js/mermaid-cli": "^11.2.1",
-    "@types/node": "^20.17.1",
+    "@types/node": "^20.17.3",
     "@types/react": "^18.3.12",
     "cross-env": "^7.0.3",
     "react": "^18.3.1",

diff --git a/docs/plugins/plugin-client/index.md b/docs/plugins/plugin-client/index.md
@@ -115,6 +115,9 @@ Create `operations.ts` file with all operations grouped by methods.
 ### dataReturnType
 <!--@include: ../plugin-client/dataReturnType.md-->
 
+### paramsType
+<!--@include: ../plugin-client/pathParamsType.md-->
+
 ### pathParamsType
 <!--@include: ../plugin-client/pathParamsType.md-->
 

diff --git a/docs/plugins/plugin-client/paramsType.md b/docs/plugins/plugin-client/paramsType.md
@@ -0,0 +1,41 @@
+How to pass your params.
+
+|           |                        |
+|----------:|:-----------------------|
+|     Type: | `'object' \| 'inline'` |
+| Required: | `false`                |
+|  Default: | `'inline'`             |
+
+
+> [!TIP]
+> When `paramsType` is set to `'object'`, `pathParams` will also be set to `'object'`.
+
+- `'object'` will return the params and pathParams as an object.
+- `'inline'` will return the params as comma separated params.
+
+::: code-group
+```typescript ['object']
+export async function deletePet(
+  {
+    petId,
+    headers,
+  }: {
+    petId: DeletePetPathParams['petId']
+    headers?: DeletePetHeaderParams
+  },
+  config: Partial<RequestConfig> = {},
+) {
+...
+}
+```
+
+```typescript ['inline']
+export async function deletePet(
+  petId: DeletePetPathParams['petId'],
+  headers?: DeletePetHeaderParams,
+  config: Partial<RequestConfig> = {}
+){
+  ...
+}
+```
+:::
diff --git a/docs/plugins/plugin-client/pathParamsType.md b/docs/plugins/plugin-client/pathParamsType.md
@@ -4,25 +4,25 @@ How to pass your pathParams.
 |----------:|:-----------------------|
 |     Type: | `'object' \| 'inline'` |
 | Required: | `false`                |
-|  Default: | `'data'`                |
+|  Default: | `'inline'`                |
 
 
 - `'object'` will return the pathParams as an object.
 - `'inline'` will return the pathParams as comma separated params.
 
 ::: code-group
 ```typescript ['object']
-export async function getPetById<TData>(
+export async function getPetById (
   { petId }: GetPetByIdPathParams,
-): Promise<ResponseConfig<TData>> {
+) {
   ...
 }
 ```
 
 ```typescript ['inline']
-export async function getPetById<TData>(
+export async function getPetById(
   petId: GetPetByIdPathParams,
-): Promise<ResponseConfig<TData>> {
+) {
   ...
 }
 ```

diff --git a/docs/plugins/plugin-react-query/index.md b/docs/plugins/plugin-react-query/index.md
@@ -175,6 +175,9 @@ Return the name of a group based on the group name, this will be used for the fi
 #### client.dataReturnType
 <!--@include: ../plugin-client/dataReturnType.md-->
 
+### paramsType
+<!--@include: ../plugin-client/pathParamsType.md-->
+
 ### pathParamsType
 <!--@include: ../plugin-client/pathParamsType.md-->
 

diff --git a/docs/plugins/plugin-solid-query/index.md b/docs/plugins/plugin-solid-query/index.md
@@ -108,6 +108,9 @@ Return the name of a group based on the group name, this will be used for the fi
 #### client.dataReturnType
 <!--@include: ../plugin-client/dataReturnType.md-->
 
+### paramsType
+<!--@include: ../plugin-client/pathParamsType.md-->
+
 ### pathParamsType
 <!--@include: ../plugin-client/pathParamsType.md-->
 

diff --git a/docs/plugins/plugin-svelte-query/index.md b/docs/plugins/plugin-svelte-query/index.md
@@ -108,6 +108,9 @@ Return the name of a group based on the group name, this will be used for the fi
 #### client.dataReturnType
 <!--@include: ../plugin-client/dataReturnType.md-->
 
+### paramsType
+<!--@include: ../plugin-client/pathParamsType.md-->
+
 ### pathParamsType
 <!--@include: ../plugin-client/pathParamsType.md-->
 

diff --git a/docs/plugins/plugin-swr/index.md b/docs/plugins/plugin-swr/index.md
@@ -108,6 +108,9 @@ Return the name of a group based on the group name, this will be used for the fi
 #### client.dataReturnType
 <!--@include: ../plugin-client/dataReturnType.md-->
 
+### paramsType
+<!--@include: ../plugin-client/pathParamsType.md-->
+
 ### pathParamsType
 <!--@include: ../plugin-client/pathParamsType.md-->
 

diff --git a/docs/plugins/plugin-vue-query/index.md b/docs/plugins/plugin-vue-query/index.md
@@ -109,6 +109,9 @@ Return the name of a group based on the group name, this will be used for the fi
 #### client.dataReturnType
 <!--@include: ../plugin-client/dataReturnType.md-->
 
+### paramsType
+<!--@include: ../plugin-client/pathParamsType.md-->
+
 ### pathParamsType
 <!--@include: ../plugin-client/pathParamsType.md-->
 

diff --git a/e2e/package.json b/e2e/package.json
@@ -37,7 +37,7 @@
     "@tanstack/svelte-query": "^5.59.16",
     "@tanstack/vue-query": "^5.59.16",
     "axios": "^1.7.7",
-    "msw": "^2.5.2",
+    "msw": "^2.6.0",
     "react": "^18.3.1",
     "solid-js": "^1.9.3",
     "svelte": "^3.59.2",

diff --git a/examples/advanced/configs/kubb.config.ts b/examples/advanced/configs/kubb.config.ts
@@ -93,7 +93,7 @@ export default defineConfig(() => {
         },
         infinite: false,
         suspense: false,
-
+        paramsType: 'object',
         parser: 'zod',
       }),
       pluginSwr({
@@ -111,6 +111,7 @@ export default defineConfig(() => {
           importPath: '../../../../swr-client.ts',
           dataReturnType: 'data',
         },
+        paramsType: 'object',
         parser: 'zod',
         transformers: {
           name(name, type) {
@@ -132,6 +133,7 @@ export default defineConfig(() => {
         importPath: '../../../../axios-client.ts',
         operations: true,
         dataReturnType: 'full',
+        paramsType: 'object',
         pathParamsType: 'object',
       }),
       pluginZod({

diff --git a/examples/advanced/package.json b/examples/advanced/package.json
@@ -44,7 +44,7 @@
     "@tanstack/svelte-query": "^5.59.16",
     "@tanstack/vue-query": "^5.59.16",
     "axios": "^1.7.7",
-    "msw": "^2.5.2",
+    "msw": "^2.6.0",
     "react": "^18.3.1",
     "solid-js": "^1.9.3",
     "svelte": "^3.59.2",

diff --git a/examples/advanced/src/gen/clients/axios/petService/addPet.ts b/examples/advanced/src/gen/clients/axios/petService/addPet.ts
@@ -7,7 +7,14 @@ import type { AddPetMutationRequest, AddPetMutationResponse, AddPet405 } from '.
  * @summary Add a new pet to the store
  * @link /pet
  */
-export async function addPet(data: AddPetMutationRequest, config: Partial<RequestConfig<AddPetMutationRequest>> = {}) {
+export async function addPet(
+  {
+    data,
+  }: {
+    data: AddPetMutationRequest
+  },
+  config: Partial<RequestConfig<AddPetMutationRequest>> = {},
+) {
   const res = await client<AddPetMutationResponse, AddPet405, AddPetMutationRequest>({
     method: 'POST',
     url: '/pet',

diff --git a/examples/advanced/src/gen/clients/axios/petService/deletePet.ts b/examples/advanced/src/gen/clients/axios/petService/deletePet.ts
@@ -10,10 +10,11 @@ import type { DeletePetMutationResponse, DeletePetPathParams, DeletePetHeaderPar
 export async function deletePet(
   {
     petId,
+    headers,
   }: {
     petId: DeletePetPathParams['petId']
+    headers?: DeletePetHeaderParams
   },
-  headers?: DeletePetHeaderParams,
   config: Partial<RequestConfig> = {},
 ) {
   const res = await client<DeletePetMutationResponse, DeletePet400, unknown>({

diff --git a/examples/advanced/src/gen/clients/axios/petService/findPetsByStatus.ts b/examples/advanced/src/gen/clients/axios/petService/findPetsByStatus.ts
@@ -7,7 +7,14 @@ import type { FindPetsByStatusQueryResponse, FindPetsByStatusQueryParams, FindPe
  * @summary Finds Pets by status
  * @link /pet/findByStatus
  */
-export async function findPetsByStatus(params?: FindPetsByStatusQueryParams, config: Partial<RequestConfig> = {}) {
+export async function findPetsByStatus(
+  {
+    params,
+  }: {
+    params?: FindPetsByStatusQueryParams
+  },
+  config: Partial<RequestConfig> = {},
+) {
   const res = await client<FindPetsByStatusQueryResponse, FindPetsByStatus400, unknown>({
     method: 'GET',
     url: '/pet/findByStatus',

diff --git a/examples/advanced/src/gen/clients/axios/petService/findPetsByTags.ts b/examples/advanced/src/gen/clients/axios/petService/findPetsByTags.ts
@@ -12,7 +12,16 @@ import type {
  * @summary Finds Pets by tags
  * @link /pet/findByTags
  */
-export async function findPetsByTags(headers: FindPetsByTagsHeaderParams, params?: FindPetsByTagsQueryParams, config: Partial<RequestConfig> = {}) {
+export async function findPetsByTags(
+  {
+    headers,
+    params,
+  }: {
+    headers: FindPetsByTagsHeaderParams
+    params?: FindPetsByTagsQueryParams
+  },
+  config: Partial<RequestConfig> = {},
+) {
   const res = await client<FindPetsByTagsQueryResponse, FindPetsByTags400, unknown>({
     method: 'GET',
     url: '/pet/findByTags',

diff --git a/examples/advanced/src/gen/clients/axios/petService/updatePet.ts b/examples/advanced/src/gen/clients/axios/petService/updatePet.ts
@@ -13,7 +13,14 @@ import type {
  * @summary Update an existing pet
  * @link /pet
  */
-export async function updatePet(data: UpdatePetMutationRequest, config: Partial<RequestConfig<UpdatePetMutationRequest>> = {}) {
+export async function updatePet(
+  {
+    data,
+  }: {
+    data: UpdatePetMutationRequest
+  },
+  config: Partial<RequestConfig<UpdatePetMutationRequest>> = {},
+) {
   const res = await client<UpdatePetMutationResponse, UpdatePet400 | UpdatePet404 | UpdatePet405, UpdatePetMutationRequest>({
     method: 'PUT',
     url: '/pet',

diff --git a/examples/advanced/src/gen/clients/axios/petService/updatePetWithForm.ts b/examples/advanced/src/gen/clients/axios/petService/updatePetWithForm.ts
@@ -14,10 +14,11 @@ import type {
 export async function updatePetWithForm(
   {
     petId,
+    params,
   }: {
     petId: UpdatePetWithFormPathParams['petId']
+    params?: UpdatePetWithFormQueryParams
   },
-  params?: UpdatePetWithFormQueryParams,
   config: Partial<RequestConfig> = {},
 ) {
   const res = await client<UpdatePetWithFormMutationResponse, UpdatePetWithForm405, unknown>({

diff --git a/examples/advanced/src/gen/clients/axios/petService/uploadFile.ts b/examples/advanced/src/gen/clients/axios/petService/uploadFile.ts
@@ -14,11 +14,13 @@ import type {
 export async function uploadFile(
   {
     petId,
+    data,
+    params,
   }: {
     petId: UploadFilePathParams['petId']
+    data?: UploadFileMutationRequest
+    params?: UploadFileQueryParams
   },
-  data?: UploadFileMutationRequest,
-  params?: UploadFileQueryParams,
   config: Partial<RequestConfig<UploadFileMutationRequest>> = {},
 ) {
   const res = await client<UploadFileMutationResponse, Error, UploadFileMutationRequest>({

diff --git a/examples/advanced/src/gen/clients/axios/petsService/createPets.ts b/examples/advanced/src/gen/clients/axios/petsService/createPets.ts
@@ -15,12 +15,15 @@ import type {
 export async function createPets(
   {
     uuid,
+    data,
+    headers,
+    params,
   }: {
     uuid: CreatePetsPathParams['uuid']
+    data: CreatePetsMutationRequest
+    headers: CreatePetsHeaderParams
+    params?: CreatePetsQueryParams
   },
-  data: CreatePetsMutationRequest,
-  headers: CreatePetsHeaderParams,
-  params?: CreatePetsQueryParams,
   config: Partial<RequestConfig<CreatePetsMutationRequest>> = {},
 ) {
   const res = await client<CreatePetsMutationResponse, Error, CreatePetsMutationRequest>({

diff --git a/examples/advanced/src/gen/clients/axios/userService/createUser.ts b/examples/advanced/src/gen/clients/axios/userService/createUser.ts
@@ -7,7 +7,14 @@ import type { CreateUserMutationRequest, CreateUserMutationResponse } from '../.
  * @summary Create user
  * @link /user
  */
-export async function createUser(data?: CreateUserMutationRequest, config: Partial<RequestConfig<CreateUserMutationRequest>> = {}) {
+export async function createUser(
+  {
+    data,
+  }: {
+    data?: CreateUserMutationRequest
+  },
+  config: Partial<RequestConfig<CreateUserMutationRequest>> = {},
+) {
   const res = await client<CreateUserMutationResponse, Error, CreateUserMutationRequest>({
     method: 'POST',
     url: '/user',

diff --git a/examples/advanced/src/gen/clients/axios/userService/createUsersWithListInput.ts b/examples/advanced/src/gen/clients/axios/userService/createUsersWithListInput.ts
@@ -11,7 +11,11 @@ import type {
  * @link /user/createWithList
  */
 export async function createUsersWithListInput(
-  data?: CreateUsersWithListInputMutationRequest,
+  {
+    data,
+  }: {
+    data?: CreateUsersWithListInputMutationRequest
+  },
   config: Partial<RequestConfig<CreateUsersWithListInputMutationRequest>> = {},
 ) {
   const res = await client<CreateUsersWithListInputMutationResponse, Error, CreateUsersWithListInputMutationRequest>({