占位符查询数据
什么是占位符数据？
占位符数据允许查询表现得好像它已经拥有数据，类似于 initialData 选项，但数据不会持久化到缓存中。这在您有足够的局部（或假）数据来成功渲染查询，同时在后台获取实际数据的情况下非常有用。
例如：一个单独的博客文章查询可以从只包含标题和少量文章摘要的父博客文章列表中拉取“预览”数据。您不希望将这些局部数据持久化到单个查询的结果中，但它对于尽快显示内容布局非常有用，直到实际查询完成并获取整个对象。
有几种方法可以在需要之前为查询提供占位符数据到缓存中
- 声明式
- 为查询提供 placeholderData，以便在缓存为空时预填充
- 命令式
当我们使用 placeholderData 时，我们的查询将不会处于 pending 状态 - 它将从 success 状态开始，因为我们有 data 可以显示 - 即使这些数据只是“占位符”数据。为了将其与“真实”数据区分开来，查询结果还将有一个 isPlaceholderData 标志设置为 true。
作为值的占位符数据
ts
class TodosComponent {
result = injectQuery(() => ({
queryKey: ['todos'],
queryFn: () => fetch('/todos'),
placeholderData: placeholderTodos,
}))
}
class TodosComponent {
result = injectQuery(() => ({
queryKey: ['todos'],
queryFn: () => fetch('/todos'),
placeholderData: placeholderTodos,
}))
}
作为函数的占位符数据
placeholderData 也可以是一个函数，您可以在其中访问“之前”成功查询的数据和 Query 元信息。当您想将一个查询的数据用作另一个查询的占位符数据时，这很有用。当 QueryKey 改变时，例如从 ['todos', 1] 更改为 ['todos', 2]，我们可以继续显示“旧”数据，而不必在数据从一个查询“过渡”到下一个查询时显示加载微调器。有关更多信息，请参阅 分页查询。
ts
class TodosComponent {
result = injectQuery(() => ({
queryKey: ['todos', id()],
queryFn: () => fetch(`/todos/${id}`),
placeholderData: (previousData, previousQuery) => previousData,
}))
}
class TodosComponent {
result = injectQuery(() => ({
queryKey: ['todos', id()],
queryFn: () => fetch(`/todos/${id}`),
placeholderData: (previousData, previousQuery) => previousData,
}))
}
来自缓存的占位符数据
在某些情况下，您可以通过另一个查询的缓存结果来为查询提供占位符数据。一个很好的例子是从博客文章列表查询中搜索缓存数据，以获取文章的预览版本，然后将其用作您单独的文章查询的占位符数据。
ts
export class BlogPostComponent {
// Until Angular supports signal-based inputs, we have to set a signal
@Input({ required: true, alias: 'postId' })
set _postId(value: number) {
this.postId.set(value)
}
postId = signal(0)
queryClient = inject(QueryClient)
result = injectQuery(() => ({
queryKey: ['blogPost', this.postId()],
queryFn: () => fetch(`/blogPosts/${this.postId()}`),
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 === this.postId())
},
}))
}
export class BlogPostComponent {
// Until Angular supports signal-based inputs, we have to set a signal
@Input({ required: true, alias: 'postId' })
set _postId(value: number) {
this.postId.set(value)
}
postId = signal(0)
queryClient = inject(QueryClient)
result = injectQuery(() => ({
queryKey: ['blogPost', this.postId()],
queryFn: () => fetch(`/blogPosts/${this.postId()}`),
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 === this.postId())
},
}))
}
