Allow injecting queryCache in hooks

[antonobergklarna]

Hi there!

We have a large app with 50 or so different teams working with and owning different features. Features contains both routes and in some cases components or services (data api) that is exposed and consumed by other features/teams. Its important for us that these features are isolated and can be loaded lazy. They also have different security requirements and we need to be able to flush state in individual features differently depending on auth levels etc. Features also need to be able to act on events from fetching life-cycles that are initiated from the specific feature.

We are evaluating react-query and in general it seams like a good fit however we would like to be able to have multiple query caches and inject them into the hooks. We can achieve a similar result by wrapping all hooks and prefixing query-keys with namespaces for features and security-zones and use the prefixes to route events to the correct feature but it would be easier if each feature can have its own cache.

Note that since we in some cases export methods and hooks that is consumed by other features / other routes we cant use the Provider as a way to use different caches.

Would it be possible to add a queryCache as an optional param to the hooks?

This might be related to this discussion;:
#1220

[TkDodo]

Note that since we in some cases export components or methods that is consumed by other features / other routes we can use the Provider as a way to use different caches.

I think you can just get the queryCache with useQueryCache. This is just react context, so it will look up the nearest ReactQueryCacheProvider. So you can just use a different provider for parts of the „app“. Can you explain why this is not sufficient?

[antonobergklarna]

We can work with prefix and if we rely on conventions it is ofc quite easy. However we are a lot of teams and history has shown that it is better if conventions can be enforced.
To enforce this prefix we could create a layer around react-query but intercepting all hooks and all queryCache methods will be some work - especially if we want to support the different ways of interacting with the hooks.

It might be recommended to use a single cache but as far as I know its not an as strong recommendation as for e.g. redux where they strongly advice against multiple stores. I believe that our use case is not that uncommon in larger apps and I think that allowing injecting the queryCache would open up a lot of opportunities when it comes to creating abstractions. Either internal or open source.

Also from browsing the code it looks like it should be fairly straight forward to implement.

[TkDodo]

Do you have a code example of what you have in mind?

FWIW, you can always export a created cache as well and access it anywhere or pass it as a prop to hooks.

[antonobergklarna]

Are you referring to a code example of how I think we need to wrap react-query or how we want to use react-query if its possible to inject the cache in the hooks? In that case no not at the moment but I can create an example if it helps the discussion.

To me it looks like I cant pass the cache as a prop to the hooks because its overwritten by the cache provided through context:
https://github.com/tannerlinsley/react-query/blob/master/src/core/config.ts#L115

[TkDodo]

To me it looks like I cant pass the cache as a prop to the hooks because its overwritten by the cache provided through context

Yes, it won’t work automatically. I’m still struggling to understand what you want to do, sorry. That’s why i think an example would help. Do you need the queries of feature A to use options of the cache from feature B? Or read/write to that cache? Or something else entirely?

[antonobergklarna]

Sorry for the silence. I will come back with an example eventually. A lot to do now before xmas