9

I have an app in react with a slice and a thunk. I use @reduxjs/toolkit and I created slice with "createSlice" api and thunk with "createAsyncThunk".

My thunk:

export const loginThunk = createAsyncThunk('login/local', async (loginData: LoginData) => {

    const {username, password} = loginData;
    
    const l = await axios.post(`${BASE_URL}_login/local`, {username, password}, {
        headers: {'Content-Type': 'application/json'}
    })
    return l.data;
})

In my app runs a mirage server with mock api and a "passthrough" at my true server.

When I dispatch "loginThunk" thunk, it runs the "loginThunk.pending" case in my reducer and stop.

Never it arrives to fulfilled or rejected.

If I dispatch "loginThunk" thunk, without mirage server running, it works.

If I dispatch "loginThunk" thunk, without mirage server running, but I use "fetch" instead axios, it works.

It seems is a problem between axios and mirageJs passthrough.

Any ideas??

Thank you so much

foralobo
  • 3,947
  • 5
  • 18
  • 17
  • 3
    Hi @foralobo, did you find a fix? I am having the same issue, and my debugging showed me that if we use axios, the response is messed up by pretender.js, that is used by miragejs to hijack calls, but if i do a fetch, passthrough works as expected. – Leth Oct 20 '21 at 07:31
  • Same here. Looks like the issue was introduced with axios 0.21.2 – Miguel Nov 29 '21 at 19:59
  • I have the same problem on project Vue CLI with MirageJS API. In Network tab of Chrome I see response of my request but with console.log(response) in console tab there is no Response from axios function. Fetch works perfectly. When I turn off mirage Js axios works fine too. So I just install previous version of axios (v. 0.20) and it helped. I know that this is not so good solution. I plan to upgrade axios version lately when real api of my project will be ready. – Galina Dec 27 '21 at 10:31
  • I do have the same issue, I downgraded axios as in the answer below – nerdess Feb 15 '22 at 10:36

2 Answers2

3

Turns out the problem stems from the xhr adapter that was changed in axios 0.21.2. The handler request.onreadystatechange is not added to the request anymore (XMLHttpRequest seems to be redefined when you start your mirageJS server).

The solution is to create your own adapter - basically copy lib/adapters/xhr.js and make sure that the else branch of the if statement goes through - and use it in your axios config.

Miguel
  • 150
  • 2
  • 10
  • Hi! I am running in the same issue, can you give an example of a working custom adapter? – Paolo Donato Navarro Jan 03 '22 at 18:02
  • 1
    I just reused the original source [xhr](https://github.com/axios/axios/blob/master/lib/adapters/xhr.js) and made sure `request.onreadystatechange = function handleLoad ()` is set: basically pulling the branch from [line 83](https://github.com/axios/axios/blob/master/lib/adapters/xhr.js#L83) onward to outside of the `if`. Then, make sure to set the `config.adapter = customAdapter` when using ;mirageJS' to this `service = axios.create(config)`. – Miguel Jan 05 '22 at 21:05
2

I fix the issue downgrading axios to 0.21.0 and works with miragejs: 0.1.41, 0.1.42.0, 0.1.43.0

Omar Borji
  • 223
  • 2
  • 9
  • The problem with that approach is that you'll get this [vulnerability](https://snyk.io/vuln/npm:axios) – Miguel Jan 26 '22 at 13:34