Infinite scroll query
Set infinite to generate useInfiniteQuery hooks, naming the cursor query parameter, the first page value, and the path to the next cursor on the response.
typescript
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({
infinite: {
queryParam: 'page',
initialPageParam: 0,
nextParam: 'pagination.next.cursor',
},
}),
],
})Output example
typescript
export function findPetsByTagsInfiniteQueryOptions({ query }: { query?: MaybeRefOrGetter<FindPetsByTagsOptions['query']> } = {}, config: Partial<Omit<RequestConfig, 'path' | 'query' | 'body' | 'headers' | 'url'>> = {}) {
const queryKey = findPetsByTagsInfiniteQueryKey({ query })
return infiniteQueryOptions<FindPetsByTagsStatus200, ResponseErrorConfig<FindPetsByTagsStatus400>, InfiniteData<FindPetsByTagsStatus200>, QueryKey, NonNullable<FindPetsByTagsQuery['page']>>({
queryKey,
queryFn: async ({ signal, pageParam }) => {
query = {
...(query ?? {}),
['page']: pageParam as unknown as FindPetsByTagsQuery['page'],
} as FindPetsByTagsQuery
const { data } = await findPetsByTags({ ...config, query: toValue(query), signal: config.signal ?? signal, throwOnError: true })
return data
},
initialPageParam: 0,
getNextPageParam: (lastPage) => lastPage?.['pagination']?.['next']?.['cursor']
})
}typescript
import { useInfiniteQuery } from '@tanstack/vue-query'
import { findPetsByTagsInfiniteQueryOptions } from './gen/hooks/useFindPetsByTagsInfinite'
const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(
findPetsByTagsInfiniteQueryOptions({ query: () => ({ tags: ['dog'] }) }),
)