@kubb/plugin-vue-query 3.0.0-beta.1 → 3.0.0-beta.11

package/src/components/Query.tsx

@@ -3,6 +3,7 @@ import { File, Function, FunctionParams } from '@kubb/react'
 import { type Operation, isOptional } from '@kubb/oas'
 import type { OperationSchemas } from '@kubb/plugin-oas'
 import { getComments, getPathParams } from '@kubb/plugin-oas/utils'
+import type { PluginReactQuery } from '@kubb/plugin-react-query'
 import type { ReactNode } from 'react'
 import type { PluginVueQuery } from '../types.ts'
 import { QueryKey } from './QueryKey.tsx'
@@ -18,22 +19,72 @@ type Props = {
   queryKeyTypeName: string
   typeSchemas: OperationSchemas
   operation: Operation
+  paramsType: PluginVueQuery['resolvedOptions']['paramsType']
   pathParamsType: PluginVueQuery['resolvedOptions']['pathParamsType']
   dataReturnType: PluginVueQuery['resolvedOptions']['client']['dataReturnType']
 }
 
 type GetParamsProps = {
+  paramsType: PluginVueQuery['resolvedOptions']['paramsType']
   pathParamsType: PluginVueQuery['resolvedOptions']['pathParamsType']
   dataReturnType: PluginVueQuery['resolvedOptions']['client']['dataReturnType']
   typeSchemas: OperationSchemas
 }
 
-function getParams({ pathParamsType, dataReturnType, typeSchemas }: GetParamsProps) {
+function getParams({ paramsType, pathParamsType, dataReturnType, typeSchemas }: GetParamsProps) {
   const TData = dataReturnType === 'data' ? typeSchemas.response.name : `ResponseConfig<${typeSchemas.response.name}>`
 
+  if (paramsType === 'object') {
+    return FunctionParams.factory({
+      data: {
+        mode: 'object',
+        children: {
+          ...getPathParams(typeSchemas.pathParams, {
+            typed: true,
+            override(item) {
+              return {
+                ...item,
+                type: `MaybeRef<${item.type}>`,
+              }
+            },
+          }),
+          data: typeSchemas.request?.name
+            ? {
+                type: `MaybeRef<${typeSchemas.request?.name}>`,
+                optional: isOptional(typeSchemas.request?.schema),
+              }
+            : undefined,
+          params: typeSchemas.queryParams?.name
+            ? {
+                type: `MaybeRef<${typeSchemas.queryParams?.name}>`,
+                optional: isOptional(typeSchemas.queryParams?.schema),
+              }
+            : undefined,
+          headers: typeSchemas.headerParams?.name
+            ? {
+                type: `MaybeRef<${typeSchemas.headerParams?.name}>`,
+                optional: isOptional(typeSchemas.headerParams?.schema),
+              }
+            : undefined,
+        },
+      },
+      options: {
+        type: `
+{
+  query?: Partial<QueryObserverOptions<${[TData, typeSchemas.errors?.map((item) => item.name).join(' | ') || 'Error', 'TData', 'TQueryData', 'TQueryKey'].join(', ')}>>,
+  client?: ${typeSchemas.request?.name ? `Partial<RequestConfig<${typeSchemas.request?.name}>>` : 'Partial<RequestConfig>'}
+}
+`,
+        default: '{}',
+      },
+    })
+  }
+
   return FunctionParams.factory({
     pathParams: {
       mode: pathParamsType === 'object' ? 'object' : 'inlineSpread',
+      type: typeSchemas.pathParams?.name,
+      optional: isOptional(typeSchemas.pathParams?.schema),
       children: getPathParams(typeSchemas.pathParams, {
         typed: true,
         override(item) {
@@ -74,7 +125,17 @@ function getParams({ pathParamsType, dataReturnType, typeSchemas }: GetParamsPro
   })
 }
 
-export function Query({ name, queryKeyTypeName, queryOptionsName, queryKeyName, pathParamsType, dataReturnType, typeSchemas, operation }: Props): ReactNode {
+export function Query({
+  name,
+  queryKeyTypeName,
+  queryOptionsName,
+  queryKeyName,
+  paramsType,
+  pathParamsType,
+  dataReturnType,
+  typeSchemas,
+  operation,
+}: Props): ReactNode {
   const TData = dataReturnType === 'data' ? typeSchemas.response.name : `ResponseConfig<${typeSchemas.response.name}>`
   const returnType = `UseQueryReturnType<${['TData', typeSchemas.errors?.map((item) => item.name).join(' | ') || 'Error'].join(', ')}> & { queryKey: TQueryKey }`
   const generics = [`TData = ${TData}`, `TQueryData = ${TData}`, `TQueryKey extends QueryKey = ${queryKeyTypeName}`]
@@ -84,10 +145,12 @@ export function Query({ name, queryKeyTypeName, queryOptionsName, queryKeyName,
     typeSchemas,
   })
   const queryOptionsParams = QueryOptions.getParams({
+    paramsType,
     pathParamsType,
     typeSchemas,
   })
   const params = getParams({
+    paramsType,
     pathParamsType,
     dataReturnType,
     typeSchemas,

package/src/components/QueryOptions.tsx

@@ -6,6 +6,7 @@ import type { ReactNode } from 'react'
 import { isOptional } from '@kubb/oas'
 import { Client } from '@kubb/plugin-client/components'
 import type { OperationSchemas } from '@kubb/plugin-oas'
+import type { PluginReactQuery } from '@kubb/plugin-react-query'
 import type { PluginVueQuery } from '../types.ts'
 import { QueryKey } from './QueryKey.tsx'
 
@@ -14,18 +15,63 @@ type Props = {
   clientName: string
   queryKeyName: string
   typeSchemas: OperationSchemas
+  paramsType: PluginVueQuery['resolvedOptions']['paramsType']
   pathParamsType: PluginVueQuery['resolvedOptions']['pathParamsType']
 }
 
 type GetParamsProps = {
+  paramsType: PluginVueQuery['resolvedOptions']['paramsType']
   pathParamsType: PluginVueQuery['resolvedOptions']['pathParamsType']
   typeSchemas: OperationSchemas
 }
 
-function getParams({ pathParamsType, typeSchemas }: GetParamsProps) {
+function getParams({ paramsType, pathParamsType, typeSchemas }: GetParamsProps) {
+  if (paramsType === 'object') {
+    return FunctionParams.factory({
+      data: {
+        mode: 'object',
+        children: {
+          ...getPathParams(typeSchemas.pathParams, {
+            typed: true,
+            override(item) {
+              return {
+                ...item,
+                type: `MaybeRef<${item.type}>`,
+              }
+            },
+          }),
+          data: typeSchemas.request?.name
+            ? {
+                type: `MaybeRef<${typeSchemas.request?.name}>`,
+                optional: isOptional(typeSchemas.request?.schema),
+              }
+            : undefined,
+          params: typeSchemas.queryParams?.name
+            ? {
+                type: `MaybeRef<${typeSchemas.queryParams?.name}>`,
+                optional: isOptional(typeSchemas.queryParams?.schema),
+              }
+            : undefined,
+          headers: typeSchemas.headerParams?.name
+            ? {
+                type: `MaybeRef<${typeSchemas.queryParams?.name}>`,
+                optional: isOptional(typeSchemas.headerParams?.schema),
+              }
+            : undefined,
+        },
+      },
+      config: {
+        type: typeSchemas.request?.name ? `Partial<RequestConfig<${typeSchemas.request?.name}>>` : 'Partial<RequestConfig>',
+        default: '{}',
+      },
+    })
+  }
+
   return FunctionParams.factory({
     pathParams: {
       mode: pathParamsType === 'object' ? 'object' : 'inlineSpread',
+      type: typeSchemas.pathParams?.name,
+      optional: isOptional(typeSchemas.pathParams?.schema),
       children: getPathParams(typeSchemas.pathParams, {
         typed: true,
         override(item) {
@@ -61,9 +107,10 @@ function getParams({ pathParamsType, typeSchemas }: GetParamsProps) {
   })
 }
 
-export function QueryOptions({ name, clientName, typeSchemas, pathParamsType, queryKeyName }: Props): ReactNode {
-  const params = getParams({ pathParamsType, typeSchemas })
+export function QueryOptions({ name, clientName, typeSchemas, paramsType, pathParamsType, queryKeyName }: Props): ReactNode {
+  const params = getParams({ paramsType, pathParamsType, typeSchemas })
   const clientParams = Client.getParams({
+    paramsType,
     typeSchemas,
     pathParamsType,
   })

package/src/generators/__snapshots__/findByTagsObject.ts

@@ -0,0 +1,62 @@
+import client from "@kubb/plugin-client/client";
+import type { RequestConfig } from "@kubb/plugin-client/client";
+import type { QueryKey, QueryObserverOptions, UseQueryReturnType } from "@tanstack/react-query";
+import type { MaybeRef } from "vue";
+import { useQuery, queryOptions } from "@tanstack/react-query";
+import { unref } from "vue";
+
+ export const findPetsByTagsQueryKey = (params?: MaybeRef<FindPetsByTagsQueryParams>) => [{ url: "/pet/findByTags" }, ...(params ? [params] : [])] as const;
+
+ export type FindPetsByTagsQueryKey = ReturnType<typeof findPetsByTagsQueryKey>;
+
+ /**
+ * @description Multiple tags can be provided with comma separated strings. Use tag1, tag2, tag3 for testing.
+ * @summary Finds Pets by tags
+ * @link /pet/findByTags
+ */
+async function findPetsByTags({ headers, params }: {
+    headers: FindPetsByTagsHeaderParams;
+    params?: FindPetsByTagsQueryParams;
+}, config: Partial<RequestConfig> = {}) {
+    const res = await client<FindPetsByTagsQueryResponse, FindPetsByTags400, unknown>({ method: "GET", url: `/pet/findByTags`, params, headers: { ...headers, ...config.headers }, ...config });
+    return findPetsByTagsQueryResponse.parse(res.data);
+}
+
+ export function findPetsByTagsQueryOptions({ headers, params }: {
+    headers: MaybeRef<FindPetsByTagsQueryParams>;
+    params?: MaybeRef<FindPetsByTagsQueryParams>;
+}, config: Partial<RequestConfig> = {}) {
+    const queryKey = findPetsByTagsQueryKey(params);
+    return queryOptions({
+        queryKey,
+        queryFn: async ({ signal }) => {
+            config.signal = signal;
+            return findPetsByTags(unref({ headers: unref(headers), params: unref(params) }), unref(config));
+        },
+    });
+}
+
+ /**
+ * @description Multiple tags can be provided with comma separated strings. Use tag1, tag2, tag3 for testing.
+ * @summary Finds Pets by tags
+ * @link /pet/findByTags
+ */
+export function useFindPetsByTags<TData = FindPetsByTagsQueryResponse, TQueryData = FindPetsByTagsQueryResponse, TQueryKey extends QueryKey = FindPetsByTagsQueryKey>({ headers, params }: {
+    headers: MaybeRef<FindPetsByTagsHeaderParams>;
+    params?: MaybeRef<FindPetsByTagsQueryParams>;
+}, options: {
+    query?: Partial<QueryObserverOptions<FindPetsByTagsQueryResponse, FindPetsByTags400, TData, TQueryData, TQueryKey>>;
+    client?: Partial<RequestConfig>;
+} = {}) {
+    const { query: queryOptions, client: config = {} } = options ?? {};
+    const queryKey = queryOptions?.queryKey ?? findPetsByTagsQueryKey(params);
+    const query = useQuery({
+        ...findPetsByTagsQueryOptions({ headers, params }, config) as unknown as QueryObserverOptions,
+        queryKey: queryKey as QueryKey,
+        ...queryOptions as unknown as Omit<QueryObserverOptions, "queryKey">
+    }) as UseQueryReturnType<TData, FindPetsByTags400> & {
+        queryKey: TQueryKey;
+    };
+    query.queryKey = queryKey as TQueryKey;
+    return query;
+}

package/src/generators/__snapshots__/updatePetByIdPathParamsObject.ts

@@ -12,9 +12,7 @@ import { useMutation } from "@tanstack/react-query";
  * @summary Updates a pet in the store with form data
  * @link /pet/:petId
  */
-async function updatePetWithForm({ petId }: {
-    petId: UpdatePetWithFormPathParams["petId"];
-}, data?: UpdatePetWithFormMutationRequest, params?: UpdatePetWithFormQueryParams, config: Partial<RequestConfig<UpdatePetWithFormMutationRequest>> = {}) {
+async function updatePetWithForm({ petId }: UpdatePetWithFormPathParams, data?: UpdatePetWithFormMutationRequest, params?: UpdatePetWithFormQueryParams, config: Partial<RequestConfig<UpdatePetWithFormMutationRequest>> = {}) {
     const res = await client<UpdatePetWithFormMutationResponse, UpdatePetWithForm405, UpdatePetWithFormMutationRequest>({ method: "POST", url: `/pet/${petId}`, params, data, ...config });
     return updatePetWithFormMutationResponse.parse(res.data);
 }

package/src/generators/infiniteQueryGenerator.tsx

@@ -1,4 +1,3 @@
-import transformers from '@kubb/core/transformers'
 import { pluginClientName } from '@kubb/plugin-client'
 import { Client } from '@kubb/plugin-client/components'
 import { createReactGenerator } from '@kubb/plugin-oas'
@@ -95,11 +94,12 @@ export const infiniteQueryGenerator = createReactGenerator<PluginVueQuery>({
           name={client.name}
           isExportable={false}
           isIndexable={false}
-          baseURL={options.baseURL}
+          baseURL={options.client.baseURL}
           operation={operation}
           typeSchemas={type.schemas}
           zodSchemas={zod.schemas}
           dataReturnType={options.client.dataReturnType}
+          paramsType={options.paramsType}
           pathParamsType={options.pathParamsType}
           parser={options.parser}
         />
@@ -108,6 +108,7 @@ export const infiniteQueryGenerator = createReactGenerator<PluginVueQuery>({
           clientName={client.name}
           queryKeyName={queryKey.name}
           typeSchemas={type.schemas}
+          paramsType={options.paramsType}
           pathParamsType={options.pathParamsType}
           dataReturnType={options.client.dataReturnType}
           cursorParam={options.infinite.cursorParam}
@@ -118,6 +119,7 @@ export const infiniteQueryGenerator = createReactGenerator<PluginVueQuery>({
           name={query.name}
           queryOptionsName={queryOptions.name}
           typeSchemas={type.schemas}
+          paramsType={options.paramsType}
           pathParamsType={options.pathParamsType}
           operation={operation}
           dataReturnType={options.client.dataReturnType}

package/src/generators/mutationGenerator.tsx

@@ -1,4 +1,3 @@
-import transformers from '@kubb/core/transformers'
 import { pluginClientName } from '@kubb/plugin-client'
 import { Client } from '@kubb/plugin-client/components'
 import { createReactGenerator } from '@kubb/plugin-oas'
@@ -85,11 +84,12 @@ export const mutationGenerator = createReactGenerator<PluginVueQuery>({
           name={client.name}
           isExportable={false}
           isIndexable={false}
-          baseURL={options.baseURL}
+          baseURL={options.client.baseURL}
           operation={operation}
           typeSchemas={type.schemas}
           zodSchemas={zod.schemas}
           dataReturnType={options.client.dataReturnType}
+          paramsType={options.paramsType}
           pathParamsType={options.pathParamsType}
           parser={options.parser}
         />
@@ -100,6 +100,7 @@ export const mutationGenerator = createReactGenerator<PluginVueQuery>({
           typeSchemas={type.schemas}
           operation={operation}
           dataReturnType={options.client.dataReturnType}
+          paramsType={options.paramsType}
           pathParamsType={options.pathParamsType}
           mutationKeyName={mutationKey.name}
         />

package/src/generators/queryGenerator.tsx

@@ -1,4 +1,3 @@
-import transformers from '@kubb/core/transformers'
 import { pluginClientName } from '@kubb/plugin-client'
 import { Client } from '@kubb/plugin-client/components'
 import { createReactGenerator } from '@kubb/plugin-oas'
@@ -92,11 +91,12 @@ export const queryGenerator = createReactGenerator<PluginVueQuery>({
           name={client.name}
           isExportable={false}
           isIndexable={false}
-          baseURL={options.baseURL}
+          baseURL={options.client.baseURL}
           operation={operation}
           typeSchemas={type.schemas}
           zodSchemas={zod.schemas}
           dataReturnType={options.client.dataReturnType}
+          paramsType={options.paramsType}
           pathParamsType={options.pathParamsType}
           parser={options.parser}
         />
@@ -105,12 +105,14 @@ export const queryGenerator = createReactGenerator<PluginVueQuery>({
           clientName={client.name}
           queryKeyName={queryKey.name}
           typeSchemas={type.schemas}
+          paramsType={options.paramsType}
           pathParamsType={options.pathParamsType}
         />
         <Query
           name={query.name}
           queryOptionsName={queryOptions.name}
           typeSchemas={type.schemas}
+          paramsType={options.paramsType}
           pathParamsType={options.pathParamsType}
           operation={operation}
           dataReturnType={options.client.dataReturnType}

package/src/plugin.ts

@@ -2,7 +2,6 @@ import path from 'node:path'
 
 import { FileManager, type Group, PluginManager, createPlugin } from '@kubb/core'
 import { camelCase, pascalCase } from '@kubb/core/transformers'
-import { renderTemplate } from '@kubb/core/utils'
 import { OperationGenerator, pluginOasName } from '@kubb/plugin-oas'
 
 import { pluginTsName } from '@kubb/plugin-ts'
@@ -25,6 +24,7 @@ export const pluginVueQuery = createPlugin<PluginVueQuery>((options) => {
     parser = 'client',
     infinite,
     transformers = {},
+    paramsType = 'inline',
     pathParamsType = 'inline',
     mutation = {},
     query = {},
@@ -35,7 +35,6 @@ export const pluginVueQuery = createPlugin<PluginVueQuery>((options) => {
     name: pluginVueQueryName,
     options: {
       output,
-      baseURL: undefined,
       client: {
         importPath: '@kubb/plugin-client/client',
         dataReturnType: 'data',
@@ -62,7 +61,8 @@ export const pluginVueQuery = createPlugin<PluginVueQuery>((options) => {
         importPath: '@tanstack/vue-query',
         ...mutation,
       },
-      pathParamsType,
+      paramsType,
+      pathParamsType: paramsType === 'object' ? 'object' : pathParamsType,
       parser,
     },
     pre: [pluginOasName, pluginTsName, parser === 'zod' ? pluginZodName : undefined].filter(Boolean),
@@ -112,22 +112,19 @@ export const pluginVueQuery = createPlugin<PluginVueQuery>((options) => {
       const mode = FileManager.getMode(path.resolve(root, output.path))
       const baseURL = await swaggerPlugin.context.getBaseURL()
 
-      const operationGenerator = new OperationGenerator(
-        {
-          ...this.plugin.options,
-          baseURL,
-        },
-        {
-          oas,
-          pluginManager: this.pluginManager,
-          plugin: this.plugin,
-          contentType: swaggerPlugin.context.contentType,
-          exclude,
-          include,
-          override,
-          mode,
-        },
-      )
+      if (baseURL) {
+        this.plugin.options.client.baseURL = baseURL
+      }
+      const operationGenerator = new OperationGenerator(this.plugin.options, {
+        oas,
+        pluginManager: this.pluginManager,
+        plugin: this.plugin,
+        contentType: swaggerPlugin.context.contentType,
+        exclude,
+        include,
+        override,
+        mode,
+      })
 
       const files = await operationGenerator.build(...generators)
       await this.addFile(...files)

package/src/types.ts

@@ -3,6 +3,7 @@ import type { Group, Output, PluginFactoryOptions, ResolveNameParams } from '@ku
 import type { HttpMethod } from '@kubb/oas'
 import type { PluginClient } from '@kubb/plugin-client'
 import type { Exclude, Generator, Include, Override, ResolvePathOptions } from '@kubb/plugin-oas'
+import type { PluginReactQuery } from '@kubb/plugin-react-query'
 
 type Query = {
   /**
@@ -63,24 +64,15 @@ export type Infinite = {
 
 export type Options = {
   /**
-   * @default 'hooks'
+   * Specify the export location for the files and define the behavior of the output
+   * @default { path: 'hooks', barrelType: 'named' }
    */
   output?: Output
   /**
    * Group the @tanstack/query hooks based on the provided name.
    */
   group?: Group
-  client?: Pick<PluginClient['options'], 'dataReturnType' | 'importPath'>
-
-  /**
-   * ReturnType that needs to be used when calling client().
-   *
-   * `Data` will return ResponseConfig[data].
-   *
-   * `Full` will return ResponseConfig.
-   * @default `'data'`
-   * @private
-   */
+  client?: Pick<PluginClient['options'], 'dataReturnType' | 'importPath' | 'baseURL'>
 
   /**
    * Array containing exclude parameters to exclude/skip tags/operations/methods/paths.
@@ -94,14 +86,18 @@ export type Options = {
    * Array containing override parameters to override `options` based on tags/operations/methods/paths.
    */
   override?: Array<Override<ResolvedOptions>>
+  /**
+   * How to pass your params
+   * - 'object' will return the params and pathParams as an object.
+   * - 'inline' will return the params as comma separated params.
+   * @default 'inline'
+   */
+  paramsType?: 'object' | 'inline'
   /**
    * How to pass your pathParams.
-   *
-   * `object` will return the pathParams as an object.
-   *
-   * `inline` will return the pathParams as comma separated params.
-   * @default `'inline'`
-   * @private
+   * - 'object' will return the pathParams as an object.
+   * - 'inline' will return the pathParams as comma separated params.
+   * @default 'inline'
    */
   pathParamsType?: PluginClient['options']['pathParamsType']
   /**
@@ -117,7 +113,7 @@ export type Options = {
    */
   mutation?: Mutation | false
   /**
-   * Which parser can be used before returning the data to `@tanstack/query`.
+   * Which parser should be used before returning the data to `@tanstack/query`.
    * `'zod'` will use `@kubb/plugin-zod` to parse the data.
    */
   parser?: PluginClient['options']['parser']
@@ -135,9 +131,9 @@ export type Options = {
 
 type ResolvedOptions = {
   output: Output
-  baseURL: string | undefined
-  client: Required<NonNullable<PluginVueQuery['options']['client']>>
+  client: Required<Omit<NonNullable<PluginReactQuery['options']['client']>, 'baseURL'>> & { baseURL?: string }
   parser: Required<NonNullable<Options['parser']>>
+  paramsType: NonNullable<Options['paramsType']>
   pathParamsType: NonNullable<Options['pathParamsType']>
   /**
    * Only used of infinite