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