kuitos / axios-extensions

🍱 axios extensions lib, including throttle, cache, retry features etc...
MIT License
831 stars 49 forks source link

Vue with TypeSctipt with axios #49

Closed eng1n88r closed 5 years ago

eng1n88r commented 5 years ago

Having troubles with setting up caching with axios-extensions:

main.ts


import axios from 'axios';
import { cacheAdapterEnhancer } from 'axios-extensions';

axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL; axios.defaults.params = { client_id: process.env.VUE_APP_CLIENT_ID, client_secret: process.env.VUE_APP_CLIENT_SECRET }; axios.defaults.adapter = cacheAdapterEnhancer(axios.defaults.adapter);

Last line throws
> Argument of type 'AxiosAdapter | undefined' is not assignable to parameter of type 'AxiosAdapter'.
  Type 'undefined' is not assignable to type 'AxiosAdapter'.ts(2345)

And
> Service.ts

```TypeScript
import axios from 'axios';
import { IResponse } from './models/ResponseModel';

class Foo {
    private ACTION_URL: string = '/api/action';

    public async Bar(query: string): Promise<IResponse> {
        return await axios
            .get<IResponse>(this.ACTION_URL, {
                cache: false,
            })
            .then((response) => {
                return response.data;
            })
            .catch((error: any) => {
                return error;
            });
    }
}

Throws

Argument of type '{ cache: boolean; }' is not assignable to parameter of type 'AxiosRequestConfig'. Object literal may only specify known properties, and 'cache' does not exist in type 'AxiosRequestConfig'

eng1n88r commented 5 years ago

For the first type mismatch the following helped: Changing from:

axios.defaults.adapter = cacheAdapterEnhancer(axios.defaults.adapter);

To

axios.defaults.adapter = cacheAdapterEnhancer(axios.defaults.adapter!);

eng1n88r commented 5 years ago

For the second issue probably TS Module Augmentation could be used in typings, something like


declare module 'axios' {
    interface AxiosRequestConfig {
        cache?: boolean | true;
    }
}

But I'm not sure where this could be added, so we got it with npm install.

kuitos commented 5 years ago

closed via https://github.com/kuitos/axios-extensions/pull/50