question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Axios request that are sent via `passthrough()` don't resolve

See original GitHub issue

Hi,

I have a problem with using miragejs and axios together. When I send a request to a mocked route which has a handler, everything is ok: promise is pending, requests gets sent and I get 200, promise resolves. But when I send a request to a not mocked route and passthrough is configured to let it pass, strange thing happens: promise is pending, request gets sent and I get 200 but the promise doesn’t resolve, it’s stuck in pending state. It only happens when I use axios and when I try to send a request to a route that is not mocked, fetch works just fine. Here’s a simple example: https://codesandbox.io/s/buggy-passthrough-example-o919g

Is it possible to somehow make miragejs work with Axios?

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:20
  • Comments:15

github_iconTop GitHub Comments

7reactions
kurdincommented, Jun 11, 2022

@cah-briangantzler @bbansalWolfPack

If anyone else having this problem, you can fix it by patching axios currently latest version 0.27.2 with this diff

diff --git a/node_modules/axios/lib/adapters/xhr.js b/node_modules/axios/lib/adapters/xhr.js
index 76d7e7a..7e11408 100644
--- a/node_modules/axios/lib/adapters/xhr.js
+++ b/node_modules/axios/lib/adapters/xhr.js
@@ -80,7 +80,7 @@ module.exports = function xhrAdapter(config) {
     if ('onloadend' in request) {
       // Use onloadend if available
       request.onloadend = onloadend;
-    } else {
+    }
       // Listen for ready state to emulate onloadend
       request.onreadystatechange = function handleLoad() {
         if (!request || request.readyState !== 4) {
@@ -98,7 +98,7 @@ module.exports = function xhrAdapter(config) {
         // so we should call onloadend on the next 'tick'
         setTimeout(onloadend);
       };
-    }
+

You can place this file to your project’s root /patches/axios+0.27.2.patch
do npm i patch-package and add to your package.json scripts section "postinstall": "patch-package"

That makes change permanent for local development but I would remove it on production along with disabling Mirage mock API server.

4reactions
xerardoocommented, Dec 8, 2021

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 ]

Read more comments on GitHub >

github_iconTop Results From Across the Web

MirageJs: cannot use axios if I call api with passthrough
In my app runs a mirage server with mock api and a "passthrough" at my true server. When I dispatch "loginThunk" thunk, it...
Read more >
axios-mock-adapter - npm
Start using axios-mock-adapter in your project by running `npm i ... passThrough() forwards the matched request over network.
Read more >
Network Requests - Cypress Documentation
How Cypress enables you to stub out the back end with cy.intercept() ... Since no responses are stubbed, that means your server has...
Read more >
Axios - Consuming Get Request Returns Promise Object
Hi, Having some difficulty consuming the data from this Axios get ... whole main function which is really just a pass through of...
Read more >
Mock Functions - Jest
Mock functions allow you to test the links between code by erasing the actual ... The class uses axios to call the API...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found