Feature/docs re authorization mutex example (#1947)

* chore(dependencies): add async-mutex dependency

* docs(customizing-queries): add mutex example for re-authorization

* fix(customizing-queries): fixing typo

* Update docs/rtk-query/usage/customizing-queries.mdx

Co-authored-by: Denis Kucevic <denis.kucevic@advania.is>
Co-authored-by: Lenz Weber <mail@lenzw.de>

Author: 3 people

docs/package.json

@@ -6,6 +6,7 @@
     "@types/react": "^16.9.46",
     "@types/react-redux": "^7.1.9",
     "@types/redux-logger": "^3.0.8",
+    "async-mutex": "^0.3.2",
     "axios": "^0.20.0",
     "formik": "^2.1.5",
     "graphql-request": "^3.4.0",

docs/rtk-query/usage/customizing-queries.mdx

@@ -390,6 +390,80 @@ const baseQueryWithReauth: BaseQueryFn<
 }
 ```
 
+#### Preventing multiple unauthorized errors
+
+Using [`async-mutex`](https://github.com/DirtyHairy/async-mutex) to prevent multiple calls to '/refreshToken' when multiple calls fail with [`401 Unauthorized`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/401) errors.
+
+```ts title="Preventing multiple calls to '/refreshToken'"
+// file: authSlice.ts noEmit
+declare function tokenReceived(args?: any): void
+declare function loggedOut(): void
+export { tokenReceived, loggedOut }
+// file: baseQueryWithReauth.ts
+
+import {
+  BaseQueryFn,
+  FetchArgs,
+  fetchBaseQuery,
+  FetchBaseQueryError,
+} from '@reduxjs/toolkit/query'
+import { tokenReceived, loggedOut } from './authSlice'
+// highlight-start
+import { Mutex } from 'async-mutex'
+// highlight-end
+
+// create a new mutex
+// highlight-start
+const mutex = new Mutex()
+// highlight-end
+const baseQuery = fetchBaseQuery({ baseUrl: '/' })
+const baseQueryWithReauth: BaseQueryFn<
+  string | FetchArgs,
+  unknown,
+  FetchBaseQueryError
+> = async (args, api, extraOptions) => {
+  // wait until the mutex is available without locking it
+  // highlight-start
+  await mutex.waitForUnlock()
+  // highlight-end
+  let result = await baseQuery(args, api, extraOptions)
+  if (result.error && result.error.status === 401) {
+    // checking whether the mutex is locked
+    // highlight-start
+    if (!mutex.isLocked()) {
+      const release = await mutex.acquire()
+      // highlight-end
+      try {
+        const refreshResult = await baseQuery(
+          '/refreshToken',
+          api,
+          extraOptions
+        )
+        if (refreshResult.data) {
+          api.dispatch(tokenReceived(refreshResult.data))
+          // retry the initial query
+          result = await baseQuery(args, api, extraOptions)
+        } else {
+          api.dispatch(loggedOut())
+        }
+      } finally {
+        // release must be called once the mutex should be released again.
+        // highlight-start
+        release()
+        // highlight-end
+      }
+    } else {
+      // wait until the mutex is available without locking it
+      // highlight-start
+      await mutex.waitForUnlock()
+      // highlight-end
+      result = await baseQuery(args, api, extraOptions)
+    }
+  }
+  return result
+}
+```
+
 ### Automatic retries
 
 RTK Query exports a utility called `retry` that you can wrap the `baseQuery` in your API definition with. It defaults to 5 attempts with a basic exponential backoff.

yarn.lock

@@ -8003,6 +8003,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"async-mutex@npm:^0.3.2":
+  version: 0.3.2
+  resolution: "async-mutex@npm:0.3.2"
+  dependencies:
+    tslib: ^2.3.1
+  checksum: 620b771dfdea1cad0a6b712915c31a1e3ca880a8cf1eae92b4590f435995e0260929c6ebaae0b9126b1456790ea498064b5bb9a506948cda760f48d3d0dcc4c8
+  languageName: node
+  linkType: hard
+
 "async@npm:^2.6.2":
   version: 2.6.3
   resolution: "async@npm:2.6.3"
@@ -11311,6 +11320,7 @@ __metadata:
     "@types/react": ^16.9.46
     "@types/react-redux": ^7.1.9
     "@types/redux-logger": ^3.0.8
+    async-mutex: ^0.3.2
     axios: ^0.20.0
     formik: ^2.1.5
     graphql-request: ^3.4.0