Optimal data transformations without effecting query cache?
What is the vue alternative to useMemo described in https://tkdodo.eu/blog/react-query-data-transformations. computed does not allow specifying dependencies. I am thinking a watch could be used to implement the example in the blog post, by watching the length of the returned data but im not sure if theres a best practice for this thats different.
Generally I modifying the query cache if the modification is inherent to the data itself but if I need to make a modification for a one off use case or for a section of my app I can use a wrapper function or what the blog post calls a 'render function' that modifies the query data as needed and returns it or stores it in a pinia store.
6 Replies
quickest-silver•2y ago
You should use
select as it's already optimized.
select works on a observer level and would not modify you cached values.
You could use computed as it automatically detects dependencies, but I still think select is a better option.
Why would you want to sync with pinia?
If you need to share it in multiple places, why not write a composable that uses base query + has select implemented?rare-sapphireOP•2y ago
Why didn’t you use select in that example?
quickest-silver•2y ago
In what example?
If you are talking about the blog post, there is a whole section about
select https://tkdodo.eu/blog/react-query-data-transformations#3-using-the-select-option
Additionally since vue runs setup only once, you do not have to care about stable function reference, you can inline it.React Query Data Transformations
Learn the possibilities to perform the quite common and important task of transforming your data with react-query
rare-sapphireOP•2y ago
I’m referring to the examples here where you use usememo. I dont see the use case of usememo over using select https://tkdodo.eu/blog/react-query-data-transformations
And the advantage of pinia over select is that select doesn’t get added to the query cache but pinia can serve as a cache if cache is desired but modifying the core queryFn isn’t desired. This would be in my codebase when we want to combine the data returned from an endpoint with some other data from another endpoint
React Query Data Transformations
Learn the possibilities to perform the quite common and important task of transforming your data with react-query
rare-sapphireOP•2y ago
@MrMentor ^
quickest-silver•2y ago
That blog post is not written by me and it's for React.
Vue has slightly different behavior.
I still do not see a reason for syncing with
pinia.
select will run only when underlying data assigned to queryKey change. So it's already optimized to not run too frequently.
If you need to combine result of multiple queries to one result, v5 has combine prop on useQueries hook.
If you are afraid that select evaluation will be too heavy, syncing with pinia makes it even worse. Cause you are basically writing less optimized select in userland that needs to run trough additional state manager to reach the screen.
Not mentioning potential staleness bugs.