DEV Community

Chris
Chris

Posted on

Property 'get' does not exist on type '() => AxiosCacheInstance'.

Hello,
New to typescript/react and looking for help with specifically this error and in general anything else that isn't right.

I have an axios api client called api-client.ts

//import axios, {CanceledError} from "axios";
import { default as axios } from 'axios'
import { setupCache } from 'axios-cache-interceptor';
import {    ReasonPhrases, StatusCodes, getReasonPhrase, getStatusCode, } from 'http-status-codes';
import { useNavigate } from "react-router-dom";

function apiClient() {

  const axiosInstance = axios.create({
    withCredentials: true,
    baseURL: "https://localhost:44372/api/v1/",
    headers: {
      "Content-type": "application/json"
    },
    timeout: 60 * 1000 // 1 minute.
    //disabled this to implement react-error-boundary (https://www.npmjs.com/package/react-error-boundary)
    /* ,
    validateStatus: function (status) {
      return status < StatusCodes.INTERNAL_SERVER_ERROR; //this allows axios to not treat status as error codes https://axios-http.com/docs/handling_errors
    } */
  });

  const navigate = useNavigate();

  axiosInstance.interceptors.response.use(
    (response) => {
      //debugger;
      return response;
    },
    (error) => {
      //debugger;
      switch (error.response.status) {
        case 401:
          // Handle Unauthorized calls here
          // Display an alert
          break;
        case 403:
          // Handle Unauthorized calls here
          // Display an alert
          //alert('403 Unauthorized');
          navigate("/status/404");
          break;
        case 500:
          // Handle 500 here
          // redirect
          break;
        // and so on..
      }

      if (error.response.status == 400) {
      }
      return Promise.reject(error);
    }
  );

  const apiClientCached = setupCache(axiosInstance);

  return apiClientCached;

}

export default apiClient;
Enter fullscreen mode Exit fullscreen mode

and i am importing this into my services as such (auth-service.ts)

//import {apiClientOld} from "./api-client-old";
import apiClient from "./api-client";

class AuthService {

      getLoggedInUser() {
        return apiClient.get(`/Authorization/GetLoggedInUser`);
      }

      getLoggedInUserRoles() {
        return apiClient.get(`/Authorization/GetSecurityAttributesAsync`);
      } 

      testAuthorized() {
        return apiClient.get('/Authorization/TestAuthorized');
      }

      testUnauthorized() {
        return apiClient.get('/Authorization/TestUnauthorized');
      }
}

export default new AuthService();
Enter fullscreen mode Exit fullscreen mode

the problem i am trying to solve is why the .get is throwing this exception

Property 'get' does not exist on type '() => AxiosCacheInstance'.
Enter fullscreen mode Exit fullscreen mode

Thank you in advance

Top comments (0)