占位查询数据
什么是占位数据？
占位数据（placeholder data）允许一个查询表现得如同它已经拥有数据一样，其效果类似于 initialData 选项，但该数据不会被持久化到缓存中。这在你已掌握足够部分数据（或模拟数据）以成功渲染查询、同时实际数据仍在后台拉取的场景下非常有用。
示例：单篇博客文章查询可从博客文章列表（该列表仅包含标题和文章正文的一小段摘要）中提取“预览”数据。你不希望将这种部分数据持久化为该单篇文章查询的结果，但它有助于尽快展示内容布局，而实际查询则在后台完成整篇文章对象的拉取。
有几种方式可在需要前向缓存提供查询的占位数据：
- 声明式：
- 向查询提供
placeholderData，以便在缓存为空时预先填充其缓存
- 向查询提供
- 命令式：
当我们使用 placeholderData 时，查询将不会处于 pending 状态——它会直接以 success 状态启动，因为我们已有 data 可供展示——即使该数据只是“占位”数据。为将其与“真实”数据区分开来，查询结果中的 isPlaceholderData 标志也将被设为 true。
占位数据作为值
1function Todos() {2 const result = useQuery({3 queryKey: ['todos'],4 queryFn: () => fetch('/todos'),5 placeholderData: placeholderTodos,6 })7}占位数据的记忆化
如果访问查询占位数据的过程开销较大，或你并不希望每次渲染都执行该过程，你可以对这个值进行记忆化（memoization）：
1function Todos() {2 const placeholderData = useMemo(() => generateFakeTodos(), [])3 const result = useQuery({4 queryKey: ['todos'],5 queryFn: () => fetch('/todos'),6 placeholderData,7 })8}占位数据作为函数
placeholderData 还可以是一个函数，在其中你可以访问“上一次”成功查询的数据及查询元信息（Query meta information）。当你希望将一个查询的数据用作另一个查询的占位数据时，这种方式非常有用。当查询键（QueryKey）发生变化（例如从 ['todos', 1] 变为 ['todos', 2]）时，我们可以继续显示“旧”数据，而非在数据从一个查询过渡到下一个查询期间显示加载指示器。更多信息请参阅 分页查询。
1const result = useQuery({2 queryKey: ['todos', id],3 queryFn: () => fetch(`/todos/${id}`),4 placeholderData: (previousData, previousQuery) => previousData,5})来自缓存的占位数据
在某些情况下，你可能能够从另一查询的缓存结果中提供当前查询的占位数据。一个典型示例是：在博客文章列表查询的缓存数据中搜索某篇文章的预览版本，然后将该预览数据用作该文章单独查询的占位数据：
1function BlogPost({ blogPostId }) {2 const queryClient = useQueryClient()3 const result = useQuery({4 queryKey: ['blogPost', blogPostId],5 queryFn: () => fetch(`/blogPosts/${blogPostId}`),6 placeholderData: () => {7 // Use the smaller/preview version of the blogPost from the 'blogPosts'8 // query as the placeholder data for this blogPost query9 return queryClient10 .getQueryData(['blogPosts'])11 ?.find((d) => d.id === blogPostId)12 },13 })14}延伸阅读
关于 Placeholder Data 与 Initial Data 的对比，请参阅 TkDodo 的文章。