分页/滞后查询 paginated-queries
呈现分页数据是一种非常常见的 UI 模式，在 React Query 中，它通过在查询键中包含页面信息来"正常工作"：
JavaScript
1const result = useQuery(["projects", page], fetchProjects);但是，如果运行该示例，您可能会注意到一些奇怪的事情：
UI 在success和loading状态之间来回跳转，因为每个新页面都被视为一个全新的查询。
这种体验并不是最佳的，不幸的是，今天有不少工具在坚持使用。
但不是 React Query！
您可能已经猜到了，React Query 带有一个称为keepPreviousData的强大功能，从而使得这个问题可以被轻易的解决。
使用keepPreviousData的更好的分页查询
考虑下面的例子，在理想情况下，我们希望为查询增加 pageIndex（或游标）。
如果使用useQuery，从技术上讲它仍然可以正常工作，但是 UI 会随着每个页面或游标创建和销毁不同的查询而跳出 success 和 loading 状态。
通过将keepPreviousData设置为true，我们可以得到一些新的东西：
- 请求新数据时，即使查询键值已更改，上次成功获取的数据仍可用
- 当新数据到达时，先前的数据将被无缝交换以显示新数据
- 可以使用
isPreviousData来了解当前为您提供的是什么数据
JavaScript
1function Todos() {2 const [page, setPage] = React.useState(0);3 4 const fetchProjects = (page = 0) =>5 fetch("/api/projects?page=" + page).then((res) => res.json());6 7 const { isLoading, isError, error, data, isFetching, isPreviousData } =8 useQuery(["projects", page], () => fetchProjects(page), {9 keepPreviousData: true,10 });11 12 return (13 <div>14 {isLoading ? (15 <div>Loading...</div>16 ) : isError ? (17 <div>Error: {error.message}</div>18 ) : (19 <div>20 {data.projects.map((project) => (21 <p key={project.id}>{project.name}</p>22 ))}23 </div>24 )}25 <span>Current Page: {page + 1}</span>26 <button27 onClick={() => setPage((old) => Math.max(old - 1, 0))}28 disabled={page === 0}29 >30 Previous Page31 </button>{" "}32 <button33 onClick={() => {34 if (!isPreviousData && data.hasMore) {35 setPage((old) => old + 1);36 }37 }}38 // Disable the Next Page button until we know a next page is available39 disabled={isPreviousData || !data?.hasMore}40 >41 Next Page42 </button>43 {isFetching ? <span> Loading...</span> : null}{" "}44 </div>45 );46}使用keepPreviousData滞后无限查询的结果
尽管不那么常见，但是keepPreviousData选项也可以与useInfiniteQueryHook 完美配合，所以您可以无缝地允许您的用户继续查看缓存的数据，而无限查询的键值将随着时间变化而自动变化。