upstream-tanstack-query/docs/framework/solid/reference/functions/infiniteQueryOptions.md

id, title, redirect_from

id	title	redirect_from
infiniteQueryOptions	infiniteQueryOptions	framework/solid/reference/infiniteQueryOptions

Call Signature

function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options): InfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData, unknown>, TError>;

Defined in: packages/solid-query/src/infiniteQueryOptions.ts:105

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<TQueryFnData, unknown>

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam

TPageParam = unknown

Parameters

options

InfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object

The DefinedInitialDataInfiniteOptions to use — everything you can pass to useInfiniteQuery, with initialData set.

Returns

InfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData, unknown>, TError>

The same options object, typed so that queryKey carries the inferred data type.

See

useInfiniteQuery to run an infinite query with these options.

Example

import { For } from 'solid-js'
import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/solid-query'

const projectsOptions = infiniteQueryOptions({
  queryKey: ['projects'],
  queryFn: ({ pageParam }) => fetchProjects(pageParam),
  initialPageParam: 0,
  getNextPageParam: (lastPage) => lastPage.nextId,
  initialData: { pages: [], pageParams: [] },
})

function Projects() {
  // `projectsQuery.data` is never `undefined`, thanks to `initialData` — even if a refetch fails, so the
  // list stays visible alongside the error.
  const projectsQuery = useInfiniteQuery(() => projectsOptions)

  return (
    <div>
      {projectsQuery.isError ? <span>Error: {projectsQuery.error.message}</span> : null}
      <ul>
        <For each={projectsQuery.data.pages}>
          {(page) => <For each={page.projects}>{(p) => <li>{p.name}</li>}</For>}
        </For>
      </ul>
    </div>
  )
}

Call Signature

function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options): InfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData, unknown>, TError>;

Defined in: packages/solid-query/src/infiniteQueryOptions.ts:174

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<TQueryFnData, unknown>

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam

TPageParam = unknown

Parameters

options

InfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object

The UndefinedInitialDataInfiniteOptions to use — everything you can pass to useInfiniteQuery.

Returns

InfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData, unknown>, TError>

The same options object, typed so that queryKey carries the inferred data type.

See

useInfiniteQuery to run an infinite query with these options.

Example

A parameterized factory, so the same options object can be reused per postId:

import { For, Match, Switch } from 'solid-js'
import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/solid-query'

const commentsOptions = (postId: string) =>
  infiniteQueryOptions({
    queryKey: ['post', postId, 'comments'],
    queryFn: ({ pageParam }) => fetchComments(postId, pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextId,
  })

function Comments(props: { postId: string }) {
  const commentsQuery = useInfiniteQuery(() => commentsOptions(props.postId))

  return (
    <Switch>
      <Match when={commentsQuery.isPending}>Loading...</Match>
      <Match when={commentsQuery.isError}>Error: {commentsQuery.error.message}</Match>
      <Match when={commentsQuery.isSuccess}>
        <ul>
          <For each={commentsQuery.data.pages}>
            {(page) => <For each={page.comments}>{(c) => <li>{c.text}</li>}</For>}
          </For>
        </ul>
      </Match>
    </Switch>
  )
}