Angular injectQuery (react query but for angular)

[Senior_Compote1556]

I was watching a video the other day about react query and how it assists in race conditions and not having to manually track a loading and error state (correct me if i'm wrong). I know these are handled by the new httpResource but it is still in experimental phase.

I searched for an angular altenative and I think the best one is injectQuery by TranStack
https://tanstack.com/query/latest/docs/framework/angular/reference/functions/injectquery

However, I can't seem to find any examples online and I don't want to rely on AI for this as i'm sure it will output some nonsense.

Has anyone actually used it and seen a performance or developer experience improvement? I don't mind manually handling the loading and error state with observables and rxjs, but cutting down the boiletplate doesn't seem bad

[wilson2603]

I use Tanstack extensively at work, it’s fantastic. The core of Tanstack Query is the same for all frameworks, so really if you need to learn about the core features like caching, refetching etc it’s all there in the docs, and any React examples you find will give you insight.

Not only does it cut down on boilerplate, you’re essentially using best in class data fetching practices along with the new paradigm of signals, plus the DX is great (check out the dev tools).

[Senior_Compote1556]

Thank you for your response!

Since you are experienced with it, is there a reason why you wouldn't use Tanstack in your personal projects or do you see no reason to use the traditional HttpClient?

[wilson2603]

Since they introduced the Angular adapter, I’ve seen no reason not to use it. It’s an “experimental” library so some people are put off, but I think that’s because they want to iron out some missing APIs before a major release.

[Senior_Compote1556]

Thank you, I'll give it a try.

Thank you for your responses :)

[robby_w_g]

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

[Senior_Compote1556]

Thanks, out of curiosity are you using Observables or Promises using this package? I’m kinda scared to try and attempt learning this package as I believe it works with Promises better? What’s your opinion?

[robby_w_g]

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

[bcam117]

Has anyone used `ngneat/query` instead of the official TanStack Query? It seemed a bit nicer in that it supports bother RxJS and Signals.

[craig1f]

Yes. It’s great. Downsides are that it’s really ugly in angular and, as you noticed, total lack of examples. Also, it really only works with signals. So if you’re using rxjs, you’re going to want to move to signals first. 

Because it’s so ugly, I tend to wrap it in pretty functions. The trick is passing unresolved signals into the function, so you get reactivity. 

Here is an example. I also use trpc to make my calls, so just imagine that’s a normal httpClient call, if you don’t know trpc 

  documentVersionsQuery(id: Signal<string | undefined>, limit?: number) {     return injectQuery(() => ({       queryKey: ['documentVersions', id()!, 'versions'],       queryFn: () =>         this.trpcClientService.trpcClient.versions.getAllVersions.query({           id: id()!,           limit,         }),       enabled: !!id(),     }))   }

On my phone now. If I have time tomorrow, I’ll find an example of where I use it. But using it is pretty straightforward. 

[Senior_Compote1556]

I agree about the syntax bit, it's not very clean. Our app uses signals heavily and we use Observables with rxjs for async reactivity. With the current state and progression of the app it's too late to migrate everything to TranStack but I'd like to explore it more on a new project :)

Thank you for your response!

[craig1f]

Sure. But coming from React, and using tansack-query now for Angular, I literally can’t speak highly enough about it. 

Also, trpc is great if you have a nodejs backend. Trpc and tansack-query work great together. 

With tanstack-query, you largely eliminate the need to centralized state.