此页面上的内容
查询
查询基础
查询是一个声明式的、与唯一键绑定的异步数据源依赖。查询可以与任何基于 Promise 的方法（包括 GET 和 POST 方法）一起使用，从服务器获取数据。如果你的方法会修改服务器上的数据，我们建议使用Mutations。
要在组件或服务中订阅查询，请调用 injectQuery，并至少提供
- **查询的唯一键**
- 一个返回 Promise 或 Observable 的函数
- 解析数据，或者
- 抛出错误
ts
import { injectQuery } from '@tanstack/angular-query-experimental'
export class TodosComponent {
info = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
}
import { injectQuery } from '@tanstack/angular-query-experimental'
export class TodosComponent {
info = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
}
您提供的**唯一键**在内部用于在整个应用程序中重新获取、缓存和共享您的查询。
injectQuery 返回的查询结果包含了你在模板和其他任何数据使用中需要的所有查询信息。
ts
result = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
result = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
result 对象包含了一些你为了提高效率而需要了解的非常重要的状态。查询在任何给定时刻只能处于以下状态之一：
- isPending 或 status === 'pending' - 查询尚无数据
- isError 或 status === 'error' - 查询遇到错误
- isSuccess 或 status === 'success' - 查询成功，数据可用。
除了这些主要状态之外，根据查询的状态，还可以获得更多信息：
- error - 如果查询处于 isError 状态，则可以通过 error 属性访问错误信息。
- data - 如果查询处于 isSuccess 状态，则可以通过 data 属性访问数据。
- isFetching - 在任何状态下，如果查询正在进行（包括后台重新获取），isFetching 都将为 true。
对于大多数查询，通常足以检查 isPending 状态，然后是 isError 状态，最后假设数据可用并渲染成功状态。
angular-ts
@Component({
selector: 'todos',
standalone: true,
template: `
@if (todos.isPending()) {
<span>Loading...</span>
} @else if (todos.isError()) {
<span>Error: {{ todos.error()?.message }}</span>
} @else {
<!-- We can assume by this point that status === 'success' -->
@for (todo of todos.data(); track todo.id) {
<li>{{ todo.title }}</li>
} @empty {
<li>No todos found</li>
}
}
`,
})
export class PostsComponent {
todos = injectQuery(() => ({
queryKey: ['todos'],
queryFn: fetchTodoList,
}))
}
@Component({
selector: 'todos',
standalone: true,
template: `
@if (todos.isPending()) {
<span>Loading...</span>
} @else if (todos.isError()) {
<span>Error: {{ todos.error()?.message }}</span>
} @else {
<!-- We can assume by this point that status === 'success' -->
@for (todo of todos.data(); track todo.id) {
<li>{{ todo.title }}</li>
} @empty {
<li>No todos found</li>
}
}
`,
})
export class PostsComponent {
todos = injectQuery(() => ({
queryKey: ['todos'],
queryFn: fetchTodoList,
}))
}
如果您不喜欢布尔值，也可以随时使用 status 状态。
angular-ts
@Component({
selector: 'todos',
standalone: true,
template: `
@switch (todos.status()) {
@case ('pending') {
<span>Loading...</span>
}
@case ('error') {
<span>Error: {{ todos.error()?.message }}</span>
}
<!-- also status === 'success', but "else" logic works, too -->
@default {
<ul>
@for (todo of todos.data(); track todo.id) {
<li>{{ todo.title }}</li>
} @empty {
<li>No todos found</li>
}
</ul>
}
}
`,
})
class TodosComponent {}
@Component({
selector: 'todos',
standalone: true,
template: `
@switch (todos.status()) {
@case ('pending') {
<span>Loading...</span>
}
@case ('error') {
<span>Error: {{ todos.error()?.message }}</span>
}
<!-- also status === 'success', but "else" logic works, too -->
@default {
<ul>
@for (todo of todos.data(); track todo.id) {
<li>{{ todo.title }}</li>
} @empty {
<li>No todos found</li>
}
</ul>
}
}
`,
})
class TodosComponent {}
如果你在访问 data 之前已经检查了 pending 和 error，TypeScript 也会正确地缩小 data 的类型。
FetchStatus
除了 status 字段外，你还将获得一个额外的 fetchStatus 属性，具有以下选项：
- fetchStatus === 'fetching' - 查询当前正在获取。
- fetchStatus === 'paused' - 查询想要获取数据，但已被暂停。有关更多信息，请参阅 Network Mode 指南。
- fetchStatus === 'idle' - 查询目前没有进行任何操作。
为什么有两种不同的状态？
后台重新获取和 stale-while-revalidate 逻辑使得 status 和 fetchStatus 的所有组合都可能出现。例如：
- 一个处于 success 状态的查询通常会处于 idle fetchStatus，但如果正在进行后台重新获取，它也可能处于 fetching 状态。
- 一个挂载后没有数据的查询通常会处于 pending 状态和 fetching fetchStatus，但如果网络连接不可用，它也可能处于 paused 状态。
因此，请记住，查询可能处于 pending 状态，但实际上并没有获取数据。根据经验法则：
- status 提供有关 data 的信息：我们是否有数据？
- fetchStatus 提供了关于 queryFn 的信息：它是否正在运行？
