Is it possible to make an original request again through interceptor?

[JamesDean7]

Hello, I'm trying to learn how to apply openapi-ts for the new proejct, I wonder if it's possible to make an original request again through the interceptor.
For example, when the acceess token is expired, I need to get a new token and make the original request again with the new token, and I could deal with this situation with axios in this way,

export const appAxios = axios.create({
  baseURL: `http://localhost:4000`,
  withCredentials: true,
});

appAxios.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    const { config } = error;

    if(isTokenExpired){
      const requestTokenResult = await apiGetRefreshToken();
      const newToken = requestTokenResult.data.accessToken;
      config.headers.Authorization = `${tokenScheme} ${newToken}`;
      return appAxios(config);
    }

    return Promise.reject(error);
  }
  
);

I wonder how I can achieve the functionality above with the generated code
Can I get some help?

import { OpenAPI } from "@/client";

OpenAPI.interceptors.response.use((response) => {
  return response;
});

[mrlubos]

Hey @JamesDean7, are you using the Axios client? If so, I'd recommend using those interceptors directly. This feature should really exist for clients that do not support it (like fetch). We will be also improving interceptors in the upcoming clients release, so this is a good feedback. Thank you

[mrlubos]

Let's take a step back. Are you able to refresh your token and use it and you're asking for a cleaner way to achieve it? Or are you unable to refresh the token and use it at all?

[JamesDean7]

Yes, I'm able to refresh a new token, there's no problem with getting a new token part. I think I didn't eleborate what I'm trying to do enough, so where I'm struggling is here. If I was using just axios without any openapi generator like openapi-ts my axios interceptor and request function would look like this.

export const axiosClient = axios.create({
    baseURL: `http://localhost:4000`,
    timeout: 10000,
    withCredentials: true,
});

axiosClient.interceptors.response.use(
    (response) => {
        return response;
    },
    async (error) => {
        const { config, response } = error;

        if(tokenExpired) {
            const newToken = await requestNewToken();
            config.headers.Authorization = `Bearer ${newToken}`;
            return axiosClient(config);  
           // Here I'm making the original request with a new token again by passing the config
        }
        ...
    }
);

const getUserList = async () => {
  const result = await axiosClient.get("users", {
    params: {
      limit: 5,
    },
  });
  return result
};

And now I'm trying to change the code above to the generated code by openapi-ts, it looks like this

import { OpenAPI, UsersService } from "@/openapi-heyapi";

OpenAPI.interceptors.request.use((request) => {
  return request;
});

OpenAPI.interceptors.response.use(async (response) => {
  const { config } = response;
   
   if(isTokenExpired){
    const newToken = await requestNewToken();
    config.headers.Authorization = `Bearer ${newToken}`;
    //  I've added a new token to the config header and now how can I make the original request with the config in this part ?
  }
 ...
});

const userApi = UsersService;

const getUserList = async () => {
  const result = await userApi.usersControllerFindAll({ limit: "5" });
  return result;
};

and the generated UserService code by openapi-ts looks like below

export class UsersService {
  ...

  public static usersControllerFindAll(
    data: $OpenApiTs["/users"]["get"]["req"] = {}
  ): CancelablePromise<$OpenApiTs["/users"]["get"]["res"][200]> {
    return __request(OpenAPI, {
      method: "GET",
      url: "/users",
      query: {
        page: data.page,
        limit: data.limit,
      },
      errors: {
        403: "Forbidden",
      },
    });
  }

  ...
}

It looks like in the OpenAPI response interceptor the config object is holding the original request information
so I added a new token to the config header and want to make the original request again with the updated config like
I did in the pure axios example.
I'm curious If I can achieve this inside the OpenAPI response interceptor or is this a wrong way to apply refresh token process with openapi-ts generated codes?

Thank you!

[mrlubos]

I see. I wouldn't do this for now, especially with Axios since you can get a working code without using the openapi-ts interceptors. I also use Axios interceptors directly in my projects. Interceptors in their present form are meant for clients that do not natively support them (e.g. Fetch API). I will take this into consideration when working on the upcoming clients.

However, by reimplementing the Axios interface, we'd be running the risk of getting out of sync if Axios ever decides to change their interceptors implementation. The idea of clients is to provide a thin wrapper on top of the underlying technology and patch their functionality where it's deemed necessary. In this case, I don't think we will need custom interceptors, and the final client will be simply re-exporting the Axios interface. So in your code, you'll be able to do OpenAPI.interceptors.request.use(), but underneath that, it will be really the same as calling axiosClient.interceptors.request.use(). Let me know if you have any thoughts on this!

[mrlubos]

Hey @JamesDean7, just want to update you here. The new Axios client has been released and it makes a direct use of the native Axios interceptors, so this kind of confusion will never occur there. If you're able to, I encourage you to switch to the latest clients, they're much better!