T
TanStack•8mo ago
harsh-harlequin

Running two version of react-query in the same codebase

Hi everyone, I am planning to migrate react-query@3 to @tanstack/react-query@5 in a big codebase. I wanted to know if I could run both versions, to achieve a smooth & iterative migration. I have in mind the problem of bundle size, I only want to know if there is technical limitations (like contexts conficts) to achieve it like this. Thank you!
3 Replies
fascinating-indigo
fascinating-indigo•8mo ago
You could alias the package but then I think you run into issues with the query client providers overwriting each other I'd do a migration to 4 first then 5 How many times is useQuery called in this codebase?
mere-teal
mere-teal•8mo ago
The QueryClientProvider very likely wouldn't find the right queryClient since it just looks for the closest context. You could manually pass the new v5 queryClient into each hook, then clean it up later when you can drop v3. 
import { useQuery } from '@tanstack/react-query'
import { queryClient } from 'your-app'
...

const { data } = useQuery({
  queryKey: [...],
  queryFn: ...,
}, queryClient)
import { useQuery } from '@tanstack/react-query'
import { queryClient } from 'your-app'
...

const { data } = useQuery({
  queryKey: [...],
  queryFn: ...,
}, queryClient)
Well, I did a quick test with the Simple example from the docs and it seems like it "just works". I didn't even need to tell it which queryClient I expected it to use, they found them on their own. I did it in reverse since the example was for v5, but I effectively have: 
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query'
import {
  QueryClient as QueryClientv3,
  QueryClientProvider as QueryClientProviderv3,
  useQuery as useQueryv3,
} from 'react-query';

const queryClient = new QueryClient();
const queryClientv3 = new QueryClientv3();

export default function App() {
  return (
    <QueryClientProviderv3 client={queryClientv3}>
      <QueryClientProvider client={queryClient}>
        <ReactQueryDevtools />
        <Example />
        <Examplev3 />
      </QueryClientProvider>
    </QueryClientProviderv3>
  );
}
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query'
import {
  QueryClient as QueryClientv3,
  QueryClientProvider as QueryClientProviderv3,
  useQuery as useQueryv3,
} from 'react-query';

const queryClient = new QueryClient();
const queryClientv3 = new QueryClientv3();

export default function App() {
  return (
    <QueryClientProviderv3 client={queryClientv3}>
      <QueryClientProvider client={queryClient}>
        <ReactQueryDevtools />
        <Example />
        <Examplev3 />
      </QueryClientProvider>
    </QueryClientProviderv3>
  );
}
While this seems feasible, I personally would just upgrade to v5 in one go. Make a feature branch and slowly plug away at it
harsh-harlequin
harsh-harlequinOP•8mo ago
Hi guys ! Thanks you for your response and the test. Actually I have 150 useQuery and 280 useMutation calls

Did you find this page helpful?