分页 / 延迟查询

渲染分页数据是一种非常常见的 UI 模式，在 TanStack Query 中，通过在查询键中包含页面信息，它“就是这样工作”的

tsx

const result = useQuery({
  queryKey: ['projects', page],
  queryFn: fetchProjects,
})

const result = useQuery({
  queryKey: ['projects', page],
  queryFn: fetchProjects,
})

但是，如果你运行这个简单的例子，你可能会注意到一些奇怪的事情

UI 在成功和待定状态之间跳动，因为每个新页面都被视为一个全新的查询。

这种体验并不理想，不幸的是，许多现代工具都坚持这种工作方式。但 TanStack Query 不是！正如你可能已经猜到的那样，TanStack Query 带有一个很棒的功能，叫做placeholderData，它允许我们解决这个问题。

使用placeholderData更好地进行分页查询

考虑下面的例子，我们理想情况下希望为查询增加 pageIndex（或光标）。如果我们使用useQuery，它在技术上仍然可以正常工作，但 UI 会在成功和待定状态之间跳动，因为每个页面或光标都会创建和销毁不同的查询。通过将placeholderData设置为(previousData) => previousData或从 TanStack Query 导出的keepPreviousData函数，我们获得了几项新功能

即使查询键已更改，在请求新数据时，仍可获取上次成功获取的数据.
当新数据到达时，之前的数据会无缝地替换为显示新数据。
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钩子完美配合，因此您可以无缝地允许用户在无限查询键随时间变化时继续查看缓存数据。

使用placeholderData更好地进行分页查询

使用placeholderData延迟无限查询结果

想跳过文档吗？

想跳过文档吗？