预取 | TanStack Query Vue Docs

预取

如果您足够幸运，您可能对用户将要做什么有足够的了解，从而能够在需要之前预取他们需要的数据！如果是这种情况，您可以使用 prefetchQuery 方法预取查询结果以放入缓存中：

tsx

const prefetchTodos = async () => {
  // 此查询的结果将像普通查询一样被缓存
  await queryClient.prefetchQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  })
}

const prefetchTodos = async () => {
  // 此查询的结果将像普通查询一样被缓存
  await queryClient.prefetchQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  })
}

如果此查询的新鲜数据已在缓存中，则不会获取数据
如果传递了 staleTime，例如 prefetchQuery({ queryKey: ['todos'], queryFn: fn, staleTime: 5000 })，并且数据早于指定的 staleTime，则将获取查询
如果没有出现 useQuery 的预取查询实例，它将在 gcTime 中指定的时间后被删除并进行垃圾回收。

预取无限查询

无限查询可以像常规查询一样进行预取。默认情况下，仅预取查询的第一页，并将其存储在给定的 QueryKey 下。如果要预取多个页面，可以使用 pages 选项，在这种情况下，您还必须提供一个 getNextPageParam 函数：

tsx

const prefetchProjects = async () => {
  // 此查询的结果将像普通查询一样被缓存
  await queryClient.prefetchInfiniteQuery({
    queryKey: ['projects'],
    queryFn: fetchProjects,
    initialPageParam: 0,
    getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
    pages: 3, // 预取前 3 页
  })
}

const prefetchProjects = async () => {
  // 此查询的结果将像普通查询一样被缓存
  await queryClient.prefetchInfiniteQuery({
    queryKey: ['projects'],
    queryFn: fetchProjects,
    initialPageParam: 0,
    getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
    pages: 3, // 预取前 3 页
  })
}

上面的代码将尝试按顺序预取 3 个页面，并且将为每个页面执行 getNextPageParam 以确定要预取的下一页。如果 getNextPageParam 返回 undefined，则预取将停止。