docs: modernize Axios examples to remove deprecated CancelToken (#2579)

takahiro-1227 · web-flow · commit c884b8b4485d · 2025-11-20T08:04:26.000-05:00
- Remove deprecated Axios.CancelToken.source() usage (deprecated since Axios 0.22.0)
- Remove promise.cancel() implementation (not needed in TanStack Query v4+)
- Simplify custom instance implementations
- Update documentation examples in guides and API reference
- Update test mutators and sample code

Modern Axios (1.x+) automatically supports AbortController via config.signal,
and TanStack Query v4+ handles cancellation internally, making the custom
cancel implementation unnecessary.
diff --git a/docs/src/pages/guides/custom-axios.mdx b/docs/src/pages/guides/custom-axios.mdx
@@ -36,18 +36,11 @@ export const customInstance = <T>(
   config: AxiosRequestConfig,
   options?: AxiosRequestConfig,
 ): Promise<T> => {
-  const source = Axios.CancelToken.source();
   const promise = AXIOS_INSTANCE({
     ...config,
     ...options,
-    cancelToken: source.token,
   }).then(({ data }) => data);
 
-  // @ts-ignore
-  promise.cancel = () => {
-    source.cancel('Query was cancelled');
-  };
-
   return promise;
 };
 
diff --git a/docs/src/pages/reference/configuration/output.mdx b/docs/src/pages/reference/configuration/output.mdx
@@ -815,15 +815,7 @@ import Axios, { AxiosRequestConfig } from 'axios';
 export const AXIOS_INSTANCE = Axios.create({ baseURL: '' });
 
 export const customInstance = <T>(config: AxiosRequestConfig): Promise<T> => {
-  const source = Axios.CancelToken.source();
-  const promise = AXIOS_INSTANCE({ ...config, cancelToken: source.token }).then(
-    ({ data }) => data,
-  );
-
-  // @ts-ignore
-  promise.cancel = () => {
-    source.cancel('Query was cancelled by React Query');
-  };
+  const promise = AXIOS_INSTANCE({ ...config }).then(({ data }) => data);
 
   return promise;
 };
@@ -845,15 +837,7 @@ import config from '@config';
 export const AXIOS_INSTANCE = Axios.create({ baseURL: '', ...config });
 
 export const customInstance = <T>(config: AxiosRequestConfig): Promise<T> => {
-  const source = Axios.CancelToken.source();
-  const promise = AXIOS_INSTANCE({ ...config, cancelToken: source.token }).then(
-    ({ data }) => data,
-  );
-
-  // @ts-ignore
-  promise.cancel = () => {
-    source.cancel('Query was cancelled by React Query');
-  };
+  const promise = AXIOS_INSTANCE({ ...config }).then(({ data }) => data);
 
   return promise;
 };
@@ -917,20 +901,13 @@ export const useCustomInstance = <T>(): ((
   const token = useToken(); // Do what you want
 
   return (config: AxiosRequestConfig) => {
-    const source = Axios.CancelToken.source();
     const promise = AXIOS_INSTANCE({
       ...config,
       headers: {
-        Authorization: `Bearer ${token}`
-      }
-      cancelToken: source.token,
+        Authorization: `Bearer ${token}`,
+      },
     }).then(({ data }) => data);
 
-    // @ts-ignore
-    promise.cancel = () => {
-      source.cancel('Query was cancelled by React Query');
-    };
-
     return promise;
   };
 };
diff --git a/samples/react-app-with-swr/basic/src/api/mutator/custom-instance.ts b/samples/react-app-with-swr/basic/src/api/mutator/custom-instance.ts
@@ -3,15 +3,7 @@ import Axios, { AxiosRequestConfig } from 'axios';
 export const AXIOS_INSTANCE = Axios.create({ baseURL: '' });
 
 export const customInstance = <T>(config: AxiosRequestConfig): Promise<T> => {
-  const source = Axios.CancelToken.source();
-  const promise = AXIOS_INSTANCE({ ...config, cancelToken: source.token }).then(
-    ({ data }) => data,
-  );
-
-  // @ts-ignore
-  promise.cancel = () => {
-    source.cancel('Query was cancelled by React Query');
-  };
+  const promise = AXIOS_INSTANCE({ ...config }).then(({ data }) => data);
 
   return promise;
 };
diff --git a/samples/react-query/basic/src/api/mutator/custom-instance.ts b/samples/react-query/basic/src/api/mutator/custom-instance.ts
@@ -3,15 +3,7 @@ import Axios, { AxiosError, AxiosRequestConfig } from 'axios';
 export const AXIOS_INSTANCE = Axios.create({ baseURL: '' });
 
 export const customInstance = <T>(config: AxiosRequestConfig): Promise<T> => {
-  const source = Axios.CancelToken.source();
-  const promise = AXIOS_INSTANCE({ ...config, cancelToken: source.token }).then(
-    ({ data }) => data,
-  );
-
-  // @ts-ignore
-  promise.cancel = () => {
-    source.cancel('Query was cancelled by Vue Query');
-  };
+  const promise = AXIOS_INSTANCE({ ...config }).then(({ data }) => data);
 
   return promise;
 };
diff --git a/samples/react-query/form-data-mutator/custom-instance.ts b/samples/react-query/form-data-mutator/custom-instance.ts
@@ -3,15 +3,7 @@ import Axios, { AxiosRequestConfig } from 'axios';
 export const AXIOS_INSTANCE = Axios.create({ baseURL: '' });
 
 export const customInstance = <T>(config: AxiosRequestConfig): Promise<T> => {
-  const source = Axios.CancelToken.source();
-  const promise = AXIOS_INSTANCE({ ...config, cancelToken: source.token }).then(
-    ({ data }) => data,
-  );
-
-  // @ts-ignore
-  promise.cancel = () => {
-    source.cancel('Query was cancelled by Vue Query');
-  };
+  const promise = AXIOS_INSTANCE({ ...config }).then(({ data }) => data);
 
   return promise;
 };
diff --git a/samples/react-query/form-data/custom-instance.ts b/samples/react-query/form-data/custom-instance.ts
@@ -3,15 +3,7 @@ import Axios, { AxiosRequestConfig } from 'axios';
 export const AXIOS_INSTANCE = Axios.create({ baseURL: '' });
 
 export const customInstance = <T>(config: AxiosRequestConfig): Promise<T> => {
-  const source = Axios.CancelToken.source();
-  const promise = AXIOS_INSTANCE({ ...config, cancelToken: source.token }).then(
-    ({ data }) => data,
-  );
-
-  // @ts-ignore
-  promise.cancel = () => {
-    source.cancel('Query was cancelled by Vue Query');
-  };
+  const promise = AXIOS_INSTANCE({ ...config }).then(({ data }) => data);
 
   return promise;
 };
diff --git a/samples/react-query/form-url-encoded-mutator/custom-instance.ts b/samples/react-query/form-url-encoded-mutator/custom-instance.ts
@@ -3,15 +3,7 @@ import Axios, { AxiosRequestConfig } from 'axios';
 export const AXIOS_INSTANCE = Axios.create({ baseURL: '' });
 
 export const customInstance = <T>(config: AxiosRequestConfig): Promise<T> => {
-  const source = Axios.CancelToken.source();
-  const promise = AXIOS_INSTANCE({ ...config, cancelToken: source.token }).then(
-    ({ data }) => data,
-  );
-
-  // @ts-ignore
-  promise.cancel = () => {
-    source.cancel('Query was cancelled by Vue Query');
-  };
+  const promise = AXIOS_INSTANCE({ ...config }).then(({ data }) => data);
 
   return promise;
 };
diff --git a/samples/react-query/form-url-encoded/custom-instance.ts b/samples/react-query/form-url-encoded/custom-instance.ts
@@ -3,15 +3,7 @@ import Axios, { AxiosRequestConfig } from 'axios';
 export const AXIOS_INSTANCE = Axios.create({ baseURL: '' });
 
 export const customInstance = <T>(config: AxiosRequestConfig): Promise<T> => {
-  const source = Axios.CancelToken.source();
-  const promise = AXIOS_INSTANCE({ ...config, cancelToken: source.token }).then(
-    ({ data }) => data,
-  );
-
-  // @ts-ignore
-  promise.cancel = () => {
-    source.cancel('Query was cancelled by Vue Query');
-  };
+  const promise = AXIOS_INSTANCE({ ...config }).then(({ data }) => data);
 
   return promise;
 };
diff --git a/samples/react-query/hook-mutator/use-custom-instance.ts b/samples/react-query/hook-mutator/use-custom-instance.ts
@@ -6,16 +6,7 @@ export const useCustomInstance = <T>(): ((
   config: AxiosRequestConfig,
 ) => Promise<T>) => {
   return (config: AxiosRequestConfig) => {
-    const source = Axios.CancelToken.source();
-    const promise = AXIOS_INSTANCE({
-      ...config,
-      cancelToken: source.token,
-    }).then(({ data }) => data);
-
-    // @ts-ignore
-    promise.cancel = () => {
-      source.cancel('Query was cancelled by React Query');
-    };
+    const promise = AXIOS_INSTANCE({ ...config }).then(({ data }) => data);
 
     return promise;
   };
diff --git a/samples/vue-query/vue-query-basic/src/api/mutator/custom-instance.ts b/samples/vue-query/vue-query-basic/src/api/mutator/custom-instance.ts
@@ -3,15 +3,7 @@ import Axios, { AxiosRequestConfig } from 'axios';
 export const AXIOS_INSTANCE = Axios.create({ baseURL: '' });
 
 export const customInstance = <T>(config: AxiosRequestConfig): Promise<T> => {
-  const source = Axios.CancelToken.source();
-  const promise = AXIOS_INSTANCE({ ...config, cancelToken: source.token }).then(
-    ({ data }) => data,
-  );
-
-  // @ts-ignore
-  promise.cancel = () => {
-    source.cancel('Query was cancelled by Vue Query');
-  };
+  const promise = AXIOS_INSTANCE({ ...config }).then(({ data }) => data);
 
   return promise;
 };
diff --git a/tests/mutators/custom-instance.ts b/tests/mutators/custom-instance.ts
@@ -3,15 +3,7 @@ import Axios, { AxiosRequestConfig } from 'axios';
 export const AXIOS_INSTANCE = Axios.create({ baseURL: '' });
 
 export const customInstance = <T>(config: AxiosRequestConfig): Promise<T> => {
-  const source = Axios.CancelToken.source();
-  const promise = AXIOS_INSTANCE({ ...config, cancelToken: source.token }).then(
-    ({ data }) => data,
-  );
-
-  // @ts-ignore
-  promise.cancel = () => {
-    source.cancel('Query was cancelled by React Query');
-  };
+  const promise = AXIOS_INSTANCE({ ...config }).then(({ data }) => data);
 
   return promise;
 };
diff --git a/tests/mutators/error-type.ts b/tests/mutators/error-type.ts
@@ -3,15 +3,7 @@ import Axios, { AxiosError, AxiosRequestConfig } from 'axios';
 export const AXIOS_INSTANCE = Axios.create({ baseURL: '' });
 
 export const customInstance = <T>(config: AxiosRequestConfig): Promise<T> => {
-  const source = Axios.CancelToken.source();
-  const promise = AXIOS_INSTANCE({ ...config, cancelToken: source.token }).then(
-    ({ data }) => data,
-  );
-
-  // @ts-ignore
-  promise.cancel = () => {
-    source.cancel('Query was cancelled by React Query');
-  };
+  const promise = AXIOS_INSTANCE({ ...config }).then(({ data }) => data);
 
   return promise;
 };
diff --git a/tests/mutators/multi-arguments.ts b/tests/mutators/multi-arguments.ts
@@ -6,21 +6,14 @@ export const customInstance = <T>(
   config: AxiosRequestConfig,
   token?: string,
 ): Promise<T> => {
-  const source = Axios.CancelToken.source();
   const promise = AXIOS_INSTANCE({
     ...config,
-    cancelToken: source.token,
     headers: {
       ...config?.headers,
       ...(token ? { Authorization: token } : {}),
     },
   }).then(({ data }) => data);
 
-  // @ts-ignore
-  promise.cancel = () => {
-    source.cancel('Query was cancelled by React Query');
-  };
-
   return promise;
 };
 
diff --git a/tests/mutators/use-custom-instance-with-second-parameter.ts b/tests/mutators/use-custom-instance-with-second-parameter.ts
@@ -10,18 +10,11 @@ export const useCustomInstance = <T>() => {
   queryClient.isFetching();
 
   return (config: AxiosRequestConfig, headers?: { token: string }) => {
-    const source = Axios.CancelToken.source();
     const promise = AXIOS_INSTANCE({
       ...config,
-      cancelToken: source.token,
       headers: headers,
     }).then(({ data }) => data);
 
-    // @ts-ignore
-    promise.cancel = () => {
-      source.cancel('Query was cancelled by React Query');
-    };
-
     return promise;
   };
 };
diff --git a/tests/mutators/use-custom-instance.ts b/tests/mutators/use-custom-instance.ts
@@ -12,16 +12,7 @@ export const useCustomInstance = <T>(): ((
   queryClient.isFetching();
 
   return (config: AxiosRequestConfig) => {
-    const source = Axios.CancelToken.source();
-    const promise = AXIOS_INSTANCE({
-      ...config,
-      cancelToken: source.token,
-    }).then(({ data }) => data);
-
-    // @ts-ignore
-    promise.cancel = () => {
-      source.cancel('Query was cancelled by React Query');
-    };
+    const promise = AXIOS_INSTANCE({ ...config }).then(({ data }) => data);
 
     return promise;
   };
