Dynamic Data Fetching Challenges with Vue and Sockets
1. I've implemented a socket listener for when a new alert is received. Once I get a new alert, I update the alertId ref and expect the associated query (i.e., useGetAlert) to fetch the data based on this updated alertId.
However, it seems that the only way I'm able to see the updated data is by setting up a watch on the isSuccess ref from the useGetAlert function. Without this watcher, it appears as though the new data isn't fetched or updated.
Question 1:
Is there a more direct or recommended way to fetch and update the data without relying on a watch when the alertId ref updates?
----------------------------------------------------------------------------------------------------
2.I've added the enabled configuration with the intention to only run the query when alertId has a truthy value. However, it seems that this configuration isn't behaving as expected.
Question 2:
How can I properly configure the query to remain disabled when there's no alertId value, and only run when there is a valid alertId? The current setup doesn't seem to be working as intended.
@MrMentor
7 Replies
unwilling-turquoiseOP•2y ago
i ended up using computed, is it the right way?
flat-fuchsia•2y ago
Yeah, you need to pass reactive value for any prop that will change over time.
unwilling-turquoiseOP•2y ago
And what about the watch on the socket?
unwilling-turquoiseOP•2y ago
@MrMentor, im trying to implement socket with vueQuery,
i want to fetch historic alerts and when the app is mounted to open a socket connection and when there are new alert coming from socket to update the alerts query,
i cant do it because the alerts is readonly as it said,
maybe i should do useMutation?
i really lost on this, sending you screenshots, please answer.
flat-fuchsia•2y ago
Well alerts returned from vue-query is already a ref, so no need to wrap it the second time.
To make sockets work you can can do two approaches:
- query invalidating for
all alerts query if you have such endpoint
- optimistic update ex queryClient.setQueryData(['todos', newTodo.id], newTodo)
Do not mutate stuff returned from vue-query as it marked as readonly to prevent users from mutating it.flat-fuchsia•2y ago
This might be helpful read while taking into account that vue might work slightly different.
https://tkdodo.eu/blog/using-web-sockets-with-react-query
Using WebSockets with React Query
A step-by-step guide on how to make real-time notifications work with react-query
unwilling-turquoiseOP•2y ago
@MrMentor, where should I use the queryClient.setQueryData because I already tried this approach
And from I read on your documentation it’s for updating cache data.
I’m a bit lost here.
Also the watch I did when a new-alert coming from the socket, also don’t seem like the best practice, but I couldn’t access the data otherwise.