Leveraging Axios interceptors in Typescript

Question

Leveraging Axios interceptors in Typescript

How can I effectively utilize axios interceptors with TypeScript?

import axios, { AxiosRequestConfig, AxiosInstance } from 'axios'

HTTP.interceptors.request.use((config: AxiosRequestConfig) => config)

For instance, when creating an axios instance, default configuration is set up:

const conf: AxiosRequestConfig = {
  baseURL: process.env.VUE_APP_API_URL
}

const HTTP: AxiosInstance = axios.create(conf)

However, when attempting to use interceptors with customized headers:

HTTP.interceptors.request.use((config: AxiosRequestConfig) =>{
  headers: {
    'x-projectkey': 1234
  }
})

The above approach does not produce the desired outcome:

Argument of type '(config: AxiosRequestConfig) => void' is not assignable to parameter of type '(value: AxiosRequestConfig) => AxiosRequestConfig | Promise<AxiosRequestConfig>'

As a newcomer to TypeScript, this issue has me puzzled.

typescript axios

Answer 1

Answer №1

Looking at the definition of AxiosRequestConfig, it is clear that all parameters, including axios headers, are optional:

interface AxiosRequestConfig<D = any> {
  url?: string;
  method?: Method | string;
  baseURL?: string;
  timeout?: number;
  timeoutErrorMessage?: string;
  withCredentials?: boolean;
  // ... omitted 
}

When setting up an axiosInstance and configuring it, the returned config will be applied to the instance for proper configuration:

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use((config) => {
  if (config.headers) { // <- checking for headers 
    config.headers["x-projectkey"] = 1234; // no errors
  }
  config.withCredentials = true; // to include credentials, this should be outside of the "if" block 
  return config;
});

Subsequently, every request made using the axiosInstance will automatically include the added x-projectkey header and credentials:

axiosInstance.get("url");

Answer 2

Looking at the definition of AxiosRequestConfig, it is clear that all parameters, including axios headers, are optional:

interface AxiosRequestConfig<D = any> {
  url?: string;
  method?: Method | string;
  baseURL?: string;
  timeout?: number;
  timeoutErrorMessage?: string;
  withCredentials?: boolean;
  // ... omitted 
}

When setting up an axiosInstance and configuring it, the returned config will be applied to the instance for proper configuration:

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use((config) => {
  if (config.headers) { // <- checking for headers 
    config.headers["x-projectkey"] = 1234; // no errors
  }
  config.withCredentials = true; // to include credentials, this should be outside of the "if" block 
  return config;
});

Subsequently, every request made using the axiosInstance will automatically include the added x-projectkey header and credentials:

axiosInstance.get("url");

Answer 3

Answer №2

Here is an example configuration that you can use:

HTTP.interceptors.request.use((config: AxiosRequestConfig) => {
  config.headers['x-projectkey'] = 1234

  return config
})

Enjoy customizing your settings.

Answer 4

Here is an example configuration that you can use:

HTTP.interceptors.request.use((config: AxiosRequestConfig) => {
  config.headers['x-projectkey'] = 1234

  return config
})

Enjoy customizing your settings.

Answer 5

Answer №3

If you encounter the error mentioned, it is likely due to a missing return statement in your code. To resolve this issue, you can use the following approach:

HTTP.interceptors.request.use((config: AxiosRequestConfig) =>({
  headers: {
    'x-projectkey': 1234
  }
}))

Alternatively, you can include the return keyword as shown below:

HTTP.interceptors.request.use((config: AxiosRequestConfig) =>{
  return {
    headers: {
      'x-projectkey': 1234
    }
  }
})

Answer 6

If you encounter the error mentioned, it is likely due to a missing return statement in your code. To resolve this issue, you can use the following approach:

HTTP.interceptors.request.use((config: AxiosRequestConfig) =>({
  headers: {
    'x-projectkey': 1234
  }
}))

Alternatively, you can include the return keyword as shown below:

HTTP.interceptors.request.use((config: AxiosRequestConfig) =>{
  return {
    headers: {
      'x-projectkey': 1234
    }
  }
})

Answer 7

Answer №4

Thank you for your recommendations. However, the issue I encountered was not related to that. I had already returned the config as required. The problem turned out to be much simpler than anticipated. I found the solution by setting the defaultReplyHeaders while creating a nock scope.

I also made changes to how the OPTIONS request was intercepted.

This is how it now works:

import { describe, expect, it } from '@jest/globals';
import nock from 'nock';
import type { Config } from './dependency-injection/config';
import type { ChooseApiRequest } from './api/contract/choose/ChooseApiRequest';
import type { Choice, ChooseApiResponse } from './api/contract/choose/ChooseApiResponse';
import { dy } from './services';

// Code continues here...

Answer 8

Thank you for your recommendations. However, the issue I encountered was not related to that. I had already returned the config as required. The problem turned out to be much simpler than anticipated. I found the solution by setting the defaultReplyHeaders while creating a nock scope.

I also made changes to how the OPTIONS request was intercepted.

This is how it now works:

import { describe, expect, it } from '@jest/globals';
import nock from 'nock';
import type { Config } from './dependency-injection/config';
import type { ChooseApiRequest } from './api/contract/choose/ChooseApiRequest';
import type { Choice, ChooseApiResponse } from './api/contract/choose/ChooseApiResponse';
import { dy } from './services';

// Code continues here...

Answer 9

Answer №5

The issue lies in the fact that your code has a void return, as indicated by the error message. The snippet you provided is:

HTTP.interceptors.request.use((config: AxiosRequestConfig) =>{
  headers: {
    'x-projectkey': 1234
  }
})

The { following the => is being interpreted as the beginning of a function body. Therefore, you have a function with an invalid statement. As suggested by @miguelcg in their response on Stack Overflow, you should enclose the object in parentheses to directly return it or use return.

It's also advisable to set headers ON config instead of solely returning an object with your headers setting. Otherwise, you risk overriding any other configurations.

A recommended approach would be:

HTTP.interceptors.request.use((config: AxiosRequestConfig) => ({
  ...config,
  headers: {
    ...config.headers,
    'x-projectkey': 1234
  }
}))

This method preserves the rest of the configuration and does not replace any existing headers (unless that was the intention).

Alternatively, stick with the original structure and modify the code like this:

HTTP.interceptors.request.use((config: AxiosRequestConfig) => {
  if (config.headers) {
    config.headers['x-projectkey'] = 1234
  } else {
    config.headers = {
      'x-projectkey': 1234
    }
  }
  return config
})

Answer 10

The issue lies in the fact that your code has a void return, as indicated by the error message. The snippet you provided is:

HTTP.interceptors.request.use((config: AxiosRequestConfig) =>{
  headers: {
    'x-projectkey': 1234
  }
})

The { following the => is being interpreted as the beginning of a function body. Therefore, you have a function with an invalid statement. As suggested by @miguelcg in their response on Stack Overflow, you should enclose the object in parentheses to directly return it or use return.

It's also advisable to set headers ON config instead of solely returning an object with your headers setting. Otherwise, you risk overriding any other configurations.

A recommended approach would be:

HTTP.interceptors.request.use((config: AxiosRequestConfig) => ({
  ...config,
  headers: {
    ...config.headers,
    'x-projectkey': 1234
  }
}))

This method preserves the rest of the configuration and does not replace any existing headers (unless that was the intention).

Alternatively, stick with the original structure and modify the code like this:

HTTP.interceptors.request.use((config: AxiosRequestConfig) => {
  if (config.headers) {
    config.headers['x-projectkey'] = 1234
  } else {
    config.headers = {
      'x-projectkey': 1234
    }
  }
  return config
})

Leveraging Axios interceptors in Typescript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Testing NestJS Global ModulesExplore how to efficiently use NestJS global

Having trouble importing an object from another file in Typescript?

Why is it possible in Angular Typescript to assign a Promise<ClassA> to an object of ClassA?

Encountering type errors in NextJS with TypeScript

Creating image paths for a list of items in reactjs can be achieved by mapping through the list

How can Angular developers properly implement token refreshing in their applications?

Solving the error message "Cannot find module '@angular/router/src/utils/collection' or its corresponding type declaration"

What is the best approach to creating a Typescript library that offers maximal compatibility for a wide range

Error: The code is unable to access the '0' property of an undefined variable, but it is functioning properly

Utilize a Typescript library within a separate Typescript library

What is the process for setting the active state for HtmlBodyElement?

selective ancestor label Angular 8

The specified function is not recognized within the HTMLButtonElement's onclick event in Angular 4

When a URL is triggered via a browser notification in Angular 2, the target component ceases to function properly

How can I execute a TypeScript / TSX file from a Next.js project in the terminal using ts-node?

Using Svelte with Vite: Unable to import the Writable<T> interface for writable store in TypeScript

React encountering a 400 Bad Request Error with Axios

Is it possible to spread an empty array in JavaScript?

Having difficulty storing duplicate requests that are crucial for various services/components

Converting a string into a Date in Typescript while disregarding the timezone