feat: update to support axios 1.x (#1418)

* feat: update to support axios 1.x Updated the following packages too: - LRUCache - jest - ts-jest - prettier - typescript * feat: migrate from legacy cancel token to abort controller * chore: update axios peer dependency --------- Co-authored-by: Mark Hebden <[email protected]>
simoneb · Sep 13, 2023 · b222e63 · b222e63
1 parent 5e0e821
commit b222e63
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 86 deletions.
diff --git a/.babelrc.js b/.babelrc.js
@@ -5,7 +5,7 @@ const loose = true
 module.exports = {
   presets: [['@babel/preset-env', { loose, modules: false }]],
   plugins: [
-    ['@babel/proposal-object-rest-spread', { loose }],
+    ['@babel/plugin-transform-object-rest-spread', { loose }],
     cjs && ['@babel/transform-modules-commonjs', { loose }],
     ['@babel/transform-runtime', { useESModules: !cjs }]
   ].filter(Boolean),

diff --git a/.prettierrc b/.prettierrc
@@ -2,5 +2,6 @@
   "semi": false,
   "singleQuote": true,
   "trailingComma": "none",
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "endOfLine": "auto"
 }
diff --git a/jest.config.js b/jest.config.js
@@ -6,12 +6,14 @@ const commonOptions = {
 const projects = [
   {
     displayName: 'js',
-    testMatch: ['**/?(*.)+(spec|test).js?(x)']
+    testMatch: ['**/?(*.)+(spec|test).js?(x)'],
+    testEnvironment: 'jsdom'
   },
   {
     displayName: 'ts',
     testMatch: ['**/?(*.)+(spec|test).ts?(x)'],
-    preset: 'ts-jest/presets/js-with-ts'
+    preset: 'ts-jest/presets/js-with-ts',
+    testEnvironment: 'jsdom'
   },
   {
     displayName: 'ssr-js',

diff --git a/package.json b/package.json
@@ -29,53 +29,54 @@
     "lint": "eslint . --ext .js,.jsx",
     "prepare": "npm run clean && npm run build && husky install",
     "release": "standard-version",
-    "pretest": "cp ./test/index.test.jsx ./test/index.test.tsx && cp ./test/index.test.ssr.jsx ./test/index.test.ssr.tsx",
+    "pretest": "shx cp ./test/index.test.jsx ./test/index.test.tsx && shx cp ./test/index.test.ssr.jsx ./test/index.test.ssr.tsx",
     "test": "tsd && jest --no-cache"
   },
   "dependencies": {
     "@babel/runtime": "7.22.11",
     "dequal": "2.0.3",
-    "lru-cache": "^8.0.0"
+    "lru-cache": "^10.0.1"
   },
   "peerDependencies": {
-    "axios": ">=0.24.0",
+    "axios": ">=1.0.0",
     "react": "^16.8.0-0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@babel/cli": "7.22.10",
     "@babel/core": "7.22.11",
     "@babel/plugin-transform-runtime": "7.22.10",
-    "@babel/preset-env": "7.21.5",
+    "@babel/preset-env": "7.22.14",
     "@babel/preset-react": "7.22.5",
     "@commitlint/cli": "17.7.1",
     "@commitlint/config-conventional": "17.7.0",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "7.0.2",
-    "@types/jest": "29.5.3",
+    "@types/jest": "29.5.4",
     "@types/node": "20.5.7",
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
-    "axios": "0.27.2",
+    "axios": "1.5.0",
     "cross-env": "7.0.3",
     "eslint": "8.48.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-import": "2.28.1",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "husky": "^8.0.1",
-    "jest": "26.6.3",
+    "jest": "29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
     "lint-staged": "14.0.1",
     "npm-run-all": "4.1.5",
-    "prettier": "2.8.8",
+    "prettier": "3.0.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-test-renderer": "17.0.2",
     "rimraf": "5.0.1",
+    "shx": "0.3.4",
     "standard-version": "9.5.0",
-    "ts-jest": "26.5.6",
+    "ts-jest": "29.1.1",
     "tsd": "^0.29.0",
-    "typescript": "4.9.5"
+    "typescript": "5.2.2"
   },
   "lint-staged": {
     "{src,test}/**/*.{js?(x),md}": [

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -6,7 +6,7 @@ import {
   AxiosInstance,
   AxiosResponse
 } from 'axios'
-import LRUCache from 'lru-cache'
+import { LRUCache } from 'lru-cache'
 
 export interface ResponseValues<TResponse, TBody, TError> {
   data?: TResponse

diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react'
-import StaticAxios from 'axios'
-import LRU from 'lru-cache'
+import StaticAxios, { isCancel } from 'axios'
+import { LRUCache } from 'lru-cache'
 import { dequal as deepEqual } from 'dequal/lite'
 
 const actions = {
@@ -69,7 +69,7 @@ export function makeUseAxios(configureOptions) {
   const __ssrPromises = []
 
   function resetConfigure() {
-    cache = new LRU({ max: 500 })
+    cache = new LRUCache({ max: 500 })
     axiosInstance = StaticAxios
     defaultOptions = DEFAULT_OPTIONS
   }
@@ -189,7 +189,7 @@ export function makeUseAxios(configureOptions) {
 
       return response
     } catch (err) {
-      if (!StaticAxios.isCancel(err)) {
+      if (!isCancel(err)) {
         dispatch({ type: actions.REQUEST_END, payload: err, error: true })
       }
 
@@ -217,7 +217,7 @@ export function makeUseAxios(configureOptions) {
       useDeepCompareMemoize(_options)
     )
 
-    const cancelSourceRef = React.useRef()
+    const abortControllerRef = React.useRef()
 
     const [state, dispatch] = React.useReducer(
       reducer,
@@ -229,20 +229,20 @@ export function makeUseAxios(configureOptions) {
     }
 
     const cancelOutstandingRequest = React.useCallback(() => {
-      if (cancelSourceRef.current) {
-        cancelSourceRef.current.cancel()
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort()
       }
     }, [])
 
-    const withCancelToken = React.useCallback(
+    const withAbortSignal = React.useCallback(
       config => {
         if (options.autoCancel) {
           cancelOutstandingRequest()
         }
 
-        cancelSourceRef.current = StaticAxios.CancelToken.source()
+        abortControllerRef.current = new AbortController()
 
-        config.cancelToken = cancelSourceRef.current.token
+        config.signal = abortControllerRef.current.signal
 
         return config
       },
@@ -251,30 +251,30 @@ export function makeUseAxios(configureOptions) {
 
     React.useEffect(() => {
       if (!options.manual) {
-        request(withCancelToken(config), options, dispatch).catch(() => {})
+        request(withAbortSignal(config), options, dispatch).catch(() => {})
       }
 
       return () => {
         if (options.autoCancel) {
           cancelOutstandingRequest()
         }
       }
-    }, [config, options, withCancelToken, cancelOutstandingRequest])
+    }, [config, options, withAbortSignal, cancelOutstandingRequest])
 
     const refetch = React.useCallback(
       (configOverride, options) => {
         configOverride = configToObject(configOverride)
 
         return request(
-          withCancelToken({
+          withAbortSignal({
             ...config,
             ...(isReactEvent(configOverride) ? null : configOverride)
           }),
           { useCache: false, ...options },
           dispatch
         )
       },
-      [config, withCancelToken]
+      [config, withAbortSignal]
     )
 
     return [state, refetch, cancelOutstandingRequest]