How to deal with requests made before msw has been activated?

If I have a situation like this:

start('/msw.js')

fetch('/something-that-should-be-mocked')

MSW will not be registered as ready until after the request has already been forwarded along. What do you recommend for situations like this where the app is trying to make requests immediately?

[kentcdodds]

This should be re-opened. The promise returned by start can resolve before the service worker is actually ready.

You can observe this in my app which has MSW deployed:

1. https://5e7d73d0938fb965a65bbdf3--the-react-bookshelf.netlify.app
2. Register with username abc and password 123
3. Do a “hard refresh” via <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>r</kbd>
4. Notice error in the app and console: api-client.js:20 GET https://bookshelf.jk/api/me net::ERR_NAME_NOT_RESOLVED

I’ve been able to workaround this by adding a timeout of 100ms before making any requests. I need some way to wait until the service worker has not only installed but is also ready to start proxying requests.

[kettanaito]

Hey, @mitchconquer. Please, don’t worry, this format is perfectly fine. It’s my bad, I haven’t yet established a way to bootstrap scenarios with MSW in a sandbox form.

Regarding the issue, I can recommend to store the start function itself, rather than its return statement. In case there’s some dark magic in place, it’ll help us ensure that we call the start() at the expected time.

// mocks.js
const worker = setupWorker(...)
window.__mswStart = worker.start // notice the reference

// apiClient.js
async function apiClient() {
  if (__DEV__) {
    await window.__mswStart()
  }
}

I’d be surprised if this didn’t work. I have a few integration tests that rely on awaiting the start() Promise, so such setup should be a valid one.

Let me know if this suggestion is of any help. I’d prefer if you don’t have to introduce timeouts to await the registration.

Going back to sandboxing examples, I’ve tried to establish a template in Codesandbox, yet for some reason it fails to register the worker. To be more precise, it ignores the registration attempt, when I reference the service worker file relatively. If I give it an absolute URL (that includes the sandbox URL), it registers just fine. Haven’t figured a reliable sandbox template just yet.