Ways to categorize axios call headers

Question

Ways to categorize axios call headers

I'm encountering an issue while attempting to send a request via Axios and specifying request headers using types. Unfortunately, I am running into an error.

To address this, I have defined an interface called Headers and utilized it to declare a variable this._apiHeaders.

Below is the error message:

The "Headers" type cannot be assigned to the "AxiosRequestHeaders" type.
There is no index signature for the "string" type in the "Headers" type (ts2322)

interface Headers {
    'X-Parse-Application-Id': string,
    'X-Parse-REST-API-Key': string
}

const response: ITest = await axios.get(
  this.formCorrectApiUrl(Endpoints.classes, DBObjectName),
  {
    headers: this._apiHeaders    // This is where the error occurs
  }
);

I would appreciate any assistance in resolving this error and understanding why it is happening.

javascript typescript axios

Answer 1

Answer №1

To implement this, you can use the "extends" keyword.

interface Headers extends AxiosRequestHeaders {
  'X-Parse-Application-Id': string
  'X-Parse-REST-API-Key': string
}

However, it is also recommended to make the ability to create fields optional.

export type NonUndefined<T, E = undefined> = Pick<
  T,
  {
    [Prop in keyof T]: T[Prop] extends E ? never : Prop
  }[keyof T]
>

interface Headers extends AxiosRequestHeaders {
  'X-Parse-Application-Id': string
  'X-Parse-REST-API-Key': string
}

type AxiosHeaders = NonUndefined<Headers>

const headers: AxiosHeaders = {
  'X-Parse-Application-Id': 'test',
}

Answer 2

To implement this, you can use the "extends" keyword.

interface Headers extends AxiosRequestHeaders {
  'X-Parse-Application-Id': string
  'X-Parse-REST-API-Key': string
}

However, it is also recommended to make the ability to create fields optional.

export type NonUndefined<T, E = undefined> = Pick<
  T,
  {
    [Prop in keyof T]: T[Prop] extends E ? never : Prop
  }[keyof T]
>

interface Headers extends AxiosRequestHeaders {
  'X-Parse-Application-Id': string
  'X-Parse-REST-API-Key': string
}

type AxiosHeaders = NonUndefined<Headers>

const headers: AxiosHeaders = {
  'X-Parse-Application-Id': 'test',
}

Answer 3

Answer №2

Give this a shot

const fetch = require('node-fetch');

await fetch(url, { headers: this.headers })

Answer 4

Give this a shot

const fetch = require('node-fetch');

await fetch(url, { headers: this.headers })

Ways to categorize axios call headers

Answer №1

Answer №2

Similar questions

How to eliminate excess white space on the right side in Bootstrap 4

Encountering Compilation Error When Using RxJS Observable with Angular 6 and Swagger Codegen

How to showcase information stored in Firebase Realtime Database within an Ionic application

Encountering an unknown parse error while working with Typescript, Vue, vue-property-decorator, and VSCode

Exploring the Observable object within Angular

Error message stating 'Module not found' is displaying in the browser console

Once the image is loaded, cropped, and displayed on the canvas, what is the best way to implement image rotation functionality for the user before converting it to base64?

Unpredictable order of replies retrieved using $http.get

What is the best way to update an existing cookie value using angularjs?

Two Ajax Requests Simultaneously

Using Vue.js, perform calculations on various fields within an array of objects generated by the v-for directive

Issue with background opacity not functioning properly in Internet Explorer 8

Why is it that using e.preventDefault() does not prevent the link from being followed?

Creating a function in TypeScript that returns a string containing a newline character

ACTUAL preventing a component from losing its focus

Display an alert when no matches are found in autocomplete suggestions

Search through an array of objects that contains nested arrays of objects with various property names and values

javascript utilizing underscorejs to categorize and aggregate information

Updating Mysql through REST API/JWT using PUT method is not possible

What occurs when multiple HTML tags are assigned the same string as their ID attribute value?