infiniteQueryOptions

1function infiniteQueryOptions<TQueryFnData, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: InfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object): ReturnType<DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>;2function infiniteQueryOptions<TQueryFnData, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: InfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object): ReturnType<UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>;

1function infiniteQueryOptions<TQueryFnData, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: InfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object): ReturnType<DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>;

1import { For } from 'solid-js'2import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/solid-query'3 4const projectsOptions = infiniteQueryOptions({5  queryKey: ['projects'],6  queryFn: ({ pageParam }) => fetchProjects(pageParam),7  initialPageParam: 0,8  getNextPageParam: (lastPage) => lastPage.nextId,9  initialData: { pages: [], pageParams: [] },10})11 12function Projects() {13  // `projectsQuery.data` is never `undefined`, thanks to `initialData` — even if a refetch fails, so the14  // list stays visible alongside the error.15  const projectsQuery = useInfiniteQuery(() => projectsOptions)16 17  return (18    <div>19      {projectsQuery.isError ? <span>Error: {projectsQuery.error.message}</span> : null}20      <ul>21        <For each={projectsQuery.data.pages}>22          {(page) => <For each={page.projects}>{(p) => <li>{p.name}</li>}</For>}23        </For>24      </ul>25    </div>26  )27}

1function infiniteQueryOptions<TQueryFnData, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: InfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object): ReturnType<UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>> & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData>, TError>;

1import { For, Match, Switch } from 'solid-js'2import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/solid-query'3 4const commentsOptions = (postId: string) =>5  infiniteQueryOptions({6    queryKey: ['post', postId, 'comments'],7    queryFn: ({ pageParam }) => fetchComments(postId, pageParam),8    initialPageParam: 0,9    getNextPageParam: (lastPage) => lastPage.nextId,10  })11 12function Comments(props: { postId: string }) {13  const commentsQuery = useInfiniteQuery(() => commentsOptions(props.postId))14 15  return (16    <Switch>17      <Match when={commentsQuery.isPending}>Loading...</Match>18      <Match when={commentsQuery.isError}>Error: {commentsQuery.error.message}</Match>19      <Match when={commentsQuery.isSuccess}>20        <ul>21          <For each={commentsQuery.data.pages}>22            {(page) => <For each={page.comments}>{(c) => <li>{c.text}</li>}</For>}23          </For>24        </ul>25      </Match>26    </Switch>27  )28}