Multiple query client providers, or limit storage / broadcast pr queryKey

[tbowmo]

We are looking at the possibility of replacing our old redux based auth store with tanstack/query, some local storage persistence and perhaps broadcastQueryClient (even though it's experimental).

We would however like to limit the storage / broadcasting to only be the auth part, and thus have it in a separate provider scope, than the rest of the applications data.

So can we either limit storage / broadcasts to a specific set of queryKeys, or can we have two queryclient providers for our app? (One for auth, and one for the rest of the data)

We are using react btw.

[TkDodo]

So can we either limit storage / broadcasts to a specific set of queryKeys

Yes, storage has options for that. Not sure about broadcast

or can we have two queryclient providers for our app?

you can, but then you'd need to pass the queryClient specifically to each invocation of useQuery, or make your own abstraction:

const useAuthQuery = (opts) => {
  return useQuery(opts, authQueryClient)
}
const useNormalQuery = (opts) => {
  return useQuery(opts, normalQueryClient)
}

you can't use useQueryClient because that would just look up the nearest provider

[aaronshaf]

It'd be great to opt-in to broadcasting on a per-query basis

[jeffshaver]

just found this feature but it would be great if we could limit the query keys that got synced with a callback or something. i.e we have some data that is meant to be per-tab, but most of the data is ok to be synced cross tab.