@tanstack/react-query 5.0.0-alpha.3 → 5.0.0-alpha.31

package/build/codemods/v4/__testfixtures__/named-import.output.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react'
+import {
+  QueryCache as RenamedQueryCache,
+  QueryClient as RenamedQueryClient,
+  useInfiniteQuery as useRenamedInfiniteQuery,
+  useIsFetching as useRenamedIsFetching,
+  useIsMutating as useRenamedIsMutating,
+  useMutation as useRenamedMutation,
+  useQueries as useRenamedQueries,
+  useQuery as useRenamedQuery,
+  useQueryClient as useRenamedQueryClient,
+} from 'react-query'
+
+export const Examples = () => {
+  useRenamedQuery(['todos'])
+  useRenamedInfiniteQuery(['todos'])
+  useRenamedMutation(['todos'])
+  useRenamedIsFetching(['todos'])
+  useRenamedIsMutating(['todos'])
+  useRenamedQueries({
+    queries: [query1, query2]
+  })
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useRenamedQueryClient()
+  queryClient.getMutationDefaults(['todos'])
+  queryClient.getQueriesData(['todos'])
+  queryClient.getQueryData(['todos'])
+  queryClient.getQueryDefaults(['todos'])
+  queryClient.getQueryState(['todos'])
+  queryClient.isFetching(['todos'])
+  queryClient.setMutationDefaults(['todos'], { mutationFn: async () => null })
+  queryClient.setQueriesData(['todos'], () => null)
+  queryClient.setQueryData(['todos'], () => null)
+  queryClient.setQueryDefaults(['todos'], { queryFn: async () => null })
+  queryClient.cancelQueries(['todos'])
+  queryClient.fetchInfiniteQuery(['todos'])
+  queryClient.fetchQuery(['todos'])
+  queryClient.invalidateQueries(['todos'])
+  queryClient.prefetchInfiniteQuery(['todos'])
+  queryClient.prefetchQuery(['todos'])
+  queryClient.refetchQueries(['todos'])
+  queryClient.removeQueries(['todos'])
+  queryClient.resetQueries(['todos'])
+  // --- Direct hook call.
+  useRenamedQueryClient().getMutationDefaults(['todos'])
+  useRenamedQueryClient().getQueriesData(['todos'])
+  useRenamedQueryClient().getQueryData(['todos'])
+  useRenamedQueryClient().getQueryDefaults(['todos'])
+  useRenamedQueryClient().getQueryState(['todos'])
+  useRenamedQueryClient().isFetching(['todos'])
+  useRenamedQueryClient().setMutationDefaults(['todos'], {
+    mutationFn: async () => null,
+  })
+  useRenamedQueryClient().setQueriesData(['todos'], () => null)
+  useRenamedQueryClient().setQueryData(['todos'], () => null)
+  useRenamedQueryClient().setQueryDefaults(['todos'], {
+    queryFn: async () => null,
+  })
+  useRenamedQueryClient().cancelQueries(['todos'])
+  useRenamedQueryClient().fetchInfiniteQuery(['todos'])
+  useRenamedQueryClient().fetchQuery(['todos'])
+  useRenamedQueryClient().invalidateQueries(['todos'])
+  useRenamedQueryClient().prefetchInfiniteQuery(['todos'])
+  useRenamedQueryClient().prefetchQuery(['todos'])
+  useRenamedQueryClient().refetchQueries(['todos'])
+  useRenamedQueryClient().removeQueries(['todos'])
+  useRenamedQueryClient().resetQueries(['todos'])
+  // QueryCache
+  // --- NewExpression
+  const queryCache1 = new RenamedQueryCache({
+    onError: (error) => console.log(error),
+    onSuccess: (success) => console.log(success)
+  })
+  queryCache1.find(['todos'])
+  queryCache1.findAll(['todos'])
+  // --- Instantiated hook call.
+  const queryClient1 = useRenamedQueryClient()
+  queryClient1.getQueryCache().find(['todos'])
+  queryClient1.getQueryCache().findAll(['todos'])
+  //
+  const queryClient2 = new RenamedQueryClient({})
+  queryClient2.getQueryCache().find(['todos'])
+  queryClient2.getQueryCache().findAll(['todos'])
+  //
+  const queryCache2 = queryClient1.getQueryCache()
+  queryCache2.find(['todos'])
+  queryCache2.findAll(['todos'])
+  // --- Direct hook call.
+  useRenamedQueryClient().getQueryCache().find(['todos'])
+  useRenamedQueryClient().getQueryCache().findAll(['todos'])
+  //
+  const queryCache3 = useRenamedQueryClient().getQueryCache()
+  queryCache3.find(['todos'])
+  queryCache3.findAll(['todos'])
+
+  return <div>Example Component</div>
+}

package/build/codemods/v4/__testfixtures__/namespaced-import.input.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react'
+import * as RQ from 'react-query'
+
+export const Examples = () => {
+  RQ.useQuery('todos')
+  RQ.useInfiniteQuery('todos')
+  RQ.useMutation('todos')
+  RQ.useIsFetching('todos')
+  RQ.useIsMutating('todos')
+  RQ.useQueries([query1, query2])
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = RQ.useQueryClient()
+  queryClient.getMutationDefaults('todos')
+  queryClient.getQueriesData('todos')
+  queryClient.getQueryData('todos')
+  queryClient.getQueryDefaults('todos')
+  queryClient.getQueryState('todos')
+  queryClient.isFetching('todos')
+  queryClient.setMutationDefaults('todos', { mutationFn: async () => null })
+  queryClient.setQueriesData('todos', () => null)
+  queryClient.setQueryData('todos', () => null)
+  queryClient.setQueryDefaults('todos', { queryFn: async () => null })
+  queryClient.cancelQueries('todos')
+  queryClient.fetchInfiniteQuery('todos')
+  queryClient.fetchQuery('todos')
+  queryClient.invalidateQueries('todos')
+  queryClient.prefetchInfiniteQuery('todos')
+  queryClient.prefetchQuery('todos')
+  queryClient.refetchQueries('todos')
+  queryClient.removeQueries('todos')
+  queryClient.resetQueries('todos')
+  // --- Direct hook call.
+  RQ.useQueryClient().getMutationDefaults('todos')
+  RQ.useQueryClient().getQueriesData('todos')
+  RQ.useQueryClient().getQueryData('todos')
+  RQ.useQueryClient().getQueryDefaults('todos')
+  RQ.useQueryClient().getQueryState('todos')
+  RQ.useQueryClient().isFetching('todos')
+  RQ.useQueryClient().setMutationDefaults('todos', {
+    mutationFn: async () => null,
+  })
+  RQ.useQueryClient().setQueriesData('todos', () => null)
+  RQ.useQueryClient().setQueryData('todos', () => null)
+  RQ.useQueryClient().setQueryDefaults('todos', {
+    queryFn: async () => null,
+  })
+  RQ.useQueryClient().cancelQueries('todos')
+  RQ.useQueryClient().fetchInfiniteQuery('todos')
+  RQ.useQueryClient().fetchQuery('todos')
+  RQ.useQueryClient().invalidateQueries('todos')
+  RQ.useQueryClient().prefetchInfiniteQuery('todos')
+  RQ.useQueryClient().prefetchQuery('todos')
+  RQ.useQueryClient().refetchQueries('todos')
+  RQ.useQueryClient().removeQueries('todos')
+  RQ.useQueryClient().resetQueries('todos')
+  // QueryCache
+  // --- NewExpression
+  const queryCache1 = new RQ.QueryCache({
+    onError: (error) => console.log(error),
+    onSuccess: (success) => console.log(success)
+  })
+  queryCache1.find('todos')
+  queryCache1.findAll('todos')
+  // --- Instantiated hook call.
+  const queryClient1 = RQ.useQueryClient()
+  queryClient1.getQueryCache().find('todos')
+  queryClient1.getQueryCache().findAll('todos')
+  //
+  const queryClient2 = new RQ.QueryClient({})
+  queryClient2.getQueryCache().find('todos')
+  queryClient2.getQueryCache().findAll('todos')
+  //
+  const queryCache2 = queryClient1.getQueryCache()
+  queryCache2.find('todos')
+  queryCache2.findAll('todos')
+  // --- Direct hook call.
+  RQ.useQueryClient().getQueryCache().find('todos')
+  RQ.useQueryClient().getQueryCache().findAll('todos')
+  //
+  const queryCache3 = RQ.useQueryClient().getQueryCache()
+  queryCache3.find('todos')
+  queryCache3.findAll('todos')
+
+  return <div>Example Component</div>
+}

package/build/codemods/v4/__testfixtures__/namespaced-import.output.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react'
+import * as RQ from 'react-query'
+
+export const Examples = () => {
+  RQ.useQuery(['todos'])
+  RQ.useInfiniteQuery(['todos'])
+  RQ.useMutation(['todos'])
+  RQ.useIsFetching(['todos'])
+  RQ.useIsMutating(['todos'])
+  RQ.useQueries({
+    queries: [query1, query2]
+  })
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = RQ.useQueryClient()
+  queryClient.getMutationDefaults(['todos'])
+  queryClient.getQueriesData(['todos'])
+  queryClient.getQueryData(['todos'])
+  queryClient.getQueryDefaults(['todos'])
+  queryClient.getQueryState(['todos'])
+  queryClient.isFetching(['todos'])
+  queryClient.setMutationDefaults(['todos'], { mutationFn: async () => null })
+  queryClient.setQueriesData(['todos'], () => null)
+  queryClient.setQueryData(['todos'], () => null)
+  queryClient.setQueryDefaults(['todos'], { queryFn: async () => null })
+  queryClient.cancelQueries(['todos'])
+  queryClient.fetchInfiniteQuery(['todos'])
+  queryClient.fetchQuery(['todos'])
+  queryClient.invalidateQueries(['todos'])
+  queryClient.prefetchInfiniteQuery(['todos'])
+  queryClient.prefetchQuery(['todos'])
+  queryClient.refetchQueries(['todos'])
+  queryClient.removeQueries(['todos'])
+  queryClient.resetQueries(['todos'])
+  // --- Direct hook call.
+  RQ.useQueryClient().getMutationDefaults(['todos'])
+  RQ.useQueryClient().getQueriesData(['todos'])
+  RQ.useQueryClient().getQueryData(['todos'])
+  RQ.useQueryClient().getQueryDefaults(['todos'])
+  RQ.useQueryClient().getQueryState(['todos'])
+  RQ.useQueryClient().isFetching(['todos'])
+  RQ.useQueryClient().setMutationDefaults(['todos'], {
+    mutationFn: async () => null,
+  })
+  RQ.useQueryClient().setQueriesData(['todos'], () => null)
+  RQ.useQueryClient().setQueryData(['todos'], () => null)
+  RQ.useQueryClient().setQueryDefaults(['todos'], {
+    queryFn: async () => null,
+  })
+  RQ.useQueryClient().cancelQueries(['todos'])
+  RQ.useQueryClient().fetchInfiniteQuery(['todos'])
+  RQ.useQueryClient().fetchQuery(['todos'])
+  RQ.useQueryClient().invalidateQueries(['todos'])
+  RQ.useQueryClient().prefetchInfiniteQuery(['todos'])
+  RQ.useQueryClient().prefetchQuery(['todos'])
+  RQ.useQueryClient().refetchQueries(['todos'])
+  RQ.useQueryClient().removeQueries(['todos'])
+  RQ.useQueryClient().resetQueries(['todos'])
+  // QueryCache
+  // --- NewExpression
+  const queryCache1 = new RQ.QueryCache({
+    onError: (error) => console.log(error),
+    onSuccess: (success) => console.log(success)
+  })
+  queryCache1.find(['todos'])
+  queryCache1.findAll(['todos'])
+  // --- Instantiated hook call.
+  const queryClient1 = RQ.useQueryClient()
+  queryClient1.getQueryCache().find(['todos'])
+  queryClient1.getQueryCache().findAll(['todos'])
+  //
+  const queryClient2 = new RQ.QueryClient({})
+  queryClient2.getQueryCache().find(['todos'])
+  queryClient2.getQueryCache().findAll(['todos'])
+  //
+  const queryCache2 = queryClient1.getQueryCache()
+  queryCache2.find(['todos'])
+  queryCache2.findAll(['todos'])
+  // --- Direct hook call.
+  RQ.useQueryClient().getQueryCache().find(['todos'])
+  RQ.useQueryClient().getQueryCache().findAll(['todos'])
+  //
+  const queryCache3 = RQ.useQueryClient().getQueryCache()
+  queryCache3.find(['todos'])
+  queryCache3.findAll(['todos'])
+
+  return <div>Example Component</div>
+}

package/build/codemods/v4/__testfixtures__/parameter-is-identifier.input.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import { useMutation, useQuery, useQueryClient } from 'react-query'
+
+export const ExampleWithStringLiteralKey = () => {
+  const stringLiteralKey = 'todos'
+  useQuery(stringLiteralKey)
+  useMutation(stringLiteralKey)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries(stringLiteralKey)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries(stringLiteralKey)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithTemplateLiteral = () => {
+  const templateLiteralKey = `todos`
+  useQuery(templateLiteralKey)
+  useMutation(templateLiteralKey)
+}
+
+export const ExampleWithArrayExpressionKey = () => {
+  const arrayExpressionKey = ['todos']
+  useQuery(arrayExpressionKey)
+  useMutation(arrayExpressionKey)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries(queryKey2)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries(queryKey2)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithUnknownKey = () => {
+  useQuery(unknownQueryKey)
+  useMutation(unknownQueryKey)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries(unknownQueryKey)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries(unknownQueryKey)
+
+  return <div>Example Component</div>
+}

package/build/codemods/v4/__testfixtures__/parameter-is-identifier.output.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import { useMutation, useQuery, useQueryClient } from 'react-query'
+
+export const ExampleWithStringLiteralKey = () => {
+  const stringLiteralKey = 'todos'
+  useQuery([stringLiteralKey])
+  useMutation([stringLiteralKey])
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries([stringLiteralKey])
+  // --- Direct hook call.
+  useQueryClient().cancelQueries([stringLiteralKey])
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithTemplateLiteral = () => {
+  const templateLiteralKey = `todos`
+  useQuery([templateLiteralKey])
+  useMutation([templateLiteralKey])
+}
+
+export const ExampleWithArrayExpressionKey = () => {
+  const arrayExpressionKey = ['todos']
+  useQuery(arrayExpressionKey)
+  useMutation(arrayExpressionKey)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries(queryKey2)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries(queryKey2)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithUnknownKey = () => {
+  useQuery(unknownQueryKey)
+  useMutation(unknownQueryKey)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries(unknownQueryKey)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries(unknownQueryKey)
+
+  return <div>Example Component</div>
+}

package/build/codemods/v4/__testfixtures__/parameter-is-object-expression.input.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react'
+import { useMutation, useQuery, useQueryClient } from 'react-query'
+
+const options = {}
+
+export const ExampleWithStringLiteral = () => {
+  useQuery({ queryKey: 'todos', exact: true }, options)
+  useMutation({ mutationKey: 'todos', exact: true }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({ queryKey: 'todos', exact: true }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({ queryKey: 'todos', exact: true }, options)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithStringLiteralIdentifier = () => {
+  const stringLiteralKey = 'todos'
+  useQuery({ queryKey: stringLiteralKey, exact: true }, options)
+  useMutation({ mutationKey: stringLiteralKey, exact: true }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({ queryKey: stringLiteralKey, exact: true }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({ queryKey: stringLiteralKey, exact: true }, options)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithTemplateLiteral = () => {
+  useQuery({ queryKey: `todos`, exact: true }, options)
+  useMutation({ mutationKey: `todos`, exact: true }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({ queryKey: `todos`, exact: true }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({ queryKey: `todos`, exact: true }, options)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithTemplateLiteralIdentifier = () => {
+  const templateLiteralKey = `todos`
+  useQuery({ queryKey: templateLiteralKey, exact: true }, options)
+  useMutation({ mutationKey: templateLiteralKey, exact: true }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({ queryKey: templateLiteralKey, exact: true }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({ queryKey: templateLiteralKey, exact: true }, options)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithArrayExpression = () => {
+  useQuery({ queryKey: ['todos'], exact: true }, options)
+  useMutation({ mutationKey: ['todos'], exact: true }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({ queryKey: ['todos'], exact: true }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({ queryKey: ['todos'], exact: true }, options)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithArrayExpressionIdentifier = () => {
+  const arrayExpressionKey = ['todos']
+  useQuery({ queryKey: arrayExpressionKey, exact: true }, options)
+  useMutation({ mutationKey: arrayExpressionKey, exact: true }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({ queryKey: arrayExpressionKey, exact: true }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({ queryKey: arrayExpressionKey, exact: true }, options)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithUnknownIdentifier1 = () => {
+  const createKey = (id) => ['todos', id]
+  const createdKey1 = createKey(1)
+  useQuery({ queryKey: createdKey1, exact: true }, options)
+  useMutation({ mutationKey: createdKey1, exact: true }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({ queryKey: createdKey1, exact: true }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({ queryKey: createdKey1, exact: true }, options)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithUnknownIdentifier2 = () => {
+  const createdKey2 = createKey()
+  useQuery({ queryKey: createdKey2, exact: true }, options)
+  useMutation({ mutationKey: createdKey2, exact: true }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({ queryKey: createdKey2, exact: true }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({ queryKey: createdKey2, exact: true }, options)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithUnknownIdentifier3 = () => {
+  useQuery({ queryKey: unknownQueryKey, exact: true }, options)
+  useMutation({ mutationKey: unknownQueryKey, exact: true }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({ queryKey: unknownQueryKey, exact: true }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({ queryKey: unknownQueryKey, exact: true }, options)
+
+  return <div>Example Component</div>
+}
+

package/build/codemods/v4/__testfixtures__/parameter-is-object-expression.output.tsx

@@ -0,0 +1,175 @@
+import * as React from 'react'
+import { useMutation, useQuery, useQueryClient } from 'react-query'
+
+const options = {}
+
+export const ExampleWithStringLiteral = () => {
+  useQuery({
+    queryKey: ['todos'],
+    exact: true
+  }, options)
+  useMutation({
+    mutationKey: ['todos'],
+    exact: true
+  }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({
+    queryKey: ['todos'],
+    exact: true
+  }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({
+    queryKey: ['todos'],
+    exact: true
+  }, options)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithStringLiteralIdentifier = () => {
+  const stringLiteralKey = 'todos'
+  useQuery({
+    queryKey: [stringLiteralKey],
+    exact: true
+  }, options)
+  useMutation({
+    mutationKey: [stringLiteralKey],
+    exact: true
+  }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({
+    queryKey: [stringLiteralKey],
+    exact: true
+  }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({
+    queryKey: [stringLiteralKey],
+    exact: true
+  }, options)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithTemplateLiteral = () => {
+  useQuery({
+    queryKey: [`todos`],
+    exact: true
+  }, options)
+  useMutation({
+    mutationKey: [`todos`],
+    exact: true
+  }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({
+    queryKey: [`todos`],
+    exact: true
+  }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({
+    queryKey: [`todos`],
+    exact: true
+  }, options)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithTemplateLiteralIdentifier = () => {
+  const templateLiteralKey = `todos`
+  useQuery({
+    queryKey: [templateLiteralKey],
+    exact: true
+  }, options)
+  useMutation({
+    mutationKey: [templateLiteralKey],
+    exact: true
+  }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({
+    queryKey: [templateLiteralKey],
+    exact: true
+  }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({
+    queryKey: [templateLiteralKey],
+    exact: true
+  }, options)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithArrayExpression = () => {
+  useQuery({ queryKey: ['todos'], exact: true }, options)
+  useMutation({ mutationKey: ['todos'], exact: true }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({ queryKey: ['todos'], exact: true }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({ queryKey: ['todos'], exact: true }, options)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithArrayExpressionIdentifier = () => {
+  const arrayExpressionKey = ['todos']
+  useQuery({ queryKey: arrayExpressionKey, exact: true }, options)
+  useMutation({ mutationKey: arrayExpressionKey, exact: true }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({ queryKey: arrayExpressionKey, exact: true }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({ queryKey: arrayExpressionKey, exact: true }, options)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithUnknownIdentifier1 = () => {
+  const createKey = (id) => ['todos', id]
+  const createdKey1 = createKey(1)
+  useQuery({ queryKey: createdKey1, exact: true }, options)
+  useMutation({ mutationKey: createdKey1, exact: true }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({ queryKey: createdKey1, exact: true }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({ queryKey: createdKey1, exact: true }, options)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithUnknownIdentifier2 = () => {
+  const createdKey2 = createKey()
+  useQuery({ queryKey: createdKey2, exact: true }, options)
+  useMutation({ mutationKey: createdKey2, exact: true }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({ queryKey: createdKey2, exact: true }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({ queryKey: createdKey2, exact: true }, options)
+
+  return <div>Example Component</div>
+}
+
+export const ExampleWithUnknownIdentifier3 = () => {
+  useQuery({ queryKey: unknownQueryKey, exact: true }, options)
+  useMutation({ mutationKey: unknownQueryKey, exact: true }, options)
+  // QueryClient methods
+  // --- Instantiated hook call.
+  const queryClient = useQueryClient()
+  queryClient.cancelQueries({ queryKey: unknownQueryKey, exact: true }, options)
+  // --- Direct hook call.
+  useQueryClient().cancelQueries({ queryKey: unknownQueryKey, exact: true }, options)
+
+  return <div>Example Component</div>
+}

package/build/codemods/v4/__testfixtures__/replace-import-specifier.input.tsx

@@ -0,0 +1,10 @@
+// React Query
+import { useQuery, useQueryClient } from 'react-query'
+import { useQuery as RenamedUseQuery, useQueryClient as RenamedUseQueryClient } from 'react-query'
+import DefaultReactQuery from 'react-query'
+import * as NamespacedReactQuery from 'react-query'
+// Devtools
+import { ReactQueryDevtools } from 'react-query/devtools'
+import { ReactQueryDevtools as RenamedReactQueryDevtools } from 'react-query/devtools'
+import DefaultReactQueryDevtools from 'react-query/devtools'
+import * as NamespacedReactQueryDevtools from 'react-query/devtools'