Integration to a big project and multiple providers approach

[MindTwisted]

Hello. I'm currently looking into integration of query library to a big React-based project.

As far as I understand, the official recommendation is to have single QueryClientProvider on the top level of the app to manage shared cache across all parts. This approach looks logical and has obvious benefits but I'm afraid cache-management would be difficult to maintain without risks of errors like duplicated keys. I have heard about approaches to have single query keys factory but they also have own drawbacks and again in the really big project it might be tricky to align everyone to use the same approach here.

From what I see as a solution is to use multiple QueryClientProvider instances to allow every domain team to control their level of responsibility. This also looks like a great way to start in terms of changes isolation. I understand that this will limit cache only to the closest provider but I think this won't be an issue for us.

I'm interested in hearing other folks opinion on this approach. Have someone tried a similar approach? Have you heard about any bugs that can arise from such usage of this library? Especially, I'm curious if it won't be an issue when one provider renders within other providers subtree.