createInfiniteQuery

function createInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): DefinedCreateInfiniteQueryResult<TData, TError>;

function createInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): CreateInfiniteQueryResult<TData, TError>;

function createInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): CreateInfiniteQueryResult<TData, TError>;

<script lang="ts">
  import { createInfiniteQuery } from '@tanstack/svelte-query'

  const query = createInfiniteQuery(() => ({
    queryKey: ['projects'],
    queryFn: ({ pageParam }) => fetchProjects(pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextId,
  }))
</script>

{#if query.isPending}
  Loading...
{:else if query.isError}
  <span>Error: {query.error.message}</span>
{:else}
  <ul>
    {#each query.data.pages as page}
      {#each page.projects as project (project.id)}
        <li>{project.name}</li>
      {/each}
    {/each}
  </ul>
  <button
    onclick={() => query.fetchNextPage()}
    disabled={!query.hasNextPage || query.isFetching}
  >
    {query.isFetchingNextPage
      ? 'Loading more...'
      : query.hasNextPage
        ? 'Load More'
        : 'Nothing more to load'}
  </button>
{/if}

<script lang="ts">
  import { createInfiniteQuery } from '@tanstack/svelte-query'

  const query = createInfiniteQuery(() => ({
    queryKey: ['projects'],
    queryFn: ({ pageParam }) => fetchProjects(pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextId,
  }))

  let sentinel: HTMLDivElement | undefined = $state()

  $effect(() => {
    if (sentinel == null || !query.hasNextPage || query.isFetching) return

    const observer = new IntersectionObserver(([entry]) => {
      if (entry?.isIntersecting) query.fetchNextPage()
    })
    observer.observe(sentinel)

    return () => observer.disconnect()
  })
</script>

{#if query.isPending}
  Loading...
{:else if query.isError}
  <span>Error: {query.error.message}</span>
{:else}
  <ul>
    {#each query.data.pages as page}
      {#each page.projects as project (project.id)}
        <li>{project.name}</li>
      {/each}
    {/each}
  </ul>
  <div bind:this={sentinel}></div>
{/if}