TanStack Query 的 Angular 集成Angular Query 实验版核心概念与实战指南【免费下载链接】query Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.项目地址: https://gitcode.com/GitHub_Trending/qu/query本文围绕 Angular 版 TanStack Querytanstack/angular-query-experimental的官方 Overview 文档展开说明它在当前仓库中的定位、实验阶段的使用注意事项、Angular 16 的版本兼容性以及injectQuery这类一等 API 的基本形态。读完后你将理解为什么服务端状态server state需要专门的状态管理方案、如何在 Angular 组件中以最简形式发起带缓存的异步数据请求以及如何从源码角度验证其注入式 API 与 Provider 体系的设计。实验阶段声明与版本兼容首先需要明确一点这也是官方文档开头给出的重要提示该库目前处于实验阶段experimental这意味着破坏性变更不仅可能出现在 minor 版本中也可能出现在 patch 版本中。因此升级时需格外谨慎若在生产环境使用应将版本锁定到 patch 级例如用~或精确版本以避免意外的破坏性变更。这一点直接体现在包名上npm 包名为tanstack/angular-query-experimental与 React/Vue/Svelte/Solid 等稳定版包名如tanstack/react-query形成区分。关于框架兼容性官方文档明确说明TanStack Query 兼容 Angular v16 及以上版本。这意味着你需要具备 standalone components、if/for控制流语法、Signals 等现代 Angular 特性仓库中的示例均基于这些特性编写例如ChangeDetectionStrategy.OnPush加if模板控制流。为什么服务端状态需要专门管理Overview 文档用相当篇幅阐述了动机Motivation这部分内容值得完整继承因为它解释了 Angular Query 在整个 TanStack Query 生态中的价值主张绝大多数核心 Web 框架并不自带一种有主见的、整体性的数据获取与更新方式。开发者因此不得不二选一要么依赖封装了严格数据获取观点的元框架meta-framework要么自己发明数据获取方式——通常意味着拼凑组件级状态与副作用或用更通用的状态管理库来存储和提供异步数据。而传统状态管理库虽然擅长处理客户端状态client state但在处理异步或服务端状态时并不那么称手。核心原因在于服务端状态本质上是完全不同的具体表现为持久化在远程位置可能不受你控制或所有需要异步 API 来获取和更新意味着共享所有权可能在你的不知情下被他人修改如果不加小心在你的应用中可能悄悄过期。理解服务端状态的特性之后更多挑战会随之而来缓存……也许是编程中最难的事情之一将同一数据的多个请求去重dedupe为单个请求在后台更新过期数据判断数据何时过期尽可能快地反映数据更新分页、懒加载等性能优化服务端状态的内存管理与垃圾回收通过结构化共享structural sharing对查询结果进行记忆化。官方文档的结论是TanStack Query 是管理服务端状态的一流库开箱即用、零配置即可运行并且可以随应用增长按需定制。具体而言它通常会帮你移除大量复杂且易被误解的代码替换为寥寥数行 Angular Query 逻辑让应用更易维护新增功能时不必为接入新的服务端数据源而担忧通过让应用更快、响应更灵敏直接影响终端用户体验可能节省带宽并提升内存性能表现。最小可用示例injectQuery 拉取 GitHub 数据Overview 文档给出的第一个代码示例展示了 TanStack Query 在 Angular 中最基本、最简洁的形态——获取 TanStack Query 项目自身的 GitHub 统计信息。该示例在仓库中对应 examples/angular/simple 示例项目可以直接查看其完整可运行结构。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, 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.getResponse(https://api.github.com/repos/tanstack/query), ), })) } interface Response { name: string description: string subscribers_count: number stargazers_count: number forks_count: number }这个示例虽然短小但包含 Angular Query 的全部核心要点injectQuery是核心入口它接受一个返回查询选项的函数() ({ queryKey, queryFn, ... })返回的query对象上的data()、isPending()、error()等成员都是Signal可以直接在模板中调用——这正是 Overview 强调的1st-class API一等 API的含义无需订阅、无需async管道模板里就是响应式的。与 Angular HttpClient 的自然配合queryFn中通过inject(HttpClient)拿到原生HttpClient用lastValueFrom把 Observable 转回 Promise。仓库中 docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md 专门讨论了 Angular HttpClient 与其他数据获取客户端的衔接方式可进一步深入。queryKey: [repoData]查询的唯一标识TanStack Query 用它做缓存存取与请求去重。状态三态表达isPending()加载中、error()错误、data()数据配合 Angular 17 的if控制流实现条件渲染。从源码看 API 面injectQuery 的响应式上下文Overview 文档中的示例只是冰山一角。从 packages/angular-query-experimental/src/index.ts 的导出清单可以确认该包提供的完整 Angular 注入式 API 面API作用injectQuery注入一个查询声明式依赖一个与唯一 key 绑定的异步数据源injectInfiniteQuery注入无限滚动/分页类查询injectMutation注入变更mutation用于写操作injectMutationState监听 mutation 的状态injectQueries一次注入多个查询injectIsFetching/injectIsMutating监听全局是否有请求/变更正在进行injectIsRestoring配合持久化客户端监听状态恢复过程injectQueryClient注入QueryClient实例本身provideTanStackQuery/provideQueryClient应用级 Provider 配置queryOptions/mutationOptions/infiniteQueryOptions类型安全的选项工厂函数此外该包在 index.ts 顶部还有一行export * from tanstack/query-core即QueryClient、QueryKey等核心类型与类直接从本包透传导出业务代码无需再单独安装query-core。关于injectQuery的响应式语义packages/angular-query-experimental/src/inject-query.ts 中的源码注释给出了关键说明类似 Angular 的computed传给injectQuery的函数会在响应式上下文中运行。源码注释中附带了一个依赖 Signal 的例子class ServiceOrComponent { filter signal() todosQuery injectQuery(() ({ queryKey: [todos, this.filter()], queryFn: () fetchTodos(this.filter()), // Signals 可以与表达式组合 enabled: !!this.filter(), })) }这意味着当filter信号从假值变为真值时查询会自动启用并执行当它变回假值时查询会自动禁用。queryKey中读取的信号变化也会触发查询 key 的重算——这是 Angular Query 相对命令式 API 的最大差异点之一。若你想了解更多 zoneless无 Zone.js场景下的行为可参阅 docs/framework/angular/zoneless.md。接入应用安装与 Provider 配置Overview 的收尾指引读者前往 安装指南 与 API 参考文档。安装部分很简单Angular Query 兼容 Angular v16任选一种包管理器npm i tanstack/angular-query-experimental # 或 pnpm add tanstack/angular-query-experimental # 或 yarn add tanstack/angular-query-experimental # 或 bun add tanstack/angular-query-experimental安装之后应用启动时需要提供QueryClient。这部分在 packages/angular-query-experimental/src/providers.ts 中有完整实现provideTanStackQuery支持多种用法Standalone 启动推荐写法import { provideTanStackQuery, QueryClient, } from tanstack/angular-query-experimental bootstrapApplication(AppComponent, { providers: [provideTanStackQuery(new QueryClient())], })NgModule 风格NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [provideTanStackQuery(new QueryClient())], bootstrap: [AppComponent], }) export class AppModule {}启用 Devtools传入withDevtools()特性函数默认仅在开发模式下加载开发者工具对应仓库中的 docs/framework/angular/devtools.mdproviders: [ provideTanStackQuery(new QueryClient(), withDevtools()), ]使用 InjectionToken 的高级优化可以传入一个提供QueryClient的InjectionToken而非实例本身这样 TanStack Query 可以不进入主应用 bundle仅在懒加载路由中存在。源码注释明确说明这是面向只需在懒加载路由中包含 TanStack Query、但仍共享QueryClient的场景的优化手段对大多数应用而言在主配置中直接提供实例即可export const MY_QUERY_CLIENT new InjectionTokenQueryClient(, { factory: () new QueryClient(), }) // 在懒加载路由或懒加载组件的 providers 中 providers: [provideTanStackQuery(MY_QUERY_CLIENT)]从源码结构看providers.ts 中的provideQueryClient负责底层生命周期工厂函数在创建QueryClient时会注册DestroyRef.onDestroy(() client.unmount())并在构造后立即client.mount()——即客户端的生命周期与 Angular 注入器绑定容器销毁时自动卸载这一点从源码可以确认是防止内存泄漏的关键细节。另外provideAngularQuery作为旧名已被标记为deprecated统一迁移到provideTanStackQuery。深入学习路径按 Overview 文档的指引建议的学习路径为通过 docs/framework/angular/installation.md 完成安装其中也提示可先浏览 simple / basic 示例试玩通过 docs/framework/angular/quick-start.md 走一遍快速上手通过 docs/framework/angular/reference/ 目录下的 API 参考如injectQuery函数参考查阅各注入函数的完整签名与选项运行仓库中的 Angular 示例集合examples/angular/ 下覆盖 basic、simple、pagination、optimistic-updates、infinite-query-with-max-pages、rxjs、router 等场景每个示例均为独立的 Angular 应用可直接对照本文的 Overview 主题理解各特性。需要再次强调的前提由于该库仍处于实验阶段生产使用时请务必按文档要求锁定 patch 级版本并关注 minor/patch 版本中可能出现的破坏性变更。【免费下载链接】query Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.项目地址: https://gitcode.com/GitHub_Trending/qu/query创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 TanStack Query 的 Angular 集成：Angular Query 实验版核心概念与实战指南
TanStack Query 的 Angular 集成Angular Query 实验版核心概念与实战指南【免费下载链接】query Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.项目地址: https://gitcode.com/GitHub_Trending/qu/query本文围绕 Angular 版 TanStack Querytanstack/angular-query-experimental的官方 Overview 文档展开说明它在当前仓库中的定位、实验阶段的使用注意事项、Angular 16 的版本兼容性以及injectQuery这类一等 API 的基本形态。读完后你将理解为什么服务端状态server state需要专门的状态管理方案、如何在 Angular 组件中以最简形式发起带缓存的异步数据请求以及如何从源码角度验证其注入式 API 与 Provider 体系的设计。实验阶段声明与版本兼容首先需要明确一点这也是官方文档开头给出的重要提示该库目前处于实验阶段experimental这意味着破坏性变更不仅可能出现在 minor 版本中也可能出现在 patch 版本中。因此升级时需格外谨慎若在生产环境使用应将版本锁定到 patch 级例如用~或精确版本以避免意外的破坏性变更。这一点直接体现在包名上npm 包名为tanstack/angular-query-experimental与 React/Vue/Svelte/Solid 等稳定版包名如tanstack/react-query形成区分。关于框架兼容性官方文档明确说明TanStack Query 兼容 Angular v16 及以上版本。这意味着你需要具备 standalone components、if/for控制流语法、Signals 等现代 Angular 特性仓库中的示例均基于这些特性编写例如ChangeDetectionStrategy.OnPush加if模板控制流。为什么服务端状态需要专门管理Overview 文档用相当篇幅阐述了动机Motivation这部分内容值得完整继承因为它解释了 Angular Query 在整个 TanStack Query 生态中的价值主张绝大多数核心 Web 框架并不自带一种有主见的、整体性的数据获取与更新方式。开发者因此不得不二选一要么依赖封装了严格数据获取观点的元框架meta-framework要么自己发明数据获取方式——通常意味着拼凑组件级状态与副作用或用更通用的状态管理库来存储和提供异步数据。而传统状态管理库虽然擅长处理客户端状态client state但在处理异步或服务端状态时并不那么称手。核心原因在于服务端状态本质上是完全不同的具体表现为持久化在远程位置可能不受你控制或所有需要异步 API 来获取和更新意味着共享所有权可能在你的不知情下被他人修改如果不加小心在你的应用中可能悄悄过期。理解服务端状态的特性之后更多挑战会随之而来缓存……也许是编程中最难的事情之一将同一数据的多个请求去重dedupe为单个请求在后台更新过期数据判断数据何时过期尽可能快地反映数据更新分页、懒加载等性能优化服务端状态的内存管理与垃圾回收通过结构化共享structural sharing对查询结果进行记忆化。官方文档的结论是TanStack Query 是管理服务端状态的一流库开箱即用、零配置即可运行并且可以随应用增长按需定制。具体而言它通常会帮你移除大量复杂且易被误解的代码替换为寥寥数行 Angular Query 逻辑让应用更易维护新增功能时不必为接入新的服务端数据源而担忧通过让应用更快、响应更灵敏直接影响终端用户体验可能节省带宽并提升内存性能表现。最小可用示例injectQuery 拉取 GitHub 数据Overview 文档给出的第一个代码示例展示了 TanStack Query 在 Angular 中最基本、最简洁的形态——获取 TanStack Query 项目自身的 GitHub 统计信息。该示例在仓库中对应 examples/angular/simple 示例项目可以直接查看其完整可运行结构。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, 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.getResponse(https://api.github.com/repos/tanstack/query), ), })) } interface Response { name: string description: string subscribers_count: number stargazers_count: number forks_count: number }这个示例虽然短小但包含 Angular Query 的全部核心要点injectQuery是核心入口它接受一个返回查询选项的函数() ({ queryKey, queryFn, ... })返回的query对象上的data()、isPending()、error()等成员都是Signal可以直接在模板中调用——这正是 Overview 强调的1st-class API一等 API的含义无需订阅、无需async管道模板里就是响应式的。与 Angular HttpClient 的自然配合queryFn中通过inject(HttpClient)拿到原生HttpClient用lastValueFrom把 Observable 转回 Promise。仓库中 docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md 专门讨论了 Angular HttpClient 与其他数据获取客户端的衔接方式可进一步深入。queryKey: [repoData]查询的唯一标识TanStack Query 用它做缓存存取与请求去重。状态三态表达isPending()加载中、error()错误、data()数据配合 Angular 17 的if控制流实现条件渲染。从源码看 API 面injectQuery 的响应式上下文Overview 文档中的示例只是冰山一角。从 packages/angular-query-experimental/src/index.ts 的导出清单可以确认该包提供的完整 Angular 注入式 API 面API作用injectQuery注入一个查询声明式依赖一个与唯一 key 绑定的异步数据源injectInfiniteQuery注入无限滚动/分页类查询injectMutation注入变更mutation用于写操作injectMutationState监听 mutation 的状态injectQueries一次注入多个查询injectIsFetching/injectIsMutating监听全局是否有请求/变更正在进行injectIsRestoring配合持久化客户端监听状态恢复过程injectQueryClient注入QueryClient实例本身provideTanStackQuery/provideQueryClient应用级 Provider 配置queryOptions/mutationOptions/infiniteQueryOptions类型安全的选项工厂函数此外该包在 index.ts 顶部还有一行export * from tanstack/query-core即QueryClient、QueryKey等核心类型与类直接从本包透传导出业务代码无需再单独安装query-core。关于injectQuery的响应式语义packages/angular-query-experimental/src/inject-query.ts 中的源码注释给出了关键说明类似 Angular 的computed传给injectQuery的函数会在响应式上下文中运行。源码注释中附带了一个依赖 Signal 的例子class ServiceOrComponent { filter signal() todosQuery injectQuery(() ({ queryKey: [todos, this.filter()], queryFn: () fetchTodos(this.filter()), // Signals 可以与表达式组合 enabled: !!this.filter(), })) }这意味着当filter信号从假值变为真值时查询会自动启用并执行当它变回假值时查询会自动禁用。queryKey中读取的信号变化也会触发查询 key 的重算——这是 Angular Query 相对命令式 API 的最大差异点之一。若你想了解更多 zoneless无 Zone.js场景下的行为可参阅 docs/framework/angular/zoneless.md。接入应用安装与 Provider 配置Overview 的收尾指引读者前往 安装指南 与 API 参考文档。安装部分很简单Angular Query 兼容 Angular v16任选一种包管理器npm i tanstack/angular-query-experimental # 或 pnpm add tanstack/angular-query-experimental # 或 yarn add tanstack/angular-query-experimental # 或 bun add tanstack/angular-query-experimental安装之后应用启动时需要提供QueryClient。这部分在 packages/angular-query-experimental/src/providers.ts 中有完整实现provideTanStackQuery支持多种用法Standalone 启动推荐写法import { provideTanStackQuery, QueryClient, } from tanstack/angular-query-experimental bootstrapApplication(AppComponent, { providers: [provideTanStackQuery(new QueryClient())], })NgModule 风格NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [provideTanStackQuery(new QueryClient())], bootstrap: [AppComponent], }) export class AppModule {}启用 Devtools传入withDevtools()特性函数默认仅在开发模式下加载开发者工具对应仓库中的 docs/framework/angular/devtools.mdproviders: [ provideTanStackQuery(new QueryClient(), withDevtools()), ]使用 InjectionToken 的高级优化可以传入一个提供QueryClient的InjectionToken而非实例本身这样 TanStack Query 可以不进入主应用 bundle仅在懒加载路由中存在。源码注释明确说明这是面向只需在懒加载路由中包含 TanStack Query、但仍共享QueryClient的场景的优化手段对大多数应用而言在主配置中直接提供实例即可export const MY_QUERY_CLIENT new InjectionTokenQueryClient(, { factory: () new QueryClient(), }) // 在懒加载路由或懒加载组件的 providers 中 providers: [provideTanStackQuery(MY_QUERY_CLIENT)]从源码结构看providers.ts 中的provideQueryClient负责底层生命周期工厂函数在创建QueryClient时会注册DestroyRef.onDestroy(() client.unmount())并在构造后立即client.mount()——即客户端的生命周期与 Angular 注入器绑定容器销毁时自动卸载这一点从源码可以确认是防止内存泄漏的关键细节。另外provideAngularQuery作为旧名已被标记为deprecated统一迁移到provideTanStackQuery。深入学习路径按 Overview 文档的指引建议的学习路径为通过 docs/framework/angular/installation.md 完成安装其中也提示可先浏览 simple / basic 示例试玩通过 docs/framework/angular/quick-start.md 走一遍快速上手通过 docs/framework/angular/reference/ 目录下的 API 参考如injectQuery函数参考查阅各注入函数的完整签名与选项运行仓库中的 Angular 示例集合examples/angular/ 下覆盖 basic、simple、pagination、optimistic-updates、infinite-query-with-max-pages、rxjs、router 等场景每个示例均为独立的 Angular 应用可直接对照本文的 Overview 主题理解各特性。需要再次强调的前提由于该库仍处于实验阶段生产使用时请务必按文档要求锁定 patch 级版本并关注 minor/patch 版本中可能出现的破坏性变更。【免费下载链接】query Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.项目地址: https://gitcode.com/GitHub_Trending/qu/query创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考