分页/延迟查询
渲染分页数据是一种非常常见的 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 来了解查询当前为您提供的数据是什么
tsx
import { keepPreviousData, useQuery } from '@tanstack/react-query'
import React from 'react'
function Todos() {
const [page, setPage] = React.useState(0)
const fetchProjects = (page = 0) =>
fetch('/api/projects?page=' + page).then((res) => res.json())
const { isPending, isError, error, data, isFetching, isPlaceholderData } =
useQuery({
queryKey: ['projects', page],
queryFn: () => fetchProjects(page),
placeholderData: keepPreviousData,
})
return (
<div>
{isPending ? (
<div>Loading...</div>
) : isError ? (
<div>Error: {error.message}</div>
) : (
<div>
{data.projects.map((project) => (
<p key={project.id}>{project.name}</p>
))}
</div>
)}
<span>Current Page: {page + 1}</span>
<button
onClick={() => setPage((old) => Math.max(old - 1, 0))}
disabled={page === 0}
>
Previous Page
</button>
<button
onClick={() => {
if (!isPlaceholderData && data.hasMore) {
setPage((old) => old + 1)
}
}}
// Disable the Next Page button until we know a next page is available
disabled={isPlaceholderData || !data?.hasMore}
>
Next Page
</button>
{isFetching ? <span> Loading...</span> : null}
</div>
)
}
import { keepPreviousData, useQuery } from '@tanstack/react-query'
import React from 'react'
function Todos() {
const [page, setPage] = React.useState(0)
const fetchProjects = (page = 0) =>
fetch('/api/projects?page=' + page).then((res) => res.json())
const { isPending, isError, error, data, isFetching, isPlaceholderData } =
useQuery({
queryKey: ['projects', page],
queryFn: () => fetchProjects(page),
placeholderData: keepPreviousData,
})
return (
<div>
{isPending ? (
<div>Loading...</div>
) : isError ? (
<div>Error: {error.message}</div>
) : (
<div>
{data.projects.map((project) => (
<p key={project.id}>{project.name}</p>
))}
</div>
)}
<span>Current Page: {page + 1}</span>
<button
onClick={() => setPage((old) => Math.max(old - 1, 0))}
disabled={page === 0}
>
Previous Page
</button>
<button
onClick={() => {
if (!isPlaceholderData && data.hasMore) {
setPage((old) => old + 1)
}
}}
// Disable the Next Page button until we know a next page is available
disabled={isPlaceholderData || !data?.hasMore}
>
Next Page
</button>
{isFetching ? <span> Loading...</span> : null}
</div>
)
}
使用 placeholderData 延迟无限查询结果
虽然不常见，但 placeholderData 选项也与 useInfiniteQuery hook 无缝协作，因此您可以无缝地允许用户在无限查询键随时间变化时继续查看缓存的数据。
