useInfiniteQuery

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

<script setup lang="ts">
import { useInfiniteQuery } from '@tanstack/vue-query'

// `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({
  queryKey: ['projects'],
  queryFn: ({ pageParam }) => fetchProjects(pageParam),
  initialPageParam: 0,
  getNextPageParam: (lastPage) => lastPage.nextId,
  initialData: { pages: [], pageParams: [] },
})
</script>

<template>
  <span v-if="isError">Error: {{ error.message }}</span>
  <ul>
    <template v-for="page in data.pages" :key="page.nextId">
      <li v-for="project in page.projects" :key="project.id">{{ project.name }}</li>
    </template>
  </ul>
</template>

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

<script setup lang="ts">
import { useInfiniteQuery } from '@tanstack/vue-query'

const {
  data,
  isPending,
  isError,
  error,
  fetchNextPage,
  hasNextPage,
  isFetching,
  isFetchingNextPage,
} = useInfiniteQuery({
  queryKey: ['projects'],
  queryFn: ({ pageParam }) => fetchProjects(pageParam),
  initialPageParam: 0,
  getNextPageParam: (lastPage) => lastPage.nextId,
})
</script>

<template>
  <span v-if="isPending">Loading...</span>
  <span v-else-if="isError">Error: {{ error.message }}</span>
  <template v-else>
    <ul>
      <template v-for="page in data.pages" :key="page.nextId">
        <li v-for="project in page.projects" :key="project.id">{{ project.name }}</li>
      </template>
    </ul>
    <button @click="fetchNextPage()" :disabled="!hasNextPage || isFetching">
      {{ isFetchingNextPage ? 'Loading more...' : hasNextPage ? 'Load More' : 'Nothing more to load' }}
    </button>
  </template>
</template>

<script setup lang="ts">
import { onUnmounted, ref, watch } from 'vue'
import { useInfiniteQuery } from '@tanstack/vue-query'

const {
  data,
  isPending,
  isError,
  error,
  fetchNextPage,
  hasNextPage,
  isFetching,
  isFetchingNextPage,
} = useInfiniteQuery({
  queryKey: ['projects'],
  queryFn: ({ pageParam }) => fetchProjects(pageParam),
  initialPageParam: 0,
  getNextPageParam: (lastPage) => lastPage.nextId,
})

const sentinel = ref<HTMLElement>()
let observer: IntersectionObserver | undefined

watch(sentinel, (el) => {
  observer?.disconnect()
  if (el == null) return

  observer = new IntersectionObserver(([entry]) => {
    if (entry?.isIntersecting && hasNextPage.value && !isFetching.value) {
      fetchNextPage()
    }
  })
  observer.observe(el)
})

onUnmounted(() => observer?.disconnect())
</script>

<template>
  <span v-if="isPending">Loading...</span>
  <span v-else-if="isError">Error: {{ error.message }}</span>
  <template v-else>
    <ul>
      <template v-for="page in data.pages" :key="page.nextId">
        <li v-for="project in page.projects" :key="project.id">{{ project.name }}</li>
      </template>
    </ul>
    <div ref="sentinel">{{ isFetchingNextPage ? 'Loading more...' : '' }}</div>
  </template>
</template>

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

<script setup lang="ts">
import { useInfiniteQuery } from '@tanstack/vue-query'

const props = defineProps<{ projectId: number; maxPages: number }>()

const { data } = useInfiniteQuery(() => ({
  queryKey: ['project', props.projectId, 'issues'],
  queryFn: ({ pageParam }) => fetchIssues(props.projectId, pageParam),
  initialPageParam: 0,
  getNextPageParam: (lastPage) => lastPage.nextId,
  maxPages: props.maxPages,
}))
</script>

<template>
  <template v-for="page in data?.pages" :key="page.nextId">
    <li v-for="issue in page.issues" :key="issue.id">{{ issue.title }}</li>
  </template>
</template>

<script setup lang="ts">
import { skipToken, useInfiniteQuery } from '@tanstack/vue-query'

const props = defineProps<{ postId: string | undefined }>()

// Use `isLoading`, not `isPending`, so the loading state doesn't show while the query is disabled.
const { data, isLoading, isError, error } = useInfiniteQuery(() => {
  const postId = props.postId
  return {
    queryKey: ['post', postId, 'comments'],
    queryFn:
      postId != null
        ? ({ pageParam }) => fetchComments(postId, pageParam)
        : skipToken,
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextId,
  }
})
</script>

<template>
  <span v-if="props.postId == null">Select a post</span>
  <span v-else-if="isLoading">Loading...</span>
  <span v-else-if="isError">Error: {{ error.message }}</span>
  <ul v-else>
    <template v-for="page in data.pages" :key="page.nextId">
      <li v-for="comment in page.comments" :key="comment.id">{{ comment.text }}</li>
    </template>
  </ul>
</template>