Reactive params that refetch#
Set hooks: true to generate use* composables. Their parameters accept a plain value, a ref, or a getter (MaybeRefOrGetter), so passing a getter makes the query re-run whenever the value it reads changes.
import { defineConfig } from 'kubb/config'
import { pluginTs } from '@kubb/plugin-ts'
import { pluginFetch } from '@kubb/plugin-fetch'
import { pluginVueQuery } from '@kubb/plugin-vue-query'
export default defineConfig({
input: './petStore.yaml',
output: { path: './src/gen', clean: true },
plugins: [pluginTs(), pluginFetch(), pluginVueQuery({ output: { path: 'hooks', mode: 'directory' }, hooks: true })],
})
import { ref } from 'vue'
import { useFindPetsByTags } from './gen/hooks/useFindPetsByTags'
const tags = ref(['dog'])
const { data, error, isLoading } = useFindPetsByTags({ query: () => ({ tags: tags.value }) })
Output example#
export function useFindPetsByTags<TData = FindPetsByTagsStatus200, TQueryData = FindPetsByTagsStatus200, TQueryKey extends QueryKey = FindPetsByTagsQueryKey>({ query }: { query?: MaybeRefOrGetter<FindPetsByTagsOptions['query']> } = {}, options: {
query?: Partial<UseQueryOptions<FindPetsByTagsStatus200, ResponseErrorConfig<FindPetsByTagsStatus400>, TData, TQueryData, TQueryKey>> & { client?: QueryClient },
client?: Partial<Omit<RequestConfig, 'path' | 'query' | 'body' | 'headers' | 'url'>>
} = {}) {
const { query: queryConfig = {}, client: config = {} } = options ?? {}
const { client: queryClient, ...resolvedOptions } = queryConfig
const queryKey = (resolvedOptions && 'queryKey' in resolvedOptions ? toValue(resolvedOptions.queryKey) : undefined) ?? findPetsByTagsQueryKey({ query })
// ...calls useQuery with `query` resolved via toValue() on every access
}
import { ref } from 'vue'
import { useFindPetsByTags } from './gen/hooks/useFindPetsByTags'
// re-runs whenever `tags.value` changes, since `query` is a getter
const tags = ref(['dog'])
const { data, error, isLoading } = useFindPetsByTags({ query: () => ({ tags: tags.value }) })