占位符查询数据
什么是占位符数据？
占位符数据允许查询表现得好像它已经有数据了，类似于 initialData 选项，但数据不会持久化到缓存中。这在某些情况下非常方便，例如当您有足够的局部（或虚假）数据来成功渲染查询，同时在后台获取实际数据时。
示例：单个博客文章查询可以从父级博客文章列表中拉取“预览”数据，该列表仅包含标题和一小段文章正文。您不希望将此部分数据持久化到单个查询的查询结果中，但在实际查询完成以获取整个对象时，它对于尽快显示内容布局非常有用。
有几种方法可以在需要之前为查询的缓存提供占位符数据
- 声明式
- 如果缓存为空，则为查询提供 placeholderData 以预填充其缓存
- 命令式
当我们使用 placeholderData 时，我们的查询不会处于 pending 状态 - 它将开始处于 success 状态，因为我们有 data 要显示 - 即使该数据只是“占位符”数据。为了将其与“真实”数据区分开来，我们还将在查询结果上设置 isPlaceholderData 标志为 true。
作为值的占位符数据
tsx
const result = useQuery({
queryKey: ['todos'],
queryFn: () => fetch('/todos'),
placeholderData: placeholderTodos,
})
const result = useQuery({
queryKey: ['todos'],
queryFn: () => fetch('/todos'),
placeholderData: placeholderTodos,
})
作为函数的占位符数据
placeholderData 也可以是一个函数，您可以在其中访问“先前”成功查询的数据和查询元信息。这对于您想要使用一个查询的数据作为另一个查询的占位符数据的情况非常有用。当 QueryKey 更改时，例如从 ['todos', 1] 更改为 ['todos', 2]，我们可以继续显示“旧”数据，而不是在数据从一个查询过渡到下一个查询时必须显示加载指示器。有关更多信息，请参阅分页查询。
tsx
const result = useQuery({
queryKey: ['todos', id],
queryFn: () => fetch(`/todos/${id}`),
placeholderData: (previousData, previousQuery) => previousData,
})
const result = useQuery({
queryKey: ['todos', id],
queryFn: () => fetch(`/todos/${id}`),
placeholderData: (previousData, previousQuery) => previousData,
})
来自缓存的占位符数据
在某些情况下，您可能能够从另一个查询的缓存结果中为查询提供占位符数据。一个很好的例子是从博客文章列表查询的缓存数据中搜索帖子预览版本，然后将其用作您的单个帖子查询的占位符数据
tsx
const result = useQuery({
queryKey: ['blogPost', blogPostId],
queryFn: () => fetch(`/blogPosts/${blogPostId}`),
placeholderData: () => {
// Use the smaller/preview version of the blogPost from the 'blogPosts'
// query as the placeholder data for this blogPost query
return queryClient
.getQueryData(['blogPosts'])
?.find((d) => d.id === blogPostId)
},
})
const result = useQuery({
queryKey: ['blogPost', blogPostId],
queryFn: () => fetch(`/blogPosts/${blogPostId}`),
placeholderData: () => {
// Use the smaller/preview version of the blogPost from the 'blogPosts'
// query as the placeholder data for this blogPost query
return queryClient
.getQueryData(['blogPosts'])
?.find((d) => d.id === blogPostId)
},
})
