分页/延迟查询
渲染分页数据是一种非常常见的 UI 模式，在 TanStack Query 中，通过在查询键中包含页面信息，它可以“正常工作”
tsx
const result = useQuery({
queryKey: ['projects', page],
queryFn: fetchProjects,
})
const result = useQuery({
queryKey: ['projects', page],
queryFn: fetchProjects,
})
但是，如果您运行这个简单的示例，您可能会注意到一些奇怪的事情
UI 会在 success 和 pending 状态之间跳动，因为每个新页面都被视为一个全新的查询。
这种体验并非最佳，不幸的是，这是当今许多工具坚持工作的方式。但 TanStack Query 不是！正如您可能猜到的，TanStack Query 附带一个名为 placeholderData 的强大功能，使我们能够解决这个问题。
使用 placeholderData 优化分页查询
考虑以下示例，我们理想情况下希望为查询递增 pageIndex（或游标）。如果我们使用 useQuery，从技术上讲它仍然可以正常工作，但是 UI 仍然会在 success 和 pending 状态之间跳动，因为每个页面或游标都会创建和销毁不同的查询。通过将 placeholderData 设置为 (previousData) => previousData 或从 TanStack Query 导出的 keepPreviousData 函数，我们可以获得一些新功能
- 即使查询键已更改，在请求新数据时，仍然可以使用上次成功获取的数据.
- 当新数据到达时，之前的 data 会被无缝切换以显示新数据。
- 可以使用 isPlaceholderData 来了解查询当前为您提供的数据
vue
<script setup lang="ts">
import { ref, Ref } from 'vue'
import { useQuery, keepPreviousData } from '@tanstack/vue-query'
const fetcher = (page: Ref<number>) =>
fetch(
`https://jsonplaceholder.typicode.com/posts?_page=${page.value}&_limit=10`,
).then((response) => response.json())
const page = ref(1)
const { isPending, isError, data, error, isFetching, isPlaceholderData } =
useQuery({
queryKey: ['projects', page],
queryFn: () => fetcher(page),
placeholderData: keepPreviousData,
})
const prevPage = () => {
page.value = Math.max(page.value - 1, 1)
}
const nextPage = () => {
if (!isPlaceholderData.value) {
page.value = page.value + 1
}
}
</script>
<template>
<h1>Posts</h1>
<p>Current Page: {{ page }} | Previous data: {{ isPlaceholderData }}</p>
<button @click="prevPage">Prev Page</button>
<button @click="nextPage">Next Page</button>
<div v-if="isPending">Loading...</div>
<div v-else-if="isError">An error has occurred: {{ error }}</div>
<div v-else-if="data">
<ul>
<li v-for="item in data" :key="item.id">
{{ item.title }}
</li>
</ul>
</div>
</template>
<script setup lang="ts">
import { ref, Ref } from 'vue'
import { useQuery, keepPreviousData } from '@tanstack/vue-query'
const fetcher = (page: Ref<number>) =>
fetch(
`https://jsonplaceholder.typicode.com/posts?_page=${page.value}&_limit=10`,
).then((response) => response.json())
const page = ref(1)
const { isPending, isError, data, error, isFetching, isPlaceholderData } =
useQuery({
queryKey: ['projects', page],
queryFn: () => fetcher(page),
placeholderData: keepPreviousData,
})
const prevPage = () => {
page.value = Math.max(page.value - 1, 1)
}
const nextPage = () => {
if (!isPlaceholderData.value) {
page.value = page.value + 1
}
}
</script>
<template>
<h1>Posts</h1>
<p>Current Page: {{ page }} | Previous data: {{ isPlaceholderData }}</p>
<button @click="prevPage">Prev Page</button>
<button @click="nextPage">Next Page</button>
<div v-if="isPending">Loading...</div>
<div v-else-if="isError">An error has occurred: {{ error }}</div>
<div v-else-if="data">
<ul>
<li v-for="item in data" :key="item.id">
{{ item.title }}
</li>
</ul>
</div>
</template>
使用 placeholderData 处理无限查询的延迟结果
虽然不太常见，但 placeholderData 选项也与 useInfiniteQuery hook 完美配合，因此您可以无缝地允许您的用户在无限查询键随时间变化时继续查看缓存的数据。
