--- id: infiniteQueryOptions title: infiniteQueryOptions redirect_from: - framework/react/reference/infiniteQueryOptions --- ## Call Signature ```ts function infiniteQueryOptions(options): UseInfiniteQueryOptions & object & QueryKeyWithDataTag, TError>; ``` Defined in: [packages/react-query/src/infiniteQueryOptions.ts:170](https://github.com/TanStack/query/blob/main/packages/react-query/src/infiniteQueryOptions.ts#L170) You can generally pass everything to `infiniteQueryOptions` that you can also pass to `useInfiniteQuery`. These options can be shared across hooks and imperative APIs such as `queryClient.infiniteQuery`. `options.queryKey` is required and is the query key to generate options for. This overload is selected when `initialData` is set. ### Type Parameters #### TQueryFnData `TQueryFnData` #### TError `TError` = `Error` #### TData `TData` = [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `unknown`\> #### TQueryKey `TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[] #### TPageParam `TPageParam` = `unknown` ### Parameters #### options [`DefinedInitialDataInfiniteOptions`](../type-aliases/DefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> The [DefinedInitialDataInfiniteOptions](../type-aliases/DefinedInitialDataInfiniteOptions.md) to use — everything you can pass to `useInfiniteQuery`, with `initialData` set. ### Returns The same options object, typed so that `queryKey` carries the inferred data type. ### See [useInfiniteQuery](useInfiniteQuery.md) to run an infinite query with these options. ### Remarks See [useInfiniteQuery](useInfiniteQuery.md) for examples that fetch further pages, from a button click or automatically as the user scrolls. ### Example ```tsx import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query' export const projectsOptions = infiniteQueryOptions({ queryKey: ['projects'], queryFn: ({ pageParam }) => fetchProjects(pageParam), initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.nextId, initialData: { pages: [], pageParams: [] }, }) function Projects() { // `data` is never `undefined`, thanks to `initialData` — even if a refetch fails, so the // list stays visible alongside the error. const { data, isError, error } = useInfiniteQuery(projectsOptions) return (
{isError ? Error: {error.message} : null}
    {data.pages.map((page) => page.projects.map((p) =>
  • {p.name}
  • ))}
) } ``` ## Call Signature ```ts function infiniteQueryOptions(options): OmitKeyof, "queryFn"> & object & QueryKeyWithDataTag, TError>; ``` Defined in: [packages/react-query/src/infiniteQueryOptions.ts:232](https://github.com/TanStack/query/blob/main/packages/react-query/src/infiniteQueryOptions.ts#L232) You can generally pass everything to `infiniteQueryOptions` that you can also pass to `useInfiniteQuery`. These options can be shared across hooks and imperative APIs such as `queryClient.infiniteQuery`. `options.queryKey` is required and is the query key to generate options for. ### Type Parameters #### TQueryFnData `TQueryFnData` #### TError `TError` = `Error` #### TData `TData` = [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `unknown`\> #### TQueryKey `TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[] #### TPageParam `TPageParam` = `unknown` ### Parameters #### options [`UnusedSkipTokenInfiniteOptions`](../type-aliases/UnusedSkipTokenInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> The [UnusedSkipTokenInfiniteOptions](../type-aliases/UnusedSkipTokenInfiniteOptions.md) to use — everything you can pass to `useInfiniteQuery`. ### Returns The same options object, typed so that `queryKey` carries the inferred data type. ### Remarks See [useInfiniteQuery](useInfiniteQuery.md) for examples that fetch further pages, from a button click or automatically as the user scrolls. ### Example A parameterized factory, so the same options object can be reused per `postId`: ```tsx import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query' export const commentsOptions = (postId: string) => infiniteQueryOptions({ queryKey: ['post', postId, 'comments'], queryFn: ({ pageParam }) => fetchComments(postId, pageParam), initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.nextId, }) function Comments({ postId }: { postId: string }) { const { data, isPending, isError, error } = useInfiniteQuery(commentsOptions(postId)) if (isPending) return 'Loading...' if (isError) return Error: {error.message} return (
    {data.pages.map((page) => page.comments.map((c) =>
  • {c.text}
  • ))}
) } ``` ### See [useInfiniteQuery](useInfiniteQuery.md) to run an infinite query with these options. ## Call Signature ```ts function infiniteQueryOptions(options): UseInfiniteQueryOptions & object & QueryKeyWithDataTag, TError>; ``` Defined in: [packages/react-query/src/infiniteQueryOptions.ts:294](https://github.com/TanStack/query/blob/main/packages/react-query/src/infiniteQueryOptions.ts#L294) You can generally pass everything to `infiniteQueryOptions` that you can also pass to `useInfiniteQuery`. These options can be shared across hooks and imperative APIs such as `queryClient.infiniteQuery`. `options.queryKey` is required and is the query key to generate options for. ### Type Parameters #### TQueryFnData `TQueryFnData` #### TError `TError` = `Error` #### TData `TData` = [`InfiniteData`](../interfaces/InfiniteData.md)\<`TQueryFnData`, `unknown`\> #### TQueryKey `TQueryKey` *extends* readonly `unknown`[] = readonly `unknown`[] #### TPageParam `TPageParam` = `unknown` ### Parameters #### options [`UndefinedInitialDataInfiniteOptions`](../type-aliases/UndefinedInitialDataInfiniteOptions.md)\<`TQueryFnData`, `TError`, `TData`, `TQueryKey`, `TPageParam`\> The [UndefinedInitialDataInfiniteOptions](../type-aliases/UndefinedInitialDataInfiniteOptions.md) to use — everything you can pass to `useInfiniteQuery`. ### Returns The same options object, typed so that `queryKey` carries the inferred data type. ### Remarks See [useInfiniteQuery](useInfiniteQuery.md) for examples that fetch further pages (from a button click or automatically as the user scrolls) and that use `skipToken` to disable the query until `postId` is set. ### Example A parameterized factory, so the same options object can be reused per `postId`: ```tsx import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query' export const commentsOptions = (postId: string) => infiniteQueryOptions({ queryKey: ['post', postId, 'comments'], queryFn: ({ pageParam }) => fetchComments(postId, pageParam), initialPageParam: 0, getNextPageParam: (lastPage) => lastPage.nextId, }) function Comments({ postId }: { postId: string }) { const { data, isPending, isError, error } = useInfiniteQuery(commentsOptions(postId)) if (isPending) return 'Loading...' if (isError) return Error: {error.message} return (
    {data.pages.map((page) => page.comments.map((c) =>
  • {c.text}
  • ))}
) } ``` ### See [useInfiniteQuery](useInfiniteQuery.md) to run an infinite query with these options.