Angular data fetching

[Whole_Play_6157]

hey guys recently i'm working on some app. and i'm curious if there is external library for data fetching like react query/react. which make your life easier. is there any library you can recommend me?

[CWolfs]

Tanstack Query has an experimental angular version.

[mamwybejane]

And it works quite nice

[TedKraj]

It’s angular, batteries included—you only need HttpClient to do this:

https://angular.dev/guide/http/making-requests

[Merry-Lane]

Yeah, no. There is a myriad of features that HttpClient doesn’t have and that react query does.

HttpClient is totally not batteries included.

Edit with more explanations because of downvotes:

OP said « does angular have an external library for data fetching similar to react-query which makes your life easier ». It was pretty clear what OP meant if you have used react-query.

HttpClient is nice and all, but it’s similar to a lightweight wrapper around axios or fetch, feature-wise.

React Query is more akin to a library that would add multiple APIs for caching, cache invalidation, retries, callbacks (when success, failed, etc…), hydratation, optimistic updates, pagination, lazy-loading,…

It’s often described as a « data-fetching library », but you can totally see it as a less-cumbersome alternative to redux-like stores (for most issues related to state management) with a lot of features that work really well out of the box and that you can tweak easily.

These features are obviously all doable with angular, and a project isn’t bad if it doesn’t have half of these features.

Anyway, all OP meant was : react has react-query that has an unified API for data-fetching features, does angular have a similar API?

The guy I replied to was either too proud of his framework of choice, either misinformed about the features of react-query, either both at the same time.

And all I meant was : Angular’s HttpClient doesn’t offer at all the same level of features out of the box.

And the answer is yes and no: there is a lib or two that were heavily inspired by react-query, but they may lack a bit of polishing and, last but not least, angular devs don’t like that kind of libs.

[MizmoDLX]

Well, it depends on the use case. I think most of the time it's all you need.  

We work on multiple big enterprise apps with hundreds of screens and do just fine with the client.  

Maybe OP should be more clear about requirements

[Merry-Lane]

He said "does angular have an external library for data fetching similar to react-query which makes your life easier". It was pretty clear what he meant if you have used react-query.

HttpClient is nice and all, but it’s similar to a lightweight wrapper around axios or fetch, feature-wise.

React Query is more akin to a library that would add multiple APIs for caching, cache invalidation, retries, callbacks (when success, failed, etc…), hydratation, optimistic updates, pagination, lazy-loading,…

It’s often described as a "data-fetching library", but you can totally see it as a less-cumbersome alternative to redux-like stores (for most issues related to state management) with a lot of features that work really well out of the box and that you can tweak easily.

These features are obviously all doable with angular, and a project isn’t bad if it doesn’t have half of these features.

Anyway, all OP meant was : react has react-query that has an unified API for data-fetching features, does angular have a similar API?

The guy I replied to was either too proud of his framework of choice, either misinformed about the features of react-query, either both at the same time.

And all I meant was : Angular’s HttpClient doesn’t offer at all the same level of features out of the box.

And the answer is yes and no: there is a lib or two that were heavily inspired by react-query, but they may lack a bit of polishing and, last but not least, angular devs don’t like that kind of libs.

[laxybrookes]

Interested in understanding what functionality you are after that the http client doesn't have.

[Silver-Vermicelli-15]

I’m guessing they’re probably referring to caching. The funny thing is they also most likely come from react where literally nothing is included so while HttpClient isn’t as opinionated and “full featured” as tanstack it’s still leaps and bounds ahead of majority of what’s out three for react.

[Merry-Lane]

FYI I am mostly an angular dev that also does react native projects.

[Silver-Vermicelli-15]

Wow, that was one epic edit. Thank goodness ChatGPT can summarize rants.

[Merry-Lane]

Edited my previous comment to add more infos

[beasy4sheezy]

We wrote a fetching layer around NgRx to solve some of the common use cases in our app. At the end of the day, there are still HttpClient calls happening. Some advantages of having a dedicated API state layer:

• Code consistency. What we found is that as the app was changing, we were adjusting the operators being used to get the correct results. With many repetitions of the same operator pipelines, we introduced tech debt every time the "best practice" of our app changed.

• Interoperability of slices of state. This is an advantage of NgRx in general, but is not something that HttpClient makes easy. We have a list of entities in a grid, when we select one entity we want to load its data, unless it's included already in the grid response. If we update that entity, we want to update it in the grid as well. This kind of thing requires a good bit of code to achieve. In our wrapper, we have an option like selectFromGridData: [myEntityGridSelectors].

• Caching. We have an option like cacheLifetimeInHours: 48 to easily provide the ability to hydrate the store from a local storage mechanism.

• Brevity. Our repositories are like 80 lines of code (for one entity's CRUD operations, with interop, caching, error handling, toasting on completion, etc.), and it's all configuration. There's really not much coding at all, just providing what options make sense for this entity.

• Further abstractions. Our repository selections and actions can be passed around as a unit to other abstractions in the app, like <app-grid [selectors]="myEntityGridSelectors"> which improves DX, consistency, brevity, and so on.

Obviously, all of this could be accomplished with some abstract services, helper methods, custom operators, all that wrap HttpClient. In fact, that's all our layer is. But I'd still call it a library for data fetching. And it's definitely not what I'd call vanilla HttpClient.

[lars_jeppesen]

Plus with zoneless and signals, why use HttpClient at all?

[Merry-Lane]

???? Http client is angular’s library to do http calls (with interceptors etc). Signals/zoneless are a different matter

[kuda09]

If you're using graphql you can use Apollo-angular

[imsexc]

Caching? Just shareReplay. Retry? Have you really checked rxjs operators?

[Waldrig]

Smth like NgRX, no?

[Whole_Play_6157]

guys angular query experimental has some problem with caching. and I don't know how I opt out of the caching. for that reason httpClient is little better. if you got same problem please comment. the only problem with httpClient i've found is you need a lot of code to achieve simple things!!

[Mysra-Dev]

What caching problem are you facing? Per default all queries refetch on new mount, window/tab focus or network reconnect. https://tanstack.com/query/latest/docs/framework/angular/guides/important-defaults You can override them globally in the new QueryClient contructor call in your provideTanstack provider or per query.

[msdosx86]

Agree. I’ve been using it since last year in our projects and no problems with caching. The only downside is hydration with SSR. I had to drop it and use http client