Skip to content

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.

kubb.config.ts
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

src/gen/hooks/useFindPetsByTagsInfinite.ts
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']
  })
}
usage.ts
typescript
import { useInfiniteQuery } from '@tanstack/vue-query'
import { findPetsByTagsInfiniteQueryOptions } from './gen/hooks/useFindPetsByTagsInfinite'

const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(
  findPetsByTagsInfiniteQueryOptions({ query: () => ({ tags: ['dog'] }) }),
)