How do you implement pagination and infinite scroll with TanStack Query?

Standard pagination: plain useQuery with a page ref in the key plus keepPreviousData to avoid blank states. Infinite scroll: useInfiniteQuery accumulates pages automatically.

<script setup lang="ts">
import { ref, computed } from "vue"
import { useQuery, useInfiniteQuery, keepPreviousData } from "@tanstack/vue-query"

// Pattern 1 — paginated table
const page = ref(1)
const { data:postsPage } = useQuery({
  queryKey: computed(()=>["posts",{page:page.value}]),
  queryFn:  ()=>fetchPosts({page:page.value,limit:10}),
  placeholderData: keepPreviousData,
})

// Pattern 2 — infinite / "Load more"
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
  queryKey:         ["posts","infinite"],
  queryFn:          ({pageParam})=>fetchPosts({page:pageParam,limit:10}),
  initialPageParam: 1,
  getNextPageParam: (last,all)=>last.hasMore ? all.length+1 : undefined,
})
const allPosts = computed(()=>data.value?.pages.flatMap(p=>p.items)??[])
</script>
<template>
  <article v-for="p in allPosts" :key="p.id">{{ p.title }}</article>
  <button @click="fetchNextPage()" :disabled="!hasNextPage||isFetchingNextPage">
    {{ isFetchingNextPage?"Loading...":"Load more" }}
  </button>
</template>