Can I use both v3 and v4 react-query providers in parallel?

[yilinsim]

Hi all, I'm currently in the process of migrating from react-query v3 to v4 and am considering migrating a few packages at a time.

For example, if package A depends on package B and package C but only package C is being migrated to v4...

Package A
|-- Package B
     |-- react-query v3
|-- Package C
     |-- @tanstack/react-query v4

...this means that the top-level package A needs to have both the v3 and v4 query client providers. Package C can then use the cache provided by the v4 provider while package B uses the cache provided by the v3 provider.

import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import { QueryClientProvider as QueryClientProviderV3, QueryClient as QueryClientV3 } from 'react-query';

<QueryClientProvider client={new QueryClient()}>
    <QueryClientProviderV3 client={new QueryClientV3()}>
        <Component />
    </QueryClientProviderV3>
</QueryClientProvider>

Is this possible or are there any potential issues with this that I'm overlooking?

[TkDodo]

sure, they are completely different contexts. However, they can't share queries.

[yilinsim]

That makes sense. Thank you!! 😄