分页查询 / 滞后查询
渲染分页数据是一种非常常见的 UI 模式，在 TanStack Query 中，只需将页码信息包含在查询键中，该模式便“开箱即用”：
TypeScript
1const result = useQuery({2 queryKey: ['projects', page],3 queryFn: () => fetchProjects(page),4})然而，如果你运行这个简单示例，可能会注意到一个奇怪的现象：
UI 会在 success 和 pending 状态之间反复跳动，因为每个新页面都被视为一个全新的查询。
这种体验并不理想，不幸的是，当前许多工具仍坚持如此工作。但 TanStack Query 并非如此！你可能已经猜到，TanStack Query 提供了一个名为 placeholderData 的强大功能，可帮助我们规避此问题。
使用 placeholderData 实现更优的分页查询
考虑以下示例：我们理想情况下希望为某个查询递增 pageIndex（或游标）。若使用 useQuery，技术上依然可以正常工作，但 UI 仍会在 success 和 pending 状态之间跳动，因为每一页或游标都会创建并销毁不同的查询。而将 placeholderData 设为 TanStack Query 导出的 (previousData) => previousData 或 keepPreviousData 函数后，你将获得以下几项新能力：
- 即使查询键已变更，在新数据拉取期间，上一次成功拉取的数据依然可用。
- 当新数据到达时，先前的
data会被无缝切换以展示新数据。 isPlaceholderData可用于获知当前查询实际提供给你的数据
HTML
1<script setup lang="ts">2import { ref } from 'vue'3import { keepPreviousData, useQuery } from '@tanstack/vue-query'4import type { Ref } from 'vue'56const fetcher = (page: Ref<number>) =>7 fetch(8 `https://jsonplaceholder.typicode.com/posts?_page=${page.value}&_limit=10`,9 ).then((response) => response.json())1011const page = ref(1)12const { isPending, isError, data, error, isFetching, isPlaceholderData } =13 useQuery({14 queryKey: ['projects', page],15 queryFn: () => fetcher(page),16 placeholderData: keepPreviousData,17 })18const prevPage = () => {19 page.value = Math.max(page.value - 1, 1)20}21const nextPage = () => {22 if (!isPlaceholderData.value) {23 page.value = page.value + 124 }25}26</script>27 28<template>29 <h1>Posts</h1>30 <p>Current Page: {{ page }} | Previous data: {{ isPlaceholderData }}</p>31 <button @click="prevPage">Prev Page</button>32 <button @click="nextPage">Next Page</button>33 <div v-if="isPending">Loading...</div>34 <div v-else-if="isError">An error has occurred: {{ error }}</div>35 <div v-else-if="data">36 <ul>37 <li v-for="item in data" :key="item.id">38 {{ item.title }}39 </li>40 </ul>41 </div>42</template>使用 placeholderData 对无限查询结果进行滞后处理
尽管使用频率较低，placeholderData 选项同样能完美适配 useInfiniteQuery Hook，因此你可以让用户在无限查询键随时间变化的过程中，无缝继续查看缓存数据。