Custom query keys#
Pass a queryKey builder to control the array TanStack Query uses to cache and invalidate a hook's data, wrapping string literals in JSON.stringify(...) since the builder inlines values verbatim.
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' },
queryKey: ({ node }) => [JSON.stringify(node.operationId)],
}),
],
})
This turns getUserByName's key into a fixed ['getUserByName'] as const, independent of its call arguments.
Output example#
export const getUserByNameQueryKey = ({ path }: { path: MaybeRefOrGetter<Omit<GetUserByNameOptions, 'headers'>['path']> }) => ["getUserByName"] as const
export type GetUserByNameQueryKey = ReturnType<typeof getUserByNameQueryKey>
export function getUserByNameQueryOptions({ path }: { path: MaybeRefOrGetter<GetUserByNameOptions['path']> }, config: Partial<Omit<RequestConfig, 'path' | 'query' | 'body' | 'headers' | 'url'>> = {}) {
const queryKey = getUserByNameQueryKey({ path })
return queryOptions<GetUserByNameStatus200, ResponseErrorConfig<GetUserByNameStatus400 | GetUserByNameStatus404>, GetUserByNameStatus200>({
queryKey,
queryFn: async ({ signal }) => {
const { data } = await getUserByName({ ...config, path: toValue(path), signal: config.signal ?? signal, throwOnError: true })
return data
},
})
}
import { useQuery } from '@tanstack/vue-query'
import { getUserByNameQueryOptions } from './gen/hooks/useGetUserByName'
const { data } = useQuery(getUserByNameQueryOptions({ path: { username: 'kubb' } }))