retry failed request in the onResponse middleware

[pavlo-hadzheha]

Hello there! I've been trying to implement the refresh session functionality for quite some time using the response middleware.

The stumbling block is to retry the failed request inside the middleware. In the following code snippet, I am registering the Middleware and in the onResponse handler I'd like to add the retry line of the original request (look for the comment '// retry request here').

Any consultation would be greatly appreciated.

import { authService, TLoginResponse } from '@/shared/auth'
import { Middleware } from 'openapi-fetch'

let refreshPromise: Promise<TLoginResponse | undefined> | null = null

export const middleware: Middleware = {
  async onResponse({ response, request }) {
    if (response.ok) return response
    else {
      if (response.status === 401) {
        try {
          if (!refreshPromise) {
            refreshPromise = authService.refreshSession()
          }
          const refreshResponse = await refreshPromise
          if (refreshResponse) {
            authService.setAccessToken(refreshResponse)
            authService.setRefreshToken(refreshResponse)

            request.headers.set('Authorization', `Bearer ${refreshResponse.accessToken}`)
            try {
              return // retry request here
            } catch (innerError) {
              if (innerError.status === 401) {
                throw innerError
              }
            }
          }
        } catch (error) {
          authService.setRefreshToken({ refreshToken: null })
          authService.setAccessToken({ accessToken: null })
        } finally {
          refreshPromise = null
        }
      }
    }
  },
}

[pavlo-hadzheha]

I thought of an ability to call the coreFetch function with fetchOptions passed to the original request.

export const middleware: Middleware = {
  async onResponse({ response, request, originalFetchOptions, schemaPath }) {
    client.coreFetch(schemaPath, initialFeatchOptions)
 }
}

or

export const middleware: Middleware = {
  async onResponse({ response, request }) {
    client.coreFetch(request)
 }
}

Both imply that the coreFetch function would have to be returned from the createClient initializer and the latter implies that the coreFetch would handle the first parameter by branching using the following condition

if (schemaPath instanceof Request) {
  ...
} else {
  ...
}

[pavlo-hadzheha]

Let me know if it makes any sense at all. Or, perhaps, there are easier ways to achieve this w/o making changes to the source code. Thanks!

[pavlo-hadzheha]

I've got one more idea and it's to use native fetch just like this. Are there any potential problems with this I need to be aware of?

import { authService, TLoginResponse } from '@/shared/auth'
import { Middleware } from 'openapi-fetch'

let refreshPromise: Promise<TLoginResponse | undefined> | null = null

export const middleware: Middleware = {
  async onResponse({ response, request }) {
    if (response.ok) return response
    else {
      if (response.status === 401) {
        try {
          // ...

          if (refreshResponse) {
            // ...

            try {
              return fetch(request)
            } catch (innerError) {
              if (innerError.status === 401) {
                throw innerError
              }
            }
          }
        } catch (error) {
          // ...
        } finally {
          refreshPromise = null
        }
      }
    }
  },
}