Breaking News: Grepper is joining You.com. Read the official announcement!

custom api handler rtk query

Mystic Dev answered on January 17, 2023 Popularity 2/10 Helpfulness 8/10

answer custom api handler rtk query

custom api handler rtk query

Comment

import type { BaseQueryFn } from "@reduxjs/toolkit/query";
import axios from "axios";
import type { AxiosRequestConfig, AxiosError } from "axios";

const customApiHandler =
  (
    { baseUrl }: { baseUrl: string } = { baseUrl: "" }
  ): BaseQueryFn<
    {
      url: string;
      method: AxiosRequestConfig["method"];
      data?: AxiosRequestConfig["data"];
      params?: AxiosRequestConfig["params"];
    },
    unknown,
    unknown
  > =>
  async ({ url, method, data, params }) => {
    axios.interceptors.request.use(
      (config: any) => {
        const accessToken = localStorage.getItem("accessToken");
        if (accessToken) {
          config.headers.common = { Authorization: `Bearer ${accessToken}` };
        }
        return config;
      },
      (error: any) => {
        Promise.reject(error.response || error.message);
      }
    );

    axios.interceptors.response.use(
      (response: any) => {
        return response;
      },
      (error) => {
        let originalRequest = error.config;
        let refreshToken = localStorage.getItem("refreshToken");

        if (
          refreshToken &&
          error.response.status === 403 &&
          !originalRequest._retry
        ) {
          originalRequest._retry = true;
          return axios
            .post(`${"API_URL"}/authentication/refresh`, {
              refreshToken: refreshToken,
            })
            .then((res) => {
              if (res.status === 200) {
                localStorage.setItem("accessToken", res.data.accessToken);
                localStorage.setItem("refreshToken", res.data.refreshToken);

                originalRequest.headers[
                  "Authorization"
                ] = `Bearer ${res.data.accessToken}`;

                return axios(originalRequest);
              }
            })
            .catch(() => {
              //clear and reload
            });
        }
        return Promise.reject(error.response || error.message);
      }
    );

    try {
      const result = await axios({ url: baseUrl + url, method, data, params });
      return { data: result.data };
    } catch (axiosError) {
      let err = axiosError as AxiosError;
      return {
        error: {
          status: err.response?.status,
          data: err.response?.data || err.message,
        },
      };
    }
  };
export default customApiHandler;

Popularity 2/10 Helpfulness 8/10 Language whatever

Source: Grepper

Tags: api handler rtk-query whatever

Link to this answer
Share Copy Link

Contributed on Jan 17 2023

Mystic Dev

0 Answers Avg Quality 2/10

custom api handler rtk query

Contents

More Related Answers

custom api handler rtk query

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.