角查询

重要提示：该库目前处于实验阶段。这意味着在小版本和补丁版本中可能会发生破坏性更改。仔细升级。如果您在生产中使用它，而在实验阶段，请将您的版本锁定到补丁级版本，以避免意外的破坏性更改。

Angular中用于获取、缓存和更新异步数据的函数

文档

访问 https://tanstack.com/query/latest/docs/framework/angular/overview

快速的特点

• 传输/协议/后端无关的数据获取（REST, GraphQL, promises，等等！）
• 自动缓存+重新获取（stale-while-revalidate, Window Refocus, Polling/Realtime）
• 并行+相关查询
• 突变+响应式查询重取
• 多层缓存+自动垃圾收集
• 分页+基于游标的查询
• Load-More +无限滚动查询w/滚动恢复
• 请求取消
• 专用Devtools

快速入门

TanStack Query的Angular适配器需要Angular 16或更高版本。

1. 安装 angular-query

$ npm i @tanstack/angular-query-experimental

或者

$ pnpm add @tanstack/angular-query-experimental

或者

$ yarn add @tanstack/angular-query-experimental

或者

$ bun add @tanstack/angular-query-experimental

2. 初始化 TanStack查询 通过添加 provideTanStackQuery 你的申请

import { provideTanStackQuery } from '@tanstack/angular-query-experimental'
import { QueryClient } from '@tanstack/angular-query-experimental'

bootstrapApplication(AppComponent, {
  providers: [provideTanStackQuery(new QueryClient())],
})

或者在基于ngmodule的应用中

import { provideHttpClient } from '@angular/common/http'
import {
  provideTanStackQuery,
  QueryClient,
} from '@tanstack/angular-query-experimental'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [provideTanStackQuery(new QueryClient())],
  bootstrap: [AppComponent],
})

3. 注入查询

import { injectQuery } from '@tanstack/angular-query-experimental'
import { Component } from '@angular/core'

@Component({...})
export class TodosComponent {
  info = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
}

4. 如果需要动态更新查询上的选项，请确保将它们作为信号传递。如果更新的查询键的数据过期或不存在，查询将自动重新获取。

在StackBlitz中打开

@Component({})
export class PostComponent {
  #postsService = inject(PostsService)
  postId = input.required({
    transform: numberAttribute,
  })

  postQuery = injectQuery(() => ({
    queryKey: ['post', this.postId()],
    queryFn: () => {
      return lastValueFrom(this.#postsService.postById$(this.postId()))
    },
  }))
}

@Injectable({
  providedIn: 'root',
})
export class PostsService {
  #http = inject(HttpClient)

  postById$ = (postId: number) =>
    this.#http.get<Post>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
}

export interface Post {
  id: number
  title: string
  body: string
}