Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript type error for Axios 1.2.22 & 1.3.4 #5578

Open
DonatienD opened this issue Mar 3, 2023 · 2 comments
Open

Typescript type error for Axios 1.2.22 & 1.3.4 #5578

DonatienD opened this issue Mar 3, 2023 · 2 comments

Comments

@DonatienD
Copy link

Describe the bug

After upgrading from 1.2.0 to 1.2.2 or 1.3.4 (issue experienced with both versions), I'm experiencing two typing issues:

  • The typing is broken on response.headers.
    Error:
     TS2345: Argument of type 'AxiosResponseHeaders | Partial<RawAxiosHeaders & { Server: AxiosHeaderValue; "Content-Type": AxiosHeaderValue; "Content-Length": AxiosHeaderValue; "Cache-Control": AxiosHeaderValue; "Content-Encoding": AxiosHeaderValue; } & { ...; }>' is not assignable to parameter of type 'AxiosResponseHeaders | Partial<Record<string, string> & { 'set-cookie'?: string[] | undefined; }>'.
       Type 'Partial<RawAxiosHeaders & { Server: AxiosHeaderValue; "Content-Type": AxiosHeaderValue; "Content-Length": AxiosHeaderValue; "Cache-Control": AxiosHeaderValue; "Content-Encoding": AxiosHeaderValue; } & { ...; }>' is not assignable to type 'AxiosResponseHeaders | Partial<Record<string, string> & { 'set-cookie'?: string[] | undefined; }>'.
         Type 'Partial<RawAxiosHeaders & { Server: AxiosHeaderValue; "Content-Type": AxiosHeaderValue; "Content-Length": AxiosHeaderValue; "Cache-Control": AxiosHeaderValue; "Content-Encoding": AxiosHeaderValue; } & { ...; }>' is not assignable to type 'AxiosResponseHeaders'.
           Type 'Partial<RawAxiosHeaders & { Server: AxiosHeaderValue; "Content-Type": AxiosHeaderValue; "Content-Length": AxiosHeaderValue; "Cache-Control": AxiosHeaderValue; "Content-Encoding": AxiosHeaderValue; } & { ...; }>' is missing the following properties from type 'AxiosHeaders': set, get, has, delete, and 23 more.```
    
    
  • The typing is broken on
    request => ({
        ...request,
        headers: {
          ...request.headers,
          'X-CSRF-Token': getCSRFToken(),
        },
      })
    Error:
    TS2345: Argument of type '(request: InternalAxiosRequestConfig<any>) => { headers: { 'X-CSRF-Token': string | undefined; "Content-Length"?: AxiosHeaderValue | undefined; ... 4 more ...; 'Content-Type'?: ContentType | undefined; }; ... 35 more ...; formSerializer?: FormSerializerOptions | undefined; }' is not assignable to parameter of type '(value: InternalAxiosRequestConfig<any>) => InternalAxiosRequestConfig<any> | Promise<InternalAxiosRequestConfig<any>>'.
      Type '{ headers: { 'X-CSRF-Token': string | undefined; "Content-Length"?: AxiosHeaderValue | undefined; "Content-Encoding"?: AxiosHeaderValue | undefined; Accept?: AxiosHeaderValue | undefined; "User-Agent"?: AxiosHeaderValue | undefined; Authorization?: AxiosHeaderValue | undefined; 'Content-Type'?: ContentType | undefin...' is not assignable to type 'InternalAxiosRequestConfig<any> | Promise<InternalAxiosRequestConfig<any>>'.
        Type '{ headers: { 'X-CSRF-Token': string | undefined; "Content-Length"?: AxiosHeaderValue | undefined; "Content-Encoding"?: AxiosHeaderValue | undefined; Accept?: AxiosHeaderValue | undefined; "User-Agent"?: AxiosHeaderValue | undefined; Authorization?: AxiosHeaderValue | undefined; 'Content-Type'?: ContentType | undefin...' is not assignable to type 'InternalAxiosRequestConfig<any>'.
          Types of property 'headers' are incompatible.
            Type '{ 'X-CSRF-Token': string | undefined; "Content-Length"?: AxiosHeaderValue | undefined; "Content-Encoding"?: AxiosHeaderValue | undefined; Accept?: AxiosHeaderValue | undefined; "User-Agent"?: AxiosHeaderValue | undefined; Authorization?: AxiosHeaderValue | undefined; 'Content-Type'?: ContentType | undefined; }' is not assignable to type 'AxiosRequestHeaders'.
              Type '{ 'X-CSRF-Token': string | undefined; "Content-Length"?: AxiosHeaderValue | undefined; "Content-Encoding"?: AxiosHeaderValue | undefined; Accept?: AxiosHeaderValue | undefined; "User-Agent"?: AxiosHeaderValue | undefined; Authorization?: AxiosHeaderValue | undefined; 'Content-Type'?: ContentType | undefined; }' is missing the following properties from type 'AxiosHeaders': set, get, has, delete, and 23 more.
    

To Reproduce

No response

Code snippet

import axios, { AxiosResponseHeaders } from 'axios';

import LinkHeader from 'http-link-header';
import reduce from 'lodash/reduce';

const apiClient = axios.create({
  baseURL: '/',
});

const formatPagination = (
  headers:
    | AxiosResponseHeaders
    | Partial<Record<string, string> & { 'set-cookie'?: string[] | undefined }>,
) => {
  if (headers?.link) {
    const parsedLink = LinkHeader.parse(headers.link);
    return {
      pagination: reduce(
        parsedLink.refs,
        (acc, link) => ({ ...acc, [link.rel]: link.uri ? parseInt(link.uri, 10) : null }),
        {},
      ),
      total: parseInt(headers['x-total-count'] || '0', 10),
    };
  }
  return undefined;
};

const getCSRFToken = () => {
  const element = document.querySelector('meta[name=csrf-token]') as HTMLMetaElement;
  if (element) {
    return element.content;
  }
  return undefined;
};

apiClient.interceptors.response.use(
  response =>
    ({
      data: response.data,
      ...formatPagination(response.headers),
    } as any),
  Promise.reject,
);

apiClient.interceptors.request.use(
  request => ({
    ...request,
    headers: {
      ...request.headers,
      'X-CSRF-Token': getCSRFToken(),
    },
  }),
  Promise.reject,
);

export default apiClient;

Expected behavior

No response

Axios Version

Tried with both 1.2.22 and 1.3.4

Adapter Version

No response

Browser

Chrome

Browser Version

No response

Node.js Version

16.13

OS

macOS 13.2.1

Additional Library Versions

No response

Additional context/Screenshots

No response

@DonatienD DonatienD changed the title Typescript type error on for Axios 1.2.22 & 1.3.4 Typescript type error for Axios 1.2.22 & 1.3.4 Mar 3, 2023
@JulienGaudet
Copy link

Hi, I got the exact same error in my project...

For now the only 'fix' I find is to set the var to any, which s*cks btw.

Any other trick to REALLY fix this issue ?

@papidb
Copy link

papidb commented Oct 1, 2023

Hey @DonatienD this should resolve your issue

apiClient.interceptors.request.use(function (config) {
    const token = getCSRFToken();
    const newConfig = Object.assign({}, config, {
        headers: {
            'X-CSRF-Token': token,
            ...config.headers,
        },
    });
    return newConfig;
}, Promise.reject);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants