Migrate from TanStack Query 3 to React query 4

This pattern migrates from React Query v3 to React Query v4. It is the equivalent of the codemod.

Apply with the Grit CLI

grit apply migrating_from_react_query_3_to_react_query_4

TanStack query 3 --> React query 4

BEFORE

import { useQuery } from 'react-query'
import { ReactQueryDevtools } from 'react-query/devtools'
import { persistQueryClient } from 'react-query/persistQueryClient-experimental'
import { createWebStoragePersistor } from 'react-query/createWebStoragePersistor-experimental'
import { createAsyncStoragePersistor } from 'react-query/createAsyncStoragePersistor-experimental'
import { QueryClient, setLogger } from 'react-query'
import { dehydrate, hydrate, useHydrate, Hydrate } from 'react-query/hydration'
import { QueryClientProvider } from 'react-query/react';


setLogger(customLogger)
const queryClient = new QueryClient();


useQuery('todos', fetchTodos)
useQuery('todos', fetchTodos, cacheParams)
useQueries([{ queryKey1, queryFn1, options1 }, { queryKey2, queryFn2, options2 }])

AFTER

import { useQuery } from "@tanstack/react-query"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
import { persistQueryClient } from "@tanstack/react-query-persist-client"
import { createWebStoragePersistor } from "@tanstack/query-sync-storage-persister"
import { createAsyncStoragePersistor } from "@tanstack/query-async-storage-persister"
import { QueryClient, setLogger } from "@tanstack/react-query"
import { dehydrate, hydrate, useHydrate, Hydrate } from "@tanstack/react-query"
import { QueryClientProvider } from "@tanstack/react-query/reactjs";


const queryClient = new QueryClient({logger: customLogger});


useQuery(['todos'], fetchTodos)
useQuery(['todos'], fetchTodos, cacheParams)
useQueries({queries: [{ queryKey1, queryFn1, options1 }, { queryKey2, queryFn2, options2 }]})