@kubb/plugin-vue-query 5.0.0-beta.3 → 5.0.0-beta.31

package/package.json

@@ -1,26 +1,23 @@
 {
   "name": "@kubb/plugin-vue-query",
-  "version": "5.0.0-beta.3",
-  "description": "Vue Query hooks generator plugin for Kubb, creating type-safe API client hooks from OpenAPI specifications for Vue.js applications.",
+  "version": "5.0.0-beta.31",
+  "description": "Generate type-safe TanStack Query (Vue Query) composables from your OpenAPI specification. Covers useQuery, useMutation, useInfiniteQuery, and queryOptions with Vue 3 Composition API support.",
   "keywords": [
-    "api-client",
-    "code-generator",
+    "code-generation",
     "codegen",
     "composables",
+    "composition-api",
     "data-fetching",
-    "hooks",
     "kubb",
-    "oas",
     "openapi",
-    "plugins",
-    "sdk-generator",
     "swagger",
+    "tanstack",
     "tanstack-query",
-    "type-safe",
     "typescript",
+    "use-mutation",
+    "use-query",
     "vue",
     "vue-query",
-    "vue.js",
     "vue3"
   ],
   "license": "MIT",
@@ -33,7 +30,7 @@
   "files": [
     "src",
     "dist",
-    "plugin.json",
+    "extension.yaml",
     "!/**/**.test.**",
     "!/**/__tests__/**",
     "!/**/__snapshots__/**"
@@ -73,19 +70,20 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@kubb/core": "5.0.0-beta.3",
-    "@kubb/renderer-jsx": "5.0.0-beta.3",
-    "remeda": "^2.34.0",
-    "@kubb/plugin-client": "5.0.0-beta.3",
-    "@kubb/plugin-ts": "5.0.0-beta.3",
-    "@kubb/plugin-zod": "5.0.0-beta.3"
+    "@kubb/core": "5.0.0-beta.31",
+    "@kubb/renderer-jsx": "5.0.0-beta.31",
+    "remeda": "^2.34.1",
+    "@kubb/plugin-client": "5.0.0-beta.31",
+    "@kubb/plugin-ts": "5.0.0-beta.31",
+    "@kubb/plugin-zod": "5.0.0-beta.31"
   },
   "devDependencies": {
+    "@internals/shared": "0.0.0",
     "@internals/tanstack-query": "0.0.0",
     "@internals/utils": "0.0.0"
   },
   "peerDependencies": {
-    "@kubb/renderer-jsx": "5.0.0-beta.3"
+    "@kubb/renderer-jsx": "5.0.0-beta.31"
   },
   "size-limit": [
     {

package/src/components/InfiniteQuery.tsx

@@ -4,8 +4,9 @@ import { functionPrinter } from '@kubb/plugin-ts'
 import { File, Function } from '@kubb/renderer-jsx'
 import type { KubbReactNode } from '@kubb/renderer-jsx/types'
 import type { Infinite, PluginVueQuery } from '../types.ts'
-import { getComments, resolveErrorNames } from '../utils.ts'
-import { QueryKey } from './QueryKey.tsx'
+import { getEnabledParamNames, markParamsOptional } from '@internals/tanstack-query'
+import { getComments, resolveErrorNames, resolveSuccessNames, wrapWithMaybeRefOrGetter } from '../utils.ts'
+import { buildQueryKeyParamsNode } from './QueryKey.tsx'
 import { getQueryOptionsParams } from './QueryOptions.tsx'
 
 type Props = {
@@ -26,7 +27,7 @@ type Props = {
 const declarationPrinter = functionPrinter({ mode: 'declaration' })
 const callPrinter = functionPrinter({ mode: 'call' })
 
-function getParams(
+function buildInfiniteQueryParamsNode(
   node: ast.OperationNode,
   options: {
     paramsType: PluginVueQuery['resolvedOptions']['paramsType']
@@ -37,8 +38,9 @@ function getParams(
   },
 ): ast.FunctionParametersNode {
   const { paramsType, paramsCasing, pathParamsType, dataReturnType, resolver } = options
-  const responseName = resolver.resolveResponseName(node)
-  const requestName = node.requestBody?.content?.[0]?.schema ? resolver.resolveDataName(node) : undefined
+  const successNames = resolveSuccessNames(node, resolver)
+  const responseName = successNames.length > 0 ? successNames.join(' | ') : resolver.resolveResponseName(node)
+  const requestName = node.requestBody?.content?.[0]?.schema ? resolver.resolveDataName(node) : null
   const errorNames = resolveErrorNames(node, resolver)
 
   const TData = dataReturnType === 'data' ? responseName : `ResponseConfig<${responseName}>`
@@ -64,44 +66,7 @@ function getParams(
     extraParams: [optionsParam],
   })
 
-  return wrapOperationParamsWithMaybeRef(baseParams)
-}
-
-function wrapOperationParamsWithMaybeRef(paramsNode: ast.FunctionParametersNode): ast.FunctionParametersNode {
-  const wrappedParams = paramsNode.params.map((param) => {
-    if ('kind' in param && (param as ast.ParameterGroupNode).kind === 'ParameterGroup') {
-      const group = param as ast.ParameterGroupNode
-      return {
-        ...group,
-        properties: group.properties.map((p) => ({
-          ...p,
-          type: p.type ? ast.createParamsType({ variant: 'reference', name: `MaybeRefOrGetter<${printType(p.type)}>` }) : p.type,
-        })),
-      }
-    }
-    const fp = param as ast.FunctionParameterNode
-    if (fp.name === 'options') return fp
-    return {
-      ...fp,
-      type: fp.type ? ast.createParamsType({ variant: 'reference', name: `MaybeRefOrGetter<${printType(fp.type)}>` }) : fp.type,
-    }
-  })
-  return ast.createFunctionParameters({ params: wrappedParams })
-}
-
-function printType(typeNode: ast.ParamsTypeNode | undefined): string {
-  if (!typeNode) return 'unknown'
-  if (typeNode.variant === 'reference') return typeNode.name
-  if (typeNode.variant === 'member') return `${typeNode.base}['${typeNode.key}']`
-  if (typeNode.variant === 'struct') {
-    const parts = typeNode.properties.map((p) => {
-      const typeStr = printType(p.type)
-      const key = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(p.name) ? p.name : JSON.stringify(p.name)
-      return p.optional ? `${key}?: ${typeStr}` : `${key}: ${typeStr}`
-    })
-    return `{ ${parts.join('; ')} }`
-  }
-  return 'unknown'
+  return wrapWithMaybeRefOrGetter(baseParams, (name) => name === 'options')
 }
 
 export function InfiniteQuery({
@@ -116,7 +81,8 @@ export function InfiniteQuery({
   node,
   tsResolver,
 }: Props): KubbReactNode {
-  const responseName = tsResolver.resolveResponseName(node)
+  const successNames = resolveSuccessNames(node, tsResolver)
+  const responseName = successNames.length > 0 ? successNames.join(' | ') : tsResolver.resolveResponseName(node)
   const errorNames = resolveErrorNames(node, tsResolver)
 
   const TData = dataReturnType === 'data' ? responseName : `ResponseConfig<${responseName}>`
@@ -124,13 +90,17 @@ export function InfiniteQuery({
   const returnType = `UseInfiniteQueryReturnType<${['TData', TError].join(', ')}> & { queryKey: TQueryKey }`
   const generics = [`TData = InfiniteData<${TData}>`, `TQueryData = ${TData}`, `TQueryKey extends QueryKey = ${queryKeyTypeName}`]
 
-  const queryKeyParamsNode = QueryKey.getParams(node, { pathParamsType, paramsCasing, resolver: tsResolver })
+  const queryKeyParamsNode = buildQueryKeyParamsNode(node, { pathParamsType, paramsCasing, resolver: tsResolver })
   const queryKeyParamsCall = callPrinter.print(queryKeyParamsNode) ?? ''
+  const enabledNames = getEnabledParamNames(queryKeyParamsNode)
 
   const queryOptionsParamsNode = getQueryOptionsParams(node, { paramsType, paramsCasing, pathParamsType, resolver: tsResolver })
   const queryOptionsParamsCall = callPrinter.print(queryOptionsParamsNode) ?? ''
 
-  const paramsNode = getParams(node, { paramsType, paramsCasing, pathParamsType, dataReturnType, resolver: tsResolver })
+  const paramsNode = markParamsOptional(
+    buildInfiniteQueryParamsNode(node, { paramsType, paramsCasing, pathParamsType, dataReturnType, resolver: tsResolver }),
+    enabledNames,
+  )
   const paramsSignature = declarationPrinter.print(paramsNode) ?? ''
 
   return (
@@ -155,5 +125,3 @@ export function InfiniteQuery({
     </File.Source>
   )
 }
-
-InfiniteQuery.getParams = getParams

package/src/components/InfiniteQueryOptions.tsx

@@ -1,3 +1,4 @@
+import { getOperationParameters } from '@internals/shared'
 import { getNestedAccessor } from '@internals/utils'
 import type { ast } from '@kubb/core'
 import type { ResolverTs } from '@kubb/plugin-ts'
@@ -5,9 +6,10 @@ import { functionPrinter } from '@kubb/plugin-ts'
 import { File, Function } from '@kubb/renderer-jsx'
 import type { KubbReactNode } from '@kubb/renderer-jsx/types'
 import type { Infinite, PluginVueQuery } from '../types.ts'
-import { resolveErrorNames } from '../utils.ts'
-import { QueryKey } from './QueryKey.tsx'
-import { buildEnabledCheck, getQueryOptionsParams } from './QueryOptions.tsx'
+import { resolveErrorNames, resolveSuccessNames } from '../utils.ts'
+import { buildQueryKeyParamsNode } from './QueryKey.tsx'
+import { getEnabledParamNames, markParamsOptional } from '@internals/tanstack-query'
+import { getQueryOptionsParams } from './QueryOptions.tsx'
 
 type Props = {
   name: string
@@ -45,7 +47,8 @@ export function InfiniteQueryOptions({
   queryParam,
   queryKeyName,
 }: Props): KubbReactNode {
-  const responseName = tsResolver.resolveResponseName(node)
+  const successNames = resolveSuccessNames(node, tsResolver)
+  const responseName = successNames.length > 0 ? successNames.join(' | ') : tsResolver.resolveResponseName(node)
   const queryFnDataType = dataReturnType === 'data' ? responseName : `ResponseConfig<${responseName}>`
   const errorNames = resolveErrorNames(node, tsResolver)
   const errorType = `ResponseErrorConfig<${errorNames.length > 0 ? errorNames.join(' | ') : 'Error'}>`
@@ -65,61 +68,51 @@ export function InfiniteQueryOptions({
           ? 'boolean'
           : 'unknown'
 
-  const rawQueryParams = node.parameters.filter((p) => p.in === 'query')
+  const rawQueryParams = getOperationParameters(node).query
   const queryParamsTypeName =
     rawQueryParams.length > 0
       ? (() => {
           const groupName = tsResolver.resolveQueryParamsName(node, rawQueryParams[0]!)
           const individualName = tsResolver.resolveParamName(node, rawQueryParams[0]!)
-          return groupName !== individualName ? groupName : undefined
+          return groupName !== individualName ? groupName : null
         })()
-      : undefined
+      : null
 
-  const queryParamType = queryParam && queryParamsTypeName ? `${queryParamsTypeName}['${queryParam}']` : undefined
+  const queryParamType = queryParam && queryParamsTypeName ? `${queryParamsTypeName}['${queryParam}']` : null
   const pageParamType = queryParamType ? (isInitialPageParamDefined ? `NonNullable<${queryParamType}>` : queryParamType) : fallbackPageParamType
 
-  const paramsNode = getQueryOptionsParams(node, { paramsType, paramsCasing, pathParamsType, resolver: tsResolver })
-  const paramsSignature = declarationPrinter.print(paramsNode) ?? ''
-  const rawParamsCall = callPrinter.print(paramsNode) ?? ''
-  const clientCallStr = rawParamsCall.replace(/\bconfig\b(?=[^,]*$)/, '{ ...config, signal: config.signal ?? signal }')
-
-  const queryKeyParamsNode = QueryKey.getParams(node, { pathParamsType, paramsCasing, resolver: tsResolver })
+  const queryKeyParamsNode = buildQueryKeyParamsNode(node, { pathParamsType, paramsCasing, resolver: tsResolver })
   const queryKeyParamsCall = callPrinter.print(queryKeyParamsNode) ?? ''
 
-  const enabledSource = buildEnabledCheck(queryKeyParamsNode)
-  const enabledText = enabledSource ? `enabled: () => !!(${enabledSource}),` : ''
+  const enabledNames = getEnabledParamNames(queryKeyParamsNode)
+  const enabledText = enabledNames.length ? `enabled: () => ${enabledNames.map((n) => `!!toValue(${n})`).join(' && ')},` : ''
 
-  const hasNewParams = nextParam !== undefined || previousParam !== undefined
+  const paramsNode = markParamsOptional(getQueryOptionsParams(node, { paramsType, paramsCasing, pathParamsType, resolver: tsResolver }), enabledNames)
+  const paramsSignature = declarationPrinter.print(paramsNode) ?? ''
+  const rawParamsCall = callPrinter.print(paramsNode) ?? ''
+  const clientCallStr = rawParamsCall.replace(/\bconfig\b(?=[^,]*$)/, '{ ...config, signal: config.signal ?? signal }')
 
-  let getNextPageParamExpr: string | undefined
-  let getPreviousPageParamExpr: string | undefined
+  const hasNewParams = nextParam != null || previousParam != null
 
-  if (hasNewParams) {
-    if (nextParam) {
-      const accessor = getNestedAccessor(nextParam, 'lastPage')
-      if (accessor) {
-        getNextPageParamExpr = `getNextPageParam: (lastPage) => ${accessor}`
-      }
-    }
-    if (previousParam) {
-      const accessor = getNestedAccessor(previousParam, 'firstPage')
-      if (accessor) {
-        getPreviousPageParamExpr = `getPreviousPageParam: (firstPage) => ${accessor}`
-      }
+  const [getNextPageParamExpr, getPreviousPageParamExpr] = (() => {
+    if (hasNewParams) {
+      const nextAccessor = nextParam ? getNestedAccessor(nextParam, 'lastPage') : null
+      const prevAccessor = previousParam ? getNestedAccessor(previousParam, 'firstPage') : null
+      return [
+        nextAccessor ? `getNextPageParam: (lastPage) => ${nextAccessor}` : null,
+        prevAccessor ? `getPreviousPageParam: (firstPage) => ${prevAccessor}` : null,
+      ] as const
     }
-  } else if (cursorParam) {
-    getNextPageParamExpr = `getNextPageParam: (lastPage) => lastPage['${cursorParam}']`
-    getPreviousPageParamExpr = `getPreviousPageParam: (firstPage) => firstPage['${cursorParam}']`
-  } else {
-    if (dataReturnType === 'full') {
-      getNextPageParamExpr =
-        'getNextPageParam: (lastPage, _allPages, lastPageParam) => Array.isArray(lastPage.data) && lastPage.data.length === 0 ? undefined : lastPageParam + 1'
-    } else {
-      getNextPageParamExpr =
-        'getNextPageParam: (lastPage, _allPages, lastPageParam) => Array.isArray(lastPage) && lastPage.length === 0 ? undefined : lastPageParam + 1'
+    if (cursorParam) {
+      return [`getNextPageParam: (lastPage) => lastPage['${cursorParam}']`, `getPreviousPageParam: (firstPage) => firstPage['${cursorParam}']`] as const
     }
-    getPreviousPageParamExpr = 'getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => firstPageParam <= 1 ? undefined : firstPageParam - 1'
-  }
+    return [
+      dataReturnType === 'full'
+        ? 'getNextPageParam: (lastPage, _allPages, lastPageParam) => Array.isArray(lastPage.data) && lastPage.data.length === 0 ? undefined : lastPageParam + 1'
+        : 'getNextPageParam: (lastPage, _allPages, lastPageParam) => Array.isArray(lastPage) && lastPage.length === 0 ? undefined : lastPageParam + 1',
+      'getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => firstPageParam <= 1 ? undefined : firstPageParam - 1',
+    ] as const
+  })()
 
   const queryOptionsArr = [
     `initialPageParam: ${typeof initialPageParam === 'string' ? JSON.stringify(initialPageParam) : initialPageParam}`,
@@ -147,7 +140,7 @@ export function InfiniteQueryOptions({
        queryKey,
        queryFn: async ({ signal, pageParam }) => {
           ${infiniteOverrideParams}
-          return ${clientName}(${addToValueCalls(clientCallStr)})
+          return ${clientName}(${addToValueCalls(clientCallStr, enabledNames)})
         },
        ${queryOptionsArr.join(',\n')}
       })
@@ -166,7 +159,7 @@ export function InfiniteQueryOptions({
        ${enabledText}
        queryKey,
        queryFn: async ({ signal }) => {
-          return ${clientName}(${addToValueCalls(clientCallStr)})
+          return ${clientName}(${addToValueCalls(clientCallStr, enabledNames)})
         },
        ${queryOptionsArr.join(',\n')}
       })
@@ -176,15 +169,17 @@ export function InfiniteQueryOptions({
   )
 }
 
-function addToValueCalls(callStr: string): string {
+function addToValueCalls(callStr: string, enabledNames: ReadonlyArray<string> = []): string {
+  const optional = new Set(enabledNames)
   // Step 1: Transform shorthand object params like { petId } → { petId: toValue(petId) }
+  // Params that drive the `enabled` guard are optional, so assert non-null: toValue(petId!)
   let result = callStr.replace(/\{\s*([\w,\s]+)\s*\}(?=\s*,)/g, (match, inner: string) => {
     if (inner.includes(':') || inner.includes('...')) return match
     const keys = inner
       .split(',')
       .map((k: string) => k.trim())
       .filter(Boolean)
-    const wrapped = keys.map((k: string) => `${k}: toValue(${k})`).join(', ')
+    const wrapped = keys.map((k: string) => `${k}: toValue(${optional.has(k) ? `${k}!` : k})`).join(', ')
     return `{ ${wrapped} }`
   })
 
@@ -192,18 +187,8 @@ function addToValueCalls(callStr: string): string {
   result = result.replace(/(?<![{.:?])\b(\w+)\b(?=\s*,)/g, (match, name: string) => {
     if (name === 'config' || name === 'signal' || name === 'undefined') return match
     if (match.includes('toValue(')) return match
-    return `toValue(${name})`
+    return `toValue(${optional.has(name) ? `${name}!` : name})`
   })
 
   return result
 }
-
-InfiniteQueryOptions.getParams = (
-  node: ast.OperationNode,
-  options: {
-    paramsType: PluginVueQuery['resolvedOptions']['paramsType']
-    paramsCasing: PluginVueQuery['resolvedOptions']['paramsCasing']
-    pathParamsType: PluginVueQuery['resolvedOptions']['pathParamsType']
-    resolver: ResolverTs
-  },
-) => getQueryOptionsParams(node, options)

package/src/components/Mutation.tsx

@@ -4,8 +4,7 @@ import { functionPrinter } from '@kubb/plugin-ts'
 import { File, Function } from '@kubb/renderer-jsx'
 import type { KubbReactNode } from '@kubb/renderer-jsx/types'
 import type { PluginVueQuery } from '../types.ts'
-import { buildMutationArgParams, getComments, resolveErrorNames } from '../utils.ts'
-import { MutationKey } from './MutationKey.tsx'
+import { buildRequestConfigType, getComments, resolveErrorNames, resolveSuccessNames, wrapWithMaybeRefOrGetter } from '../utils.ts'
 
 type Props = {
   name: string
@@ -24,7 +23,22 @@ const declarationPrinter = functionPrinter({ mode: 'declaration' })
 const callPrinter = functionPrinter({ mode: 'call' })
 const keysPrinter = functionPrinter({ mode: 'keys' })
 
-function getParams(
+function createMutationArgParams(
+  node: ast.OperationNode,
+  options: {
+    paramsCasing: PluginVueQuery['resolvedOptions']['paramsCasing']
+    resolver: ResolverTs
+  },
+): ast.FunctionParametersNode {
+  return ast.createOperationParams(node, {
+    paramsType: 'inline',
+    pathParamsType: 'inline',
+    paramsCasing: options.paramsCasing,
+    resolver: options.resolver,
+  })
+}
+
+function buildMutationParamsNode(
   node: ast.OperationNode,
   options: {
     paramsCasing: PluginVueQuery['resolvedOptions']['paramsCasing']
@@ -33,24 +47,16 @@ function getParams(
   },
 ): ast.FunctionParametersNode {
   const { paramsCasing, dataReturnType, resolver } = options
-  const responseName = resolver.resolveResponseName(node)
-  const requestName = node.requestBody?.content?.[0]?.schema ? resolver.resolveDataName(node) : undefined
+  const successNames = resolveSuccessNames(node, resolver)
+  const responseName = successNames.length > 0 ? successNames.join(' | ') : resolver.resolveResponseName(node)
   const errorNames = resolveErrorNames(node, resolver)
 
   const TData = dataReturnType === 'data' ? responseName : `ResponseConfig<${responseName}>`
   const TError = `ResponseErrorConfig<${errorNames.length > 0 ? errorNames.join(' | ') : 'Error'}>`
 
-  const mutationArgParamsNode = buildMutationArgParams(node, { paramsCasing, resolver })
+  const mutationArgParamsNode = createMutationArgParams(node, { paramsCasing, resolver })
 
-  // Vue-query uses MutationObserverOptions instead of UseMutationOptions, and wraps params with MaybeRefOrGetter
-  const mutationArgWrapped = mutationArgParamsNode.params.map((param) => {
-    const fp = param as ast.FunctionParameterNode
-    return {
-      ...fp,
-      type: fp.type ? ast.createParamsType({ variant: 'reference', name: `MaybeRefOrGetter<${printType(fp.type)}>` }) : fp.type,
-    }
-  })
-  const wrappedParamsNode = ast.createFunctionParameters({ params: mutationArgWrapped })
+  const wrappedParamsNode = wrapWithMaybeRefOrGetter(mutationArgParamsNode)
   const TRequestWrapped = wrappedParamsNode.params.length > 0 ? (declarationPrinter.print(wrappedParamsNode) ?? '') : ''
 
   return ast.createFunctionParameters({
@@ -60,8 +66,8 @@ function getParams(
         type: ast.createParamsType({
           variant: 'reference',
           name: `{
-  mutation?: MutationObserverOptions<${[TData, TError, TRequestWrapped ? `{${TRequestWrapped}}` : 'void', 'TContext'].join(', ')}> & { client?: QueryClient },
-  client?: ${requestName ? `Partial<RequestConfig<${requestName}>> & { client?: Client }` : 'Partial<RequestConfig> & { client?: Client }'},
+  mutation?: MutationObserverOptions<${[TData, TError, TRequestWrapped ? `{${TRequestWrapped}}` : 'undefined', 'TContext'].join(', ')}> & { client?: QueryClient },
+  client?: ${buildRequestConfigType(node, resolver)},
 }`,
         }),
         default: '{}',
@@ -70,21 +76,6 @@ function getParams(
   })
 }
 
-function printType(typeNode: ast.ParamsTypeNode | undefined): string {
-  if (!typeNode) return 'unknown'
-  if (typeNode.variant === 'reference') return typeNode.name
-  if (typeNode.variant === 'member') return `${typeNode.base}['${typeNode.key}']`
-  if (typeNode.variant === 'struct') {
-    const parts = typeNode.properties.map((p) => {
-      const typeStr = printType(p.type)
-      const key = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(p.name) ? p.name : JSON.stringify(p.name)
-      return p.optional ? `${key}?: ${typeStr}` : `${key}: ${typeStr}`
-    })
-    return `{ ${parts.join('; ')} }`
-  }
-  return 'unknown'
-}
-
 export function Mutation({
   name,
   clientName,
@@ -96,20 +87,24 @@ export function Mutation({
   tsResolver,
   mutationKeyName,
 }: Props): KubbReactNode {
-  const responseName = tsResolver.resolveResponseName(node)
+  const successNames = resolveSuccessNames(node, tsResolver)
+  const responseName = successNames.length > 0 ? successNames.join(' | ') : tsResolver.resolveResponseName(node)
   const errorNames = resolveErrorNames(node, tsResolver)
 
   const TData = dataReturnType === 'data' ? responseName : `ResponseConfig<${responseName}>`
   const TError = `ResponseErrorConfig<${errorNames.length > 0 ? errorNames.join(' | ') : 'Error'}>`
 
-  const mutationArgParamsNode = buildMutationArgParams(node, { paramsCasing, resolver: tsResolver })
+  const mutationArgParamsNode = createMutationArgParams(node, {
+    paramsCasing,
+    resolver: tsResolver,
+  })
   const hasMutationParams = mutationArgParamsNode.params.length > 0
   const TRequest = hasMutationParams ? (declarationPrinter.print(mutationArgParamsNode) ?? '') : ''
   const argKeysStr = hasMutationParams ? (keysPrinter.print(mutationArgParamsNode) ?? '') : ''
 
-  const generics = [TData, TError, TRequest ? `{${TRequest}}` : 'void', 'TContext'].join(', ')
+  const generics = [TData, TError, TRequest ? `{${TRequest}}` : 'undefined', 'TContext'].join(', ')
 
-  const mutationKeyParamsNode = MutationKey.getParams()
+  const mutationKeyParamsNode = ast.createFunctionParameters({ params: [] })
   const mutationKeyParamsCall = callPrinter.print(mutationKeyParamsNode) ?? ''
 
   const clientCallParamsNode = ast.createOperationParams(node, {
@@ -122,9 +117,7 @@ export function Mutation({
         name: 'config',
         type: ast.createParamsType({
           variant: 'reference',
-          name: node.requestBody?.content?.[0]?.schema
-            ? `Partial<RequestConfig<${tsResolver.resolveDataName(node)}>> & { client?: Client }`
-            : 'Partial<RequestConfig> & { client?: Client }',
+          name: buildRequestConfigType(node, tsResolver),
         }),
         default: '{}',
       }),
@@ -132,7 +125,7 @@ export function Mutation({
   })
   const clientCallStr = callPrinter.print(clientCallParamsNode) ?? ''
 
-  const paramsNode = getParams(node, { paramsCasing, dataReturnType, resolver: tsResolver })
+  const paramsNode = buildMutationParamsNode(node, { paramsCasing, dataReturnType, resolver: tsResolver })
   const paramsSignature = declarationPrinter.print(paramsNode) ?? ''
 
   return (
@@ -155,5 +148,3 @@ export function Mutation({
     </File.Source>
   )
 }
-
-Mutation.getParams = getParams

package/src/components/Query.tsx

@@ -4,8 +4,9 @@ import { functionPrinter } from '@kubb/plugin-ts'
 import { File, Function } from '@kubb/renderer-jsx'
 import type { KubbReactNode } from '@kubb/renderer-jsx/types'
 import type { PluginVueQuery } from '../types.ts'
-import { getComments, resolveErrorNames } from '../utils.ts'
-import { QueryKey } from './QueryKey.tsx'
+import { getEnabledParamNames, markParamsOptional } from '@internals/tanstack-query'
+import { getComments, resolveErrorNames, resolveSuccessNames, wrapWithMaybeRefOrGetter } from '../utils.ts'
+import { buildQueryKeyParamsNode } from './QueryKey.tsx'
 import { getQueryOptionsParams } from './QueryOptions.tsx'
 
 type Props = {
@@ -24,7 +25,7 @@ type Props = {
 const declarationPrinter = functionPrinter({ mode: 'declaration' })
 const callPrinter = functionPrinter({ mode: 'call' })
 
-function getParams(
+function buildQueryParamsNode(
   node: ast.OperationNode,
   options: {
     paramsType: PluginVueQuery['resolvedOptions']['paramsType']
@@ -35,8 +36,9 @@ function getParams(
   },
 ): ast.FunctionParametersNode {
   const { paramsType, paramsCasing, pathParamsType, dataReturnType, resolver } = options
-  const responseName = resolver.resolveResponseName(node)
-  const requestName = node.requestBody?.content?.[0]?.schema ? resolver.resolveDataName(node) : undefined
+  const successNames = resolveSuccessNames(node, resolver)
+  const responseName = successNames.length > 0 ? successNames.join(' | ') : resolver.resolveResponseName(node)
+  const requestName = node.requestBody?.content?.[0]?.schema ? resolver.resolveDataName(node) : null
   const errorNames = resolveErrorNames(node, resolver)
 
   const TData = dataReturnType === 'data' ? responseName : `ResponseConfig<${responseName}>`
@@ -63,45 +65,7 @@ function getParams(
     extraParams: [optionsParam],
   })
 
-  return wrapOperationParamsWithMaybeRef(baseParams)
-}
-
-function wrapOperationParamsWithMaybeRef(paramsNode: ast.FunctionParametersNode): ast.FunctionParametersNode {
-  const wrappedParams = paramsNode.params.map((param) => {
-    if ('kind' in param && (param as ast.ParameterGroupNode).kind === 'ParameterGroup') {
-      const group = param as ast.ParameterGroupNode
-      return {
-        ...group,
-        properties: group.properties.map((p) => ({
-          ...p,
-          type: p.type ? ast.createParamsType({ variant: 'reference', name: `MaybeRefOrGetter<${printType(p.type)}>` }) : p.type,
-        })),
-      }
-    }
-    const fp = param as ast.FunctionParameterNode
-    // Don't wrap 'options' param — it's not a reactive value
-    if (fp.name === 'options') return fp
-    return {
-      ...fp,
-      type: fp.type ? ast.createParamsType({ variant: 'reference', name: `MaybeRefOrGetter<${printType(fp.type)}>` }) : fp.type,
-    }
-  })
-  return ast.createFunctionParameters({ params: wrappedParams })
-}
-
-function printType(typeNode: ast.ParamsTypeNode | undefined): string {
-  if (!typeNode) return 'unknown'
-  if (typeNode.variant === 'reference') return typeNode.name
-  if (typeNode.variant === 'member') return `${typeNode.base}['${typeNode.key}']`
-  if (typeNode.variant === 'struct') {
-    const parts = typeNode.properties.map((p) => {
-      const typeStr = printType(p.type)
-      const key = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(p.name) ? p.name : JSON.stringify(p.name)
-      return p.optional ? `${key}?: ${typeStr}` : `${key}: ${typeStr}`
-    })
-    return `{ ${parts.join('; ')} }`
-  }
-  return 'unknown'
+  return wrapWithMaybeRefOrGetter(baseParams, (name) => name === 'options')
 }
 
 export function Query({
@@ -116,7 +80,8 @@ export function Query({
   node,
   tsResolver,
 }: Props): KubbReactNode {
-  const responseName = tsResolver.resolveResponseName(node)
+  const successNames = resolveSuccessNames(node, tsResolver)
+  const responseName = successNames.length > 0 ? successNames.join(' | ') : tsResolver.resolveResponseName(node)
   const errorNames = resolveErrorNames(node, tsResolver)
 
   const TData = dataReturnType === 'data' ? responseName : `ResponseConfig<${responseName}>`
@@ -124,13 +89,17 @@ export function Query({
   const returnType = `UseQueryReturnType<${['TData', TError].join(', ')}> & { queryKey: TQueryKey }`
   const generics = [`TData = ${TData}`, `TQueryData = ${TData}`, `TQueryKey extends QueryKey = ${queryKeyTypeName}`]
 
-  const queryKeyParamsNode = QueryKey.getParams(node, { pathParamsType, paramsCasing, resolver: tsResolver })
+  const queryKeyParamsNode = buildQueryKeyParamsNode(node, { pathParamsType, paramsCasing, resolver: tsResolver })
   const queryKeyParamsCall = callPrinter.print(queryKeyParamsNode) ?? ''
+  const enabledNames = getEnabledParamNames(queryKeyParamsNode)
 
   const queryOptionsParamsNode = getQueryOptionsParams(node, { paramsType, paramsCasing, pathParamsType, resolver: tsResolver })
   const queryOptionsParamsCall = callPrinter.print(queryOptionsParamsNode) ?? ''
 
-  const paramsNode = getParams(node, { paramsType, paramsCasing, pathParamsType, dataReturnType, resolver: tsResolver })
+  const paramsNode = markParamsOptional(
+    buildQueryParamsNode(node, { paramsType, paramsCasing, pathParamsType, dataReturnType, resolver: tsResolver }),
+    enabledNames,
+  )
   const paramsSignature = declarationPrinter.print(paramsNode) ?? ''
 
   return (
@@ -155,5 +124,3 @@ export function Query({
     </File.Source>
   )
 }
-
-Query.getParams = getParams