axios-typescript exemple doen't work

[vcombey]

after copied in my project the useRequest fonction from the axios-typescript exemple typescript give me this error.
/app/src/useRequest.tsx

/app/src/useRequest.tsx
TypeScript error in /app/src/useRequest.tsx(30,69):
Argument of type '{ initialData: { status: number; statusText: string; config: GetRequest; headers: {}; data: Data; } | undefined; onError?: ((err: AxiosError<Error>, key: string, config: ConfigInterface<...>) => void) | undefined; ... 14 mor
orRetry?: ((err: AxiosError<...>, key: string, config: ConfigInterface<...>, reva...' is not assignable to parameter of type 'ConfigInterface<AxiosResponse<Data>, AxiosError<Error>, fetcherFn<AxiosResponse<Data>>>'.
  Types of property 'initialData' are incompatible.
    Type '{ status: number; statusText: string; config: GetRequest; headers: {}; data: Data; } | undefined' is not assignable to type 'AxiosResponse<Data> | undefined'.
      Type '{ status: number; statusText: string; config: GetRequest; headers: {}; data: Data; }' is not assignable to type 'AxiosResponse<Data>'.
        Types of property 'config' are incompatible.
          Type 'GetRequest' is not assignable to type 'AxiosRequestConfig'.
            Type 'null' is not assignable to type 'AxiosRequestConfig'.  TS2345

    28 |     AxiosResponse<Data>,
    29 |     AxiosError<Error>
  > 30 |   >(request && JSON.stringify(request), () => axios(request || {}), {
       |                                                                     ^
    31 |     ...config,
    32 |     initialData: initialData && {
    33 |       status: 200,

Im using axios 0.19.1 and swr 0.1.16.
Im totaly new to this ecosystem, and those errors looks scary for me. what is the problem, is that a version problem ?

[sudkumar]

@vcombey I don't see any problem with the implementation. The errors should not exists. I will first explain what the error is saying:

The axios's default export is a function that can be called with a AxiosRequestConfig type config object.

const config: AxiosRequestConfig = {}
axios(config)

This config CAN NOT BE null. In the implementation, at line number 30, we can see axios(request || {}). Here we have {} as the fallback option because our request is of type GetRequest = AxiosRequestConfig | null, but as mentioned earlier, axios does not accept the null values for it's configuration parameter. The implementation accepts the null value for the request because swr will not call the fetchMethod () => axios(request || null), if its first argument is null. see docs.

So why are you seeing this error. For that, we need to know the typescript version that you are using. I have tested it on typescript: v3.7..2 and it is working. see playground

npm list typescript

If you just want a solution, you can force a type cast as following

-   >(request && JSON.stringify(request), () => axios(request || {}), {
+   >(request && JSON.stringify(request), () => axios((request || {}) as any as AxiosRequestConfig), {

Hope it helps

[Svish]

Yeah, the code works fine, but depending on how strict you've configured Typescript and your eslint settings, you might get complaints because Axios does not accept null as config, and Typescript (correctly) believes it can be null. However, we know that it actually can't be null, because we know useSWR will only actually call it when it is not.

So, the fix, is simply to tell Typescript that we know it will not be null. Simplest way to do that is via the non-null operator(?), !, like this:

    () => axios(request!),

I made a PR to update the example with this tweak. 🙂

[vcombey]

Ok, thanks verry much for the explanations and the solution. Indeed I had configured typescript with "strict: false" to make him happy with the current example

[giovanniantonaccio]

I still get the same error mentioned on this issue. Any tips to fix this?

[sudkumar]

@giovanniantonaccio Can you please provide the error output and the source code for the fetch method?

[giovanniantonaccio]

@sudkumar I just coppied the exact same code from this example: https://github.com/zeit/swr/blob/master/examples/axios-typescript/libs/useRequest.ts

And I get this error in initialData:

TypeScript error in /Users/giovanniantonaccio/Dev/www/swrtest/src/useRequest.ts(40,7):
Type '{ status: number; statusText: string; config: GetRequest; headers: {}; data: Data; } | undefined' is not assignable to type 'AxiosResponse<Data> | undefined'.
  Type '{ status: number; statusText: string; config: GetRequest; headers: {}; data: Data; }' is not assignable to type 'AxiosResponse<Data>'.
    Types of property 'config' are incompatible.
      Type 'GetRequest' is not assignable to type 'AxiosRequestConfig'.
        Type 'null' is not assignable to type 'AxiosRequestConfig'.  TS2322

    38 |     {
    39 |       ...config,
  > 40 |       initialData: initialData && {
       |       ^
    41 |         status: 200,
    42 |         statusText: 'InitialData',
    43 |         config: request,

[sudkumar]

@giovanniantonaccio Looks like there IS an issue with the initialData.

https://github.com/zeit/swr/blob/bf01052c00078fdbd958cb038eb5d857c24a0605/examples/axios-typescript/libs/useRequest.ts#L40-L45

The type of initialData is AxiosResponse<Data> | undefined'. The undefined is getting resolved with the initialData && condition. When there is an initialData via props, AxiosResponse<Data> should be the response but the config key in the initialData has conflicts because it is assigned the value of request which can be null but null is not allowed in AxiosResponse for the config key.

A quick way to resolve this would be letting the typescript know that it's OKAY for config to be null in initialData which is OK for most of the cases.

initialData: initialData && {
.
-   config: request
+   config: request!
.
}

Hope it helps. Please feel free to ask if there are any queries.

[giovanniantonaccio]

Thanks @sudkumar, this solved the problem!