概述
重要提示：该库目前处于实验阶段。这意味着在次要和补丁版本中都可能发生重大更改。请谨慎升级。如果您在实验阶段将此库用于生产环境，请将版本锁定到补丁级别，以避免意外的重大更改。
@tanstack/angular-query-experimental 包提供了通过 Angular 使用 TanStack Query 的一等 API。
欢迎提供反馈！
我们正在努力为 Angular 上的 TanStack Query 准备一个稳定的 API。如果您有任何反馈，请在 TanStack Discord 服务器上联系我们，或 访问 GitHub 上的此讨论。
支持的 Angular 版本
TanStack Query 与 Angular v16 及更高版本兼容。
TanStack Query（前身为 React Query）通常被描述为 Web 应用程序缺失的数据获取库，但从技术上讲，它让在 Web 应用程序中“获取、缓存、同步和更新服务器状态”变得轻而易举。
动机
大多数核心 Web 框架不提供一种全面的数据获取或更新方式。因此，开发人员要么构建封装了严格数据获取规则的元框架，要么发明自己的数据获取方式。这通常意味着将基于组件的状态和副作用拼凑在一起，或者使用更通用的状态管理库来存储和提供整个应用程序的异步数据。
虽然大多数传统的状态管理库非常适合处理客户端状态，但它们不擅长处理异步或服务器状态。这是因为服务器状态完全不同。首先，服务器状态
- 远程持久化在您可能无法控制或拥有的位置
- 需要异步 API 进行获取和更新
- 意味着共享所有权，并且可以在您不知情的情况下被其他人更改
- 如果您不小心，可能会在您的应用程序中变得“过时”
一旦您掌握了应用程序中服务器状态的本质，**甚至会出现更多挑战**，例如
- 缓存……（可能是编程中最难的事情）
- 将对相同数据的多个请求去重为单个请求
- 在后台更新“过时”数据
- 知道数据何时“过时”
- 尽快反映数据的更新
- 分页和懒加载数据等性能优化
- 管理服务器状态的内存和垃圾回收
- 使用结构共享记忆查询结果
如果您没有被这份列表压倒，那一定是说明您已经解决了所有服务器状态问题，并且值得嘉奖。但是，如果您像绝大多数人一样，您可能还没有解决所有或大多数这些挑战，而我们才刚刚开始触及皮毛！
TanStack Query 绝对是管理服务器状态的*最佳*库之一。它**开箱即用，零配置，并且可以根据您的喜好进行定制**，随着应用程序的增长而不断发展。
TanStack Query 允许您战胜和克服*服务器状态*的棘手挑战和障碍，并在应用程序数据开始控制您之前控制它。
更技术性地说，TanStack Query 很可能会
- 帮助您从应用程序中移除大量复杂且难以理解的代码，并用少量 Angular Query 逻辑取而代之。
- 使您的应用程序更易于维护，更易于构建新功能，而无需担心连接新的服务器状态数据源
- 通过使您的应用程序感觉比以往任何时候都更快、响应更灵敏，从而对您的最终用户产生直接影响。
- 可能有助于您节省带宽并提高内存性能
别再说了，快给我看代码！
在下面的示例中，您可以看到 TanStack Query 最基本和简单的用法，用于获取 TanStack Query GitHub 项目本身的 GitHub 统计信息
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { CommonModule } from '@angular/common'
import { injectQuery } from '@tanstack/angular-query-experimental'
import { lastValueFrom } from 'rxjs'
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'simple-example',
standalone: true,
template: `
@if (query.isPending()) {
Loading...
}
@if (query.error()) {
An error has occurred: {{ query.error().message }}
}
@if (query.data(); as data) {
<h1>{{ data.name }}</h1>
<p>{{ data.description }}</p>
<strong>👀 {{ data.subscribers_count }}</strong>
<strong>✨ {{ data.stargazers_count }}</strong>
<strong>🍴 {{ data.forks_count }}</strong>
}
`
})
export class SimpleExampleComponent {
http = inject(HttpClient)
query = injectQuery(() => ({
queryKey: ['repoData'],
queryFn: () =>
lastValueFrom(
this.http.get<Response>('https://api.github.com/repos/tanstack/query'),
),
}))
}
interface Response {
name: string
description: string
subscribers_count: number
stargazers_count: number
forks_count: number
}
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { CommonModule } from '@angular/common'
import { injectQuery } from '@tanstack/angular-query-experimental'
import { lastValueFrom } from 'rxjs'
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'simple-example',
standalone: true,
template: `
@if (query.isPending()) {
Loading...
}
@if (query.error()) {
An error has occurred: {{ query.error().message }}
}
@if (query.data(); as data) {
<h1>{{ data.name }}</h1>
<p>{{ data.description }}</p>
<strong>👀 {{ data.subscribers_count }}</strong>
<strong>✨ {{ data.stargazers_count }}</strong>
<strong>🍴 {{ data.forks_count }}</strong>
}
`
})
export class SimpleExampleComponent {
http = inject(HttpClient)
query = injectQuery(() => ({
queryKey: ['repoData'],
queryFn: () =>
lastValueFrom(
this.http.get<Response>('https://api.github.com/repos/tanstack/query'),
),
}))
}
interface Response {
name: string
description: string
subscribers_count: number
stargazers_count: number
forks_count: number
}
