Query/page Update following mutation
I have a component that uses injectQuery to fetch some data. I assign the .data() part to a computed signal.
This component has a child component (which contains a form) which accepts an input signal - assigned to the results variable using [param]='results()'
When I update the value of the form and save the data in the parent component, I invalidate the query but my form does not update - it reverts to the old data.
I can see in DevTools Network and Tanstack Devtool that the query was refetched and has the correct data. How do I make the page show the correct data??
7 Replies
underlying-yellow•8mo ago
Why don’t you just pass query.data() to the child, is there any reason that you just don’t do that instead of adding an abstraction layer with the computed signal?
Do the new data are different than the previous ones? If I’m not mistaken, Angular query uses structural sharing to avoid re-rendering, so if the data are the same structurally, the data signal isn’t updated.
sensitive-blueOP•8mo ago
I'll take a look. I am also using NgRX SignalStore for storing component level data rather than passing lots of data around between components/sub-components. I am wondering if it is possible to store the query in the store instead of each component.
underlying-yellow•8mo ago
Mhh, I don’t really know NgRX SignalStore so I don’t know. Personally, I define my queries in the components and I define the options in services dedicated to that.
protestant-coral•8mo ago
At my current project I just return
computeds with queryOptions from Signal Store. The functions for the queryOptions are simple methods on an Angular service.
And this is also a good approach, just pass signals from signal store to the query. In any case when using both TanStack Query and Signal Store, avoid syncing the query data to Signal Store. It would complicate code a lot and syncing server state to client state would remove a lot of benefits gained from TanStack Query.underlying-yellow•8mo ago
I must say I do update manually the queries cache after I perform mutations. I do not invalidate queries. I prefer this approach since you get "instant updates" and this is more energy efficient since you don’t have to perform extra queries after performing a mutation but it does complicate the code for sure.
I usually have 3 services that works together, a service which performs the http requests, a service which updates the cache of queries and a service which store the queries options. Those 3 are then "duplicated" for each different usage that I need.
protestant-coral•8mo ago
I must say I do update manually the queries cache after I perform mutations. I do not invalidate queries. I prefer this approach since you get "instant updatesPerfectly valid approach too
sensitive-blueOP•8mo ago
@arnoud I think I am on the right track but would appreciate a small code snippet that illustrates your point and also shows how you are using mutations with your store.