Sorting and filtering data only once.
I read @TkDodo 🔮 's blog on data transformations: https://tkdodo.eu/blog/react-query-data-transformations
I want to fetch and cache a large amount of data in a query. Then on the client I want to filter and sort it, so that each component can subscribe to only the subset of data it needs.
Filtering and sorting this data on the client can be expensive. For example, I might fetch 2 years of data, and a component might only need 1 week of that data.
In the worst case, if 100 components access the query, then that means I'll be filtering and sorting the data 100 times every time the query is invalidated. This is because my understanding is that the
select function runs per-instance.
One idea I had is to query the data and then sort it into some sort of binary tree, and make the same binary tree available to all components. When new data is received, the binary tree can be updated once, rather than 100 times.
Does anyone know how I could go about this, or whether there are any better options? Thanks!React Query Data Transformations
Learn the possibilities to perform the quite common and important task of transforming your data with react-query
1 Reply
optimistic-goldOP•3y ago
I read the comments and managed to figure this out. I'm using the
moize library which will globally cache the select function output. Works really well.