@kubb/plugin-vue-query 3.0.0-beta.9 → 3.0.1

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/QueryKey.tsx

@@ -5,7 +5,7 @@ import { File, Function, FunctionParams, Type } from '@kubb/react'
 import { type Operation, isOptional } from '@kubb/oas'
 import type { OperationSchemas } from '@kubb/plugin-oas'
 import type { ReactNode } from 'react'
-import type { PluginVueQuery } from '../types'
+import type { PluginVueQuery, Transformer } from '../types'
 
 type Props = {
   name: string
@@ -13,7 +13,7 @@ type Props = {
   typeSchemas: OperationSchemas
   operation: Operation
   pathParamsType: PluginVueQuery['resolvedOptions']['pathParamsType']
-  keysFn: ((keys: unknown[]) => unknown[]) | undefined
+  transformer: Transformer | undefined
 }
 
 type GetParamsProps = {
@@ -50,23 +50,32 @@ function getParams({ pathParamsType, typeSchemas }: GetParamsProps) {
   })
 }
 
-export function QueryKey({ name, typeSchemas, pathParamsType, operation, typeName, keysFn = (name) => name }: Props): ReactNode {
+const getTransformer: Transformer = ({ operation, schemas }) => {
   const path = new URLPath(operation.path)
-  const params = getParams({ pathParamsType, typeSchemas })
   const keys = [
     path.toObject({
       type: 'path',
       stringify: true,
     }),
-    typeSchemas.queryParams?.name ? '...(params ? [params] : [])' : undefined,
-    typeSchemas.request?.name ? '...(data ? [data] : [])' : undefined,
+    schemas.queryParams?.name ? '...(params ? [params] : [])' : undefined,
+    schemas.request?.name ? '...(data ? [data] : [])' : undefined,
   ].filter(Boolean)
 
+  return keys
+}
+
+export function QueryKey({ name, typeSchemas, pathParamsType, operation, typeName, transformer = getTransformer }: Props): ReactNode {
+  const params = getParams({ pathParamsType, typeSchemas })
+  const keys = transformer({
+    operation,
+    schemas: typeSchemas,
+  })
+
   return (
     <>
       <File.Source name={name} isExportable isIndexable>
         <Function.Arrow name={name} export params={params.toConstructor()} singleLine>
-          {`[${keysFn(keys).join(', ')}] as const`}
+          {`[${keys.join(', ')}] as const`}
         </Function.Arrow>
       </File.Source>
       <File.Source name={typeName} isExportable isIndexable isTypeOnly>
@@ -79,3 +88,4 @@ export function QueryKey({ name, typeSchemas, pathParamsType, operation, typeNam
 }
 
 QueryKey.getParams = getParams
+QueryKey.getTransformer = getTransformer

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__/clientDataReturnTypeFull.ts

@@ -2,7 +2,7 @@ import client from "@kubb/plugin-client/client";
 import type { RequestConfig, ResponseConfig } 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 { queryOptions, useQuery } from "@tanstack/react-query";
 import { unref } from "vue";
 
  export const findPetsByTagsQueryKey = (params?: MaybeRef<FindPetsByTagsQueryParams>) => [{ url: "/pet/findByTags" }, ...(params ? [params] : [])] as const;

package/src/generators/__snapshots__/clientGetImportPath.ts

@@ -2,7 +2,7 @@ import client from "axios";
 import type { QueryKey, QueryObserverOptions, UseQueryReturnType } from "@tanstack/react-query";
 import type { RequestConfig } from "axios";
 import type { MaybeRef } from "vue";
-import { useQuery, queryOptions } from "@tanstack/react-query";
+import { queryOptions, useQuery } from "@tanstack/react-query";
 import { unref } from "vue";
 
  export const findPetsByTagsQueryKey = (params?: MaybeRef<FindPetsByTagsQueryParams>) => [{ url: "/pet/findByTags" }, ...(params ? [params] : [])] as const;

package/src/generators/__snapshots__/clientPostImportPath.ts

@@ -1,8 +1,8 @@
 import client from "axios";
-import type { MutationObserverOptions } from "@tanstack/react-query";
+import type { MutationObserverOptions } from "@tanstack/vue-query";
 import type { RequestConfig } from "axios";
 import type { MaybeRef } from "vue";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/vue-query";
 
  export const updatePetWithFormMutationKey = () => [{ "url": "/pet/{petId}" }] as const;
 

package/src/generators/__snapshots__/findByTags.ts

@@ -2,7 +2,7 @@ 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 { queryOptions, useQuery } from "@tanstack/react-query";
 import { unref } from "vue";
 
  export const findPetsByTagsQueryKey = (params?: MaybeRef<FindPetsByTagsQueryParams>) => [{ url: "/pet/findByTags" }, ...(params ? [params] : [])] as const;

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 { queryOptions, useQuery } 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__/findByTagsPathParamsObject.ts

@@ -2,7 +2,7 @@ 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 { queryOptions, useQuery } from "@tanstack/react-query";
 import { unref } from "vue";
 
  export const findPetsByTagsQueryKey = (params?: MaybeRef<FindPetsByTagsQueryParams>) => [{ url: "/pet/findByTags" }, ...(params ? [params] : [])] as const;

package/src/generators/__snapshots__/findByTagsWithCustomQueryKey.ts

@@ -2,10 +2,10 @@ 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 { queryOptions, useQuery } from "@tanstack/react-query";
 import { unref } from "vue";
 
- export const findPetsByTagsQueryKey = (params?: MaybeRef<FindPetsByTagsQueryParams>) => [test, { url: "/pet/findByTags" }, ...(params ? [params] : [])] as const;
+ export const findPetsByTagsQueryKey = (params?: MaybeRef<FindPetsByTagsQueryParams>) => ["test", { url: "/pet/findByTags" }, ...(params ? [params] : [])] as const;
 
  export type FindPetsByTagsQueryKey = ReturnType<typeof findPetsByTagsQueryKey>;
 

package/src/generators/__snapshots__/findByTagsWithZod.ts

@@ -2,7 +2,7 @@ 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 { queryOptions, useQuery } from "@tanstack/react-query";
 import { unref } from "vue";
 
  export const findPetsByTagsQueryKey = (params?: MaybeRef<FindPetsByTagsQueryParams>) => [{ url: "/pet/findByTags" }, ...(params ? [params] : [])] as const;

package/src/generators/__snapshots__/findInfiniteByTags.ts

@@ -1,8 +1,8 @@
 import client from "@kubb/plugin-client/client";
 import type { RequestConfig } from "@kubb/plugin-client/client";
-import type { QueryKey, InfiniteQueryObserverOptions, UseInfiniteQueryReturnType } from "@tanstack/react-query";
+import type { InfiniteData, QueryKey, InfiniteQueryObserverOptions, UseInfiniteQueryReturnType } from "@tanstack/react-query";
 import type { MaybeRef } from "vue";
-import { useInfiniteQuery, infiniteQueryOptions } from "@tanstack/react-query";
+import { infiniteQueryOptions, useInfiniteQuery } from "@tanstack/react-query";
 
  export const findPetsByTagsInfiniteQueryKey = (params?: MaybeRef<FindPetsByTagsQueryParams>) => [{ url: "/pet/findByTags" }, ...(params ? [params] : [])] as const;
 
@@ -40,7 +40,7 @@ async function findPetsByTags(headers: FindPetsByTagsHeaderParams, params?: Find
  * @summary Finds Pets by tags
  * @link /pet/findByTags
  */
-export function useFindPetsByTagsInfinite<TData = FindPetsByTagsQueryResponse, TQueryData = FindPetsByTagsQueryResponse, TQueryKey extends QueryKey = FindPetsByTagsInfiniteQueryKey>(headers: MaybeRef<FindPetsByTagsHeaderParams>, params?: MaybeRef<FindPetsByTagsQueryParams>, options: {
+export function useFindPetsByTagsInfinite<TData = InfiniteData<FindPetsByTagsQueryResponse>, TQueryData = FindPetsByTagsQueryResponse, TQueryKey extends QueryKey = FindPetsByTagsInfiniteQueryKey>(headers: MaybeRef<FindPetsByTagsHeaderParams>, params?: MaybeRef<FindPetsByTagsQueryParams>, options: {
     query?: Partial<InfiniteQueryObserverOptions<FindPetsByTagsQueryResponse, FindPetsByTags400, TData, TQueryData, TQueryKey>>;
     client?: Partial<RequestConfig>;
 } = {}) {

package/src/generators/__snapshots__/findInfiniteByTagsCursor.ts

@@ -1,8 +1,8 @@
 import client from "@kubb/plugin-client/client";
 import type { RequestConfig } from "@kubb/plugin-client/client";
-import type { QueryKey, InfiniteQueryObserverOptions, UseInfiniteQueryReturnType } from "@tanstack/react-query";
+import type { InfiniteData, QueryKey, InfiniteQueryObserverOptions, UseInfiniteQueryReturnType } from "@tanstack/react-query";
 import type { MaybeRef } from "vue";
-import { useInfiniteQuery, infiniteQueryOptions } from "@tanstack/react-query";
+import { infiniteQueryOptions, useInfiniteQuery } from "@tanstack/react-query";
 
  export const findPetsByTagsInfiniteQueryKey = (params?: MaybeRef<FindPetsByTagsQueryParams>) => [{ url: "/pet/findByTags" }, ...(params ? [params] : [])] as const;
 
@@ -40,7 +40,7 @@ async function findPetsByTags(headers: FindPetsByTagsHeaderParams, params?: Find
  * @summary Finds Pets by tags
  * @link /pet/findByTags
  */
-export function useFindPetsByTagsInfinite<TData = FindPetsByTagsQueryResponse, TQueryData = FindPetsByTagsQueryResponse, TQueryKey extends QueryKey = FindPetsByTagsInfiniteQueryKey>(headers: MaybeRef<FindPetsByTagsHeaderParams>, params?: MaybeRef<FindPetsByTagsQueryParams>, options: {
+export function useFindPetsByTagsInfinite<TData = InfiniteData<FindPetsByTagsQueryResponse>, TQueryData = FindPetsByTagsQueryResponse, TQueryKey extends QueryKey = FindPetsByTagsInfiniteQueryKey>(headers: MaybeRef<FindPetsByTagsHeaderParams>, params?: MaybeRef<FindPetsByTagsQueryParams>, options: {
     query?: Partial<InfiniteQueryObserverOptions<FindPetsByTagsQueryResponse, FindPetsByTags400, TData, TQueryData, TQueryKey>>;
     client?: Partial<RequestConfig>;
 } = {}) {

package/src/generators/__snapshots__/postAsQuery.ts

@@ -2,7 +2,7 @@ import client from "@kubb/plugin-client/client";
 import type { RequestConfig } from "@kubb/plugin-client/client";
 import type { QueryKey, QueryObserverOptions, UseQueryReturnType } from "custom-query";
 import type { MaybeRef } from "vue";
-import { useQuery, queryOptions } from "custom-query";
+import { queryOptions, useQuery } from "custom-query";
 import { unref } from "vue";
 
  export const updatePetWithFormQueryKey = (petId: MaybeRef<UpdatePetWithFormPathParams["petId"]>, data?: MaybeRef<UpdatePetWithFormMutationRequest>, params?: MaybeRef<UpdatePetWithFormQueryParams>) => [{ url: "/pet/:petId", params: { petId: petId } }, ...(params ? [params] : []), ...(data ? [data] : [])] as const;

package/src/generators/__snapshots__/updatePetById.ts

@@ -1,8 +1,8 @@
 import client from "@kubb/plugin-client/client";
 import type { RequestConfig } from "@kubb/plugin-client/client";
-import type { MutationObserverOptions } from "@tanstack/react-query";
+import type { MutationObserverOptions } from "@tanstack/vue-query";
 import type { MaybeRef } from "vue";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/vue-query";
 
  export const updatePetWithFormMutationKey = () => [{ "url": "/pet/{petId}" }] as const;
 

package/src/generators/__snapshots__/updatePetByIdPathParamsObject.ts

@@ -1,8 +1,8 @@
 import client from "@kubb/plugin-client/client";
 import type { RequestConfig } from "@kubb/plugin-client/client";
-import type { MutationObserverOptions } from "@tanstack/react-query";
+import type { MutationObserverOptions } from "@tanstack/vue-query";
 import type { MaybeRef } from "vue";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/vue-query";
 
  export const updatePetWithFormMutationKey = () => [{ "url": "/pet/{petId}" }] as const;
 
@@ -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'
@@ -6,6 +5,7 @@ import { useOperationManager } from '@kubb/plugin-oas/hooks'
 import { pluginTsName } from '@kubb/plugin-ts'
 import { pluginZodName } from '@kubb/plugin-zod'
 import { File, useApp } from '@kubb/react'
+import { difference } from 'remeda'
 import { InfiniteQuery, InfiniteQueryOptions, QueryKey } from '../components'
 import type { PluginVueQuery } from '../types'
 
@@ -18,8 +18,13 @@ export const infiniteQueryGenerator = createReactGenerator<PluginVueQuery>({
       },
     } = useApp<PluginVueQuery>()
     const { getSchemas, getName, getFile } = useOperationManager()
-    const isQuery = typeof options.query === 'boolean' ? options.query : !!options.query.methods?.some((method) => operation.method === method)
+
+    const isQuery = typeof options.query === 'boolean' ? true : options.query?.methods.some((method) => operation.method === method)
+    const isMutation = difference(options.mutation ? options.mutation.methods : [], options.query ? options.query.methods : []).some(
+      (method) => operation.method === method,
+    )
     const isInfinite = isQuery && !!options.infinite
+    const importPath = options.query ? options.query.importPath : '@tanstack/vue-query'
 
     const query = {
       name: getName(operation, { type: 'function', prefix: 'use', suffix: 'infinite' }),
@@ -51,19 +56,13 @@ export const infiniteQueryGenerator = createReactGenerator<PluginVueQuery>({
       schemas: getSchemas(operation, { pluginKey: [pluginZodName], type: 'function' }),
     }
 
-    if (!isQuery || !isInfinite || typeof options.query === 'boolean' || typeof options.infinite === 'boolean') {
+    if (!isQuery || isMutation || !isInfinite) {
       return null
     }
 
     return (
       <File baseName={query.file.baseName} path={query.file.path} meta={query.file.meta} banner={output?.banner} footer={output?.footer}>
         {options.parser === 'zod' && <File.Import name={[zod.schemas.response.name]} root={query.file.path} path={zod.file.path} />}
-        <File.Import name={['useInfiniteQuery', 'infiniteQueryOptions']} path={options.query.importPath} />
-        <File.Import
-          name={['QueryKey', 'WithRequired', 'InfiniteQueryObserverOptions', 'UseInfiniteQueryReturnType']}
-          path={options.query.importPath}
-          isTypeOnly
-        />
         <File.Import name={['unref']} path="vue" />
         <File.Import name={['MaybeRef']} path="vue" isTypeOnly />
         <File.Import name={'client'} path={options.client.importPath} />
@@ -82,48 +81,62 @@ export const infiniteQueryGenerator = createReactGenerator<PluginVueQuery>({
           path={type.file.path}
           isTypeOnly
         />
-
         <QueryKey
           name={queryKey.name}
           typeName={queryKey.typeName}
           operation={operation}
           pathParamsType={options.pathParamsType}
           typeSchemas={type.schemas}
-          keysFn={options.query.key}
+          transformer={options.queryKey}
         />
         <Client
           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}
         />
-        <InfiniteQueryOptions
-          name={queryOptions.name}
-          clientName={client.name}
-          queryKeyName={queryKey.name}
-          typeSchemas={type.schemas}
-          pathParamsType={options.pathParamsType}
-          dataReturnType={options.client.dataReturnType}
-          cursorParam={options.infinite.cursorParam}
-          initialPageParam={options.infinite.initialPageParam}
-          queryParam={options.infinite.queryParam}
-        />
-        <InfiniteQuery
-          name={query.name}
-          queryOptionsName={queryOptions.name}
-          typeSchemas={type.schemas}
-          pathParamsType={options.pathParamsType}
-          operation={operation}
-          dataReturnType={options.client.dataReturnType}
-          queryKeyName={queryKey.name}
-          queryKeyTypeName={queryKey.typeName}
-        />
+        {options.infinite && (
+          <>
+            <File.Import name={['InfiniteData']} isTypeOnly path={importPath} />
+            <File.Import name={['infiniteQueryOptions']} path={importPath} />
+            <InfiniteQueryOptions
+              name={queryOptions.name}
+              clientName={client.name}
+              queryKeyName={queryKey.name}
+              typeSchemas={type.schemas}
+              paramsType={options.paramsType}
+              pathParamsType={options.pathParamsType}
+              dataReturnType={options.client.dataReturnType}
+              cursorParam={options.infinite.cursorParam}
+              initialPageParam={options.infinite.initialPageParam}
+              queryParam={options.infinite.queryParam}
+            />
+          </>
+        )}
+        {options.infinite && (
+          <>
+            <File.Import name={['useInfiniteQuery']} path={importPath} />
+            <File.Import name={['QueryKey', 'InfiniteQueryObserverOptions', 'UseInfiniteQueryReturnType']} path={importPath} isTypeOnly />
+            <InfiniteQuery
+              name={query.name}
+              queryOptionsName={queryOptions.name}
+              typeSchemas={type.schemas}
+              paramsType={options.paramsType}
+              pathParamsType={options.pathParamsType}
+              operation={operation}
+              dataReturnType={options.client.dataReturnType}
+              queryKeyName={queryKey.name}
+              queryKeyTypeName={queryKey.typeName}
+            />
+          </>
+        )}
       </File>
     )
   },