Repository: tannerlinsley/react-query
Pull request #2451 (2021-07-11 12:48:12)

fix: add overloads to useIsMutating

vercel[bot]: This pull request is being automatically deployed with Vercel ([learn more](https://vercel.link/github-learn-more)).  
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: [https://vercel.com/tannerlinsley/react-query/Ci8mXCQSfK4FsHbxKzsBQ7CTQHMi](https://vercel.com/tannerlinsley/react-query/Ci8mXCQSfK4FsHbxKzsBQ7CTQHMi)  
✅ Preview: *In Progress*


codesandbox[bot]: This pull request is automatically built and testable in [CodeSandbox](https://codesandbox.io).

  To see build info of the built libraries, click [here](https://ci.codesandbox.io/status/tannerlinsley/react-query/pr/2451/builds/148954) or the icon next to each commit SHA.

Latest deployment of this branch, based on commit c6c292c3c7a01f98b49ca7719df2fc4b55ad42af:

|Sandbox| Source |
|--|--|
|[tannerlinsley/react-query: basic](https://codesandbox.io/s/tannerlinsleyreact-query-basic-sejeg)| Configuration |
|[tannerlinsley/react-query: basic-typescript](https://codesandbox.io/s/tannerlinsleyreact-query-basic-typescript-h9rcu)| Configuration |


Patch:
diff --git a/docs/src/pages/guides/query-cancellation.md b/docs/src/pages/guides/query-cancellation.md
index f54e24d43..1cef96dfd 100644
--- a/docs/src/pages/guides/query-cancellation.md
+++ b/docs/src/pages/guides/query-cancellation.md
@@ -14,10 +14,11 @@ But don't worry! If your queries are high-bandwidth or potentially very expensiv
 ## Using `axios`
 
 ```js
-import { CancelToken } from 'axios'
+import axios from 'axios'
 
 const query = useQuery('todos', () => {
   // Create a new CancelToken source for this request
+  const CancelToken = axios.CancelToken
   const source = CancelToken.source()
 
   const promise = axios.get('/todos', {
diff --git a/src/core/types.ts b/src/core/types.ts
index ba3fafd52..8d1b94c9a 100644
--- a/src/core/types.ts
+++ b/src/core/types.ts
@@ -481,7 +481,7 @@ export interface MutationOptions<
   variables?: TVariables
   onMutate?: (
     variables: TVariables
-  ) => Promise<TContext> | Promise<undefined> | TContext | undefined
+  ) => Promise<TContext | undefined> | TContext | undefined
   onSuccess?: (
     data: TData,
     variables: TVariables,
diff --git a/src/core/utils.ts b/src/core/utils.ts
index 49b310ed5..f31a160e2 100644
--- a/src/core/utils.ts
+++ b/src/core/utils.ts
@@ -166,6 +166,13 @@ export function parseFilterArgs<
     : [arg1 || {}, arg2]) as [TFilters, TOptions]
 }
 
+export function parseMutationFilterArgs(
+  arg1?: QueryKey | MutationFilters,
+  arg2?: MutationFilters
+): MutationFilters | undefined {
+  return isQueryKey(arg1) ? { ...arg2, mutationKey: arg1 } : arg1
+}
+
 export function mapQueryStatusFilter(
   active?: boolean,
   inactive?: boolean
diff --git a/src/react/types.ts b/src/react/types.ts
index 6e6da2f08..ef98597c4 100644
--- a/src/react/types.ts
+++ b/src/react/types.ts
@@ -77,7 +77,7 @@ export interface UseMutationOptions<
   mutationKey?: MutationKey
   onMutate?: (
     variables: TVariables
-  ) => Promise<TContext> | Promise<undefined> | TContext | undefined
+  ) => Promise<TContext | undefined> | TContext | undefined
   onSuccess?: (
     data: TData,
     variables: TVariables,
diff --git a/src/react/useIsMutating.ts b/src/react/useIsMutating.ts
index 3f6987be2..3353dfc85 100644
--- a/src/react/useIsMutating.ts
+++ b/src/react/useIsMutating.ts
@@ -1,11 +1,21 @@
 import React from 'react'
 
 import { notifyManager } from '../core/notifyManager'
-import { MutationFilters } from '../core/utils'
+import { QueryKey } from '../core/types'
+import { MutationFilters, parseMutationFilterArgs } from '../core/utils'
 import { useQueryClient } from './QueryClientProvider'
 
-export function useIsMutating(filters?: MutationFilters): number {
+export function useIsMutating(filters?: MutationFilters): number
+export function useIsMutating(
+  queryKey?: QueryKey,
+  filters?: MutationFilters
+): number
+export function useIsMutating(
+  arg1?: QueryKey | MutationFilters,
+  arg2?: MutationFilters
+): number {
   const mountedRef = React.useRef(false)
+  const filters = parseMutationFilterArgs(arg1, arg2)
 
   const queryClient = useQueryClient()
 


Test patch:
diff --git a/src/react/tests/useIsMutating.test.tsx b/src/react/tests/useIsMutating.test.tsx
index 2b1f5b644..e7f147578 100644
--- a/src/react/tests/useIsMutating.test.tsx
+++ b/src/react/tests/useIsMutating.test.tsx
@@ -45,7 +45,7 @@ describe('useIsMutating', () => {
     const queryClient = new QueryClient()
 
     function IsMutating() {
-      const isMutating = useIsMutating({ mutationKey: 'mutation1' })
+      const isMutating = useIsMutating('mutation1')
       isMutatings.push(isMutating)
       return null
     }