React Query 在 Angular 中初始化查询时的生命周期注意事项

在使用 React Query 的 Angular 适配器时，开发者可能会遇到一个关于查询初始化的常见陷阱。当我们在组件的 ngOnInit 生命周期钩子中尝试重新获取(refetch)一个初始禁用(enabled: false)的查询时，会发现查询状态信号(isFetching 和 isLoading)表现异常。

问题现象

具体表现为：

1. 调用 refetch() 后，isFetching 和 isLoading 信号值仍保持为 false
2. 只有在查询重试时，这些状态信号才会更新为 true
3. 如果查询出错，下次调用 refetch() 时错误不会被重置

根本原因

这种现象源于 Angular 组件的生命周期与 React Query 内部工作机制的时序问题。在 ngOnInit 阶段调用 refetch 时，查询的 effect 尚未执行完成。React Query 的 Angular 适配器有意将 observer 的订阅设为异步操作，这是为了无缝支持在查询选项中使用 input.required() 信号，而不必担心组件生命周期时序问题。

现代 Angular 的最佳实践

在现代 Angular 开发中，我们应当采用更声明式的方式来处理这类场景：

1. 使用信号控制查询启用状态：通过信号动态设置 enabled 选项，而不是在生命周期钩子中手动调用 refetch
2. 避免使用 ngOnInit：现代 Angular 推荐使用响应式编程模式，生命周期钩子已不再是必需

替代解决方案

如果确实需要命令式地触发查询，可以考虑以下替代方案：

// 方案1：使用 afterNextRender
constructor() {
  afterNextRender(() => {
    this.query.refetch();
  });
}

// 方案2：使用 effect
refetchEffect = effect(() => {
  this.query.refetch();
});

总结

理解 React Query 在 Angular 中的工作方式对于构建健壮的应用程序至关重要。通过采用声明式的查询控制方式，可以避免许多与生命周期相关的边缘情况。开发者应当充分利用 Angular 的响应式特性，让 React Query 自动处理数据获取和状态管理，而不是尝试手动控制这些过程。

这种模式不仅解决了初始化问题，还能使代码更加简洁、易于维护，并与其他 Angular 响应式特性更好地集成。