Batching queryCache.setQueryData\

[cole-robertson]

Hello, what I am doing is prefetching a whole group of items with react-query. After I prefetch my data, I am setting each individual item also in my cache by the item's unique key. I am doing this so that when I go to an individual item's page, I can start fetching that particular item right away with a useQuery while all the items are loading the background. Also so that I can refetch just individual items and not refetching all the items every time a change is made.

In my function I am looping over all the items and then calling queryCache,setQueryCache(...) to set the cache with my now local data for each item. I then loop over part of the items to set a different queryCache. What I have noticed is that when I start prefetching a lot of these items, then my app starts to freeze up. Looking at the burn down chart, it seems like this is due to react-query's "dispatch" being called most likely to update my query cache.

Is there a way that I can wrap my setQueryCache calls in a batch so that there is only one dispatch call being made? Thank you for any and all help.

[boschni]

Although currently not documented, I think you should be able to do this:

import { notifyManager } from "react-query"

notifyManager.batch(() => {
  queryClient.setQueryData(...)
  queryClient.setQueryData(...)
})

[cole-robertson]

I'm on react-query v2.4.13 and I don't see the exported notifyManager. I can't go through the upgrade right now. Is there another way to batch?

I'm also using redux in this project and they reexport react's unstable batch function. I may give that a go next, I was just seeing if there was native support in react-query.

Thanks for the reply!

[cole-robertson]

Here is my burn down chart using that react "batch". UI is most definitely being blocked during this time.

[cole-robertson]

Code is like:

import { batch } from "react-redux";
// ...
batch(() => queryDataToSet.forEach((item) => queryCache.setQueryData(item.key, item.data)))

[cole-robertson]

@tannerlinsley any ideas?

[cole-robertson]

Bumping. @tannerlinsley I would love to use this method in production, but the UI blocking is too much right now. Please let me know if you have any suggestions. Thank you

[TkDodo]

can you create a codesandbox that reproduces the issue?

Additionally, please try with notifyManager.batch in v3. I am not sure if this is really the same as unstable_batchedUpdates.

Hello, what I am doing is prefetching a whole group of items with react-query. After I prefetch my data, I am setting each individual item also in my cache by the item's unique key.

Sorry if I'm interpreting this wrong, but If I'm reading this right, you are prefetching one query (say, a list of todos?) and then fill the cache for each single item when you get the data.
If that's the case, I might have another idea: Instead of eagerly filling the cache for each item after prefetching, how about only filling the one you are prefetching, and then populating the single items once you "get there" via initialData. There's a good example in the docs on how to use initialData to prefill a "details key" with data from a "list" key, see: https://react-query.tanstack.com/guides/initial-query-data#initial-data-from-cache

[cole-robertson]

That's a good point and actually the avenue I am taking as of now! You are correct, in my current case I can just set initialData of the useQuery calls. I will be updating to V3 soon and I will revisit the idea of using the notifyManager.batch seeing if that works differently under the hood.

Thank you for the response!