code mod for breaking syntax changes

[TkDodo]

useQuery, useInfiniteQuery, queryClient.fetchQuery, queryClient.prefetchQuery, queryClient.fetchInfiniteQuery, queryClient.prefetchInfiniteQuery, useInfiniteQuery

input:
  useQuery('todos', fetchTodos)
output:
  useQuery(['todos'], fetchTodos)

input:
  useQuery(['todos'], fetchTodos, { staleTime: 1000 })
output:
  useQuery(['todos'], fetchTodos, { staleTime: 1000 })

input:
  useQuery(['todos'], { queryFn: fetchTodos, staleTime: 1000 })
output:
  useQuery(['todos'], { queryFn: fetchTodos, staleTime: 1000 })

input:
  useQuery('todos', { queryKey: ['notTodos'], queryFn: fetchTodos, staleTime: 1000 })
output:
  useQuery(['todos'], { queryKey: ['notTodos'], queryFn: fetchTodos, staleTime: 1000 })

input:
  useQuery({ queryKey: 'todos', staleTime: 1000 })
output:
  useQuery({ queryKey: ['todos'], staleTime: 1000 })
  
input:
  const key = 'todos'
  useQuery(key, { queryFn: fetchTodos, staleTime: 1000 })
output:
  useQuery({ queryKey: [key], queryFn: fetchTodos, staleTime: 1000 })

input:
  const queryKey = 'todos'
  useQuery({ queryKey, queryFn: fetchTodos, staleTime: 1000 })
output:
  useQuery({ queryKey: [queryKey], queryFn: fetchTodos, staleTime: 1000 })
  
input:
  const key = ['todos']
  useQuery(key, { queryFn: fetchTodos, staleTime: 1000 })
output:
  useQuery(key, { queryFn: fetchTodos, staleTime: 1000 })

input:
  const queryKey = ['todos']
  useQuery({ queryKey, queryFn: fetchTodos, staleTime: 1000 })
output:
  useQuery({ queryKey, queryFn: fetchTodos, staleTime: 1000 })

input:
  const queryKey = createKey()
  useQuery({ queryKey, queryFn: fetchTodos, staleTime: 1000 })
output:
  useQuery({ queryKey, queryFn: fetchTodos, staleTime: 1000 })

input:
  import { useQuery as useReactQuery } from 'react-query'
  const useQuery = (key, fn, options) => useReactQuery(key, fn, { ...options, staleTime: 1000 })
  useQuery('todos', fetchTodos, {})
output:
  import { useQuery as useReactQuery } from 'react-query'
  const useQuery = (key, fn, options) => useReactQuery(key, fn, { ...options, staleTime: 1000 })
  useQuery(['todos'], fetchTodos, {})

input:
  import * as RQ from 'react-query'
  const useQuery = (key, fn, options) => RQ.useQuery(key, fn, { ...options, staleTime: 1000 })
  useQuery('todos', fetchTodos, {})
output:
  import * as RQ from 'react-query'
  const useQuery = (key, fn, options) => RQ.useQuery(key, fn, { ...options, staleTime: 1000 })
  useQuery(['todos'], fetchTodos, {})

queryClient.invalidateQueries, queryClient.refetchQueries, queryClient.resetQueries, queryClient.removeQueries, queryClient.cancelQueries

input:
  const queryClient = useQueryClient()
  queryClient.invalidateQueries('todos')
output:
  const queryClient = useQueryClient()
  queryClient.invalidateQueries(['todos'])

input:
  const queryClient = useQueryClient()
  queryClient.invalidateQueries('todos', { exact: true })
output:
  const queryClient = useQueryClient()
  queryClient.invalidateQueries(['todos'], { exact: true })

input:
  const queryClient = useQueryClient()
  queryClient.invalidateQueries(['todos'], { exact: true }, options)
output:
  const queryClient = useQueryClient()
  queryClient.invalidateQueries(['todos'], { exact: true }, options)

input:
  useQueryClient().invalidateQueries({ queryKey: 'todos', exact: true })
output:
  useQueryClient().invalidateQueries({ queryKey: ['todos'], exact: true })

input:
  useQueryClient().invalidateQueries({ queryKey: ['todos'], exact: true })
output:
  useQueryClient().invalidateQueries({ queryKey: ['todos'], exact: true })

input:
  const queryKey = 'todos'
  useQueryClient().invalidateQueries({ queryKey, exact: true })
output:
  useQueryClient().invalidateQueries({ queryKey: [queryKey], exact: true })

input:
  const queryKey = ['todos']
  useQueryClient().invalidateQueries({ queryKey, exact: true })
output:
  useQueryClient().invalidateQueries({ queryKey, exact: true })

queryClient.getQueryData, queryClient.getQueryState, queryCache.find, queryClient.getQueriesData, queryClient.isFetching, useIsFetching, useIsMutating, queryCache.findAll, queryClient.setQueriesData

input:
  const queryClient = useQueryClient()
  queryClient.getQueryData('key', { exact: true })
output:
  const queryClient = useQueryClient()
  queryClient.getQueryData(['key'], { exact: true })

input:
  const queryClient = useQueryClient()
  queryClient.getQueryData(['key'], { exact: true })
output:
  const queryClient = useQueryClient()
  queryClient.getQueryData(['key'], { exact: true })

queryClient.setQueryData, queryClient.setMutationDefaults, queryClient.getMutationDefaults, queryClient.setQueryDefaults, queryClient.getQueryDefaults

- fn(key, updater, options)
+ fn([key], updater, options)

useMutation

same as useQuery, except that queryKey is mutationKey

useQueries

An easy one because useQueries only gets an array passed, which should become an object. Nothing within query1 / query2 / query3 needs to change.

- useQueries([query1, query2, query3])
+ useQueries({ queries: [query1, query2, query3])

after that, inside the queries object, we need to change queryKey to be an array, like for useQuery with the object syntax.

[TkDodo]

@balazsmatepetro I've added some examples for useQuery. I will add more for the other methods a bit later. I hope I didn't make any syntax errors 😅

[balazsmatepetro]

Thank you so much, it helps a lot! :)

[TkDodo]

@balazsmatepetro how are things on the code mod? Do you need any help?

[balazsmatepetro]

@balazsmatepetro how are things on the code mod? Do you need any help?

Hi! I'm planning to open a PR at the end of this week. :)

[balazsmatepetro]

Task list

Write codemods for:

• useQuery hook
• useQueries hook
• useInfiniteQuery hook
• useIsFetching hook
• useIsMutating hook
• useMutation hook
• QueryCache methods
  • find
  • findAll
• QueryClient methods
  • Object syntax aware
    • cancelQueries
    • fetchInfiniteQuery
    • fetchQuery
    • invalidateQueries
    • prefetchInfiniteQuery
    • prefetchQuery
    • refetchQueries
    • removeQueries
    • resetQueries
  • Not object syntax aware
    • cancelQueries
    • getMutationDefaults
    • getQueriesData
    • getQueryData
    • getQueryDefaults
    • getQueryState
    • invalidateQueries
    • isFetching
    • refetchQueries
    • removeQueries
    • resetQueries
    • setMutationDefaults
    • setQueriesData
    • setQueryData
    • setQueryDefaults

Additional tasks:

• Add support for mutationKey in case of useMutation hook.
• Add support for template literals in case of query key.
• Try to combine ALL codemods into a single one.
• Move files under v4 directory.
• Reduce the number of repetitive test fixtures.

Things to address after our last sync with @TkDodo:

• Remove use_query directory, it's fine to have everything under the codemods/v4 directory.
• Add codemods to the bundle.
• Add usage instructions to the codemods.
• Do not remove typeArguments from the nodes (mostly generic types).
• Add file paths to the console warnings.
• Fix invalid usage of invalidateQueries method in playground example.
• Leave code untouched when the queryKey is already an array.

[tannerlinsley]

🎉 This issue has been resolved in version 4.0.0-alpha.13 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tannerlinsley]

🎉 This issue has been resolved in version 4.0.0-beta.1 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀