Multiple QueryClientProvider

[KamilSlaweta]

Hi, I have a question about having many QueryClientProvider within the app. Let's suppose, we have the provider:

const queryClient = new QueryClient(...some options);

const QueryClientProvider = ({ children }) => {
  return (
    <BaseQueryClientProvider client={queryClient}>
      {children}
    </BaseQueryClientProvider>
  );
};

and it is being used like:

const App = () => {
  return (
    <QueryClientProvider>
       <Switch> 
           <Route path="/some_path_1" component={Component1} />
           <Route path="/some_path_2" component={Component2} />
       </Switch>
    </QueryClientProvider>
  );
};

const Component1 = () => {
  return (
     <QueryClientProvider>
        ...some components 
    </QueryClientProvider>
   );
};

const Component2 = () => {
  return (
     <QueryClientProvider>
        ...some components 
    </QueryClientProvider>
   );
};

We have got some legacy code and have been slowly migrating to react query. I am wondering if such structure could bring us some issues. Any ideas?

[TkDodo]

the client holds the cache, so if you do this, the components in those sub-trees will have an isolated cache, no deduplication with other trees etc. The devtools also can only display for one cache.