How to export Axios.create in Typescript

Question

I have this working:

export default axios.create({
  baseURL: 'sample',
  headers: {
    'Content-Type': 'application/json',
  },
  transformRequest: [
    (data) => {
      return JSON.stringify(data);
    },
  ],
});

but the problem is once I edited to be like this:

const API = () => {
 const token = 'sample'

  const api: AxiosInstance = axios.create({
    baseURL: 'http://localhost:5000',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`,
    },
    transformRequest: [
      (data) => {
        return JSON.stringify(data);
      },
    ],
    transformResponse: [
      (data) => {
        return JSON.parse(data);
      },
    ],
  });

  return api;
};

export default API;

I want it to be an arrow function so I can access the token inside the function.

The problem is once I start to import the arrow function it will create an error not reading POST method

import API from 'apis';

API.post

Is there a way to implement it like an arrow function but will not lose the type definitions or create an error?

Keimeno · Accepted Answer · 2020-08-17T15:23:11.380

3

You don't loose any type definitions, but you're not using your import as a function.

If you write API().post it will work.

I would suggest doing the following:

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:5000',
  headers: {
    'Content-Type': 'application/json',
  },
  transformRequest: [
    (data) => {
      return JSON.stringify(data);
    },
  ],
  transformResponse: [
    (data) => {
      return JSON.parse(data);
    },
  ],
});

import store from '../store'

const listener = () => {
  const token = store.getState().token
  api.defaults.headers.common['Authorization'] = token;
}

store.subscribe(listener)

export default api;

You can access the token here as well.

edited Aug 17 '20 at 15:23

answered Aug 17 '20 at 15:09

Keimeno

2,512
1
13
34

the problem is there a way to access the store using useselector or connect in redux? – ajbee Aug 17 '20 at 15:12
Please refer to this SO answer https://stackoverflow.com/a/38480550/11098471, since js objects are passed by reference, you can simply edit properties in your instance. I'll update my example to make this possible – Keimeno Aug 17 '20 at 15:19

score 0 · Answer 2 · answered May 02 '22 at 22:06

Just because this is the question you find when you look for my problem, if you use require to import axios, to use the correct type definition you'll have to import ti like that:

const axios = require('axios').default
axios.create(...) // No error

This would give an error:

const axios = require('axios')
axios.create(...) // Error

How to export Axios.create in Typescript

2 Answers2