useInfiniteQuery

1function useInfiniteQuery<TQueryFnData, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: Accessor<QueryClient>): DefinedUseInfiniteQueryResult<TData, TError>;2function useInfiniteQuery<TQueryFnData, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: Accessor<QueryClient>): UseInfiniteQueryResult<TData, TError>;

1function useInfiniteQuery<TQueryFnData, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: Accessor<QueryClient>): DefinedUseInfiniteQueryResult<TData, TError>;

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

1function useInfiniteQuery<TQueryFnData, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: Accessor<QueryClient>): UseInfiniteQueryResult<TData, TError>;

1import { For, Match, Switch } from 'solid-js'2import { useInfiniteQuery } from '@tanstack/solid-query'3 4function Projects() {5  const projectsQuery = useInfiniteQuery(() => ({6    queryKey: ['projects'],7    queryFn: ({ pageParam }) => fetchProjects(pageParam),8    initialPageParam: 0,9    getNextPageParam: (lastPage) => lastPage.nextId,10  }))11 12  return (13    <Switch>14      <Match when={projectsQuery.isPending}>Loading...</Match>15      <Match when={projectsQuery.isError}>Error: {projectsQuery.error.message}</Match>16      <Match when={projectsQuery.isSuccess}>17        <ul>18          <For each={projectsQuery.data.pages}>19            {(page) => <For each={page.projects}>{(p) => <li>{p.name}</li>}</For>}20          </For>21        </ul>22        <button23          onClick={() => projectsQuery.fetchNextPage()}24          disabled={!projectsQuery.hasNextPage || projectsQuery.isFetching}25        >26          {projectsQuery.isFetchingNextPage27            ? 'Loading more...'28            : projectsQuery.hasNextPage29              ? 'Load More'30              : 'Nothing more to load'}31        </button>32      </Match>33    </Switch>34  )35}

1import { For, Match, Switch, createEffect, onCleanup } from 'solid-js'2import { useInfiniteQuery } from '@tanstack/solid-query'3 4function Projects() {5  const projectsQuery = useInfiniteQuery(() => ({6    queryKey: ['projects'],7    queryFn: ({ pageParam }) => fetchProjects(pageParam),8    initialPageParam: 0,9    getNextPageParam: (lastPage) => lastPage.nextId,10  }))11 12  let sentinelRef: HTMLDivElement | undefined13 14  createEffect(() => {15    if (sentinelRef == null || !projectsQuery.hasNextPage || projectsQuery.isFetching) return16 17    const observer = new IntersectionObserver(([entry]) => {18      if (entry?.isIntersecting) projectsQuery.fetchNextPage()19    })20    observer.observe(sentinelRef)21 22    onCleanup(() => observer.disconnect())23  })24 25  return (26    <Switch>27      <Match when={projectsQuery.isPending}>Loading...</Match>28      <Match when={projectsQuery.isError}>Error: {projectsQuery.error.message}</Match>29      <Match when={projectsQuery.isSuccess}>30        <ul>31          <For each={projectsQuery.data.pages}>32            {(page) => <For each={page.projects}>{(p) => <li>{p.name}</li>}</For>}33          </For>34        </ul>35        <div ref={sentinelRef}>{projectsQuery.isFetchingNextPage ? 'Loading more...' : null}</div>36      </Match>37    </Switch>38  )39}