Mock Service Worker not intercepting requests in loader

[rmiller61]

What is the location of your example repository?

https://github.com/rmiller61/hydrogen-oxygen-msw

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

@shopify/remix-oxygen 2.0.2, @shopify/hydrogen 2023.10.3

What version of Remix are you using?

2.1.0

Steps to Reproduce

1. Clone https://github.com/rmiller61/hydrogen-oxygen-msw.git
2. Ensure you are using Node 18.8.0 or higher so you can use --import in NODE_OPTIONS
3. npm run dev

Expected Behavior

MSW should intercept requests (that match the handlers specified in tests/mocks/handlers.ts) on the server so their responses can be mocked.

I have a GraphQL query named "Header" defined in my root.tsx that should be intercepted by MSW.

Actual Behavior

MSW doesn't pick up any requests in the loader functions. This is evident by the lack of lifecycle events logged to the console, as well as the responses themselves. It does, however, intercept requests outside the loader, such as the initial fetch request Hydrogen sends to pull my environment variables from Shopify. It's specifically the requests in the loader.

It's worth noting that MSW can't intercept 3rd party APIs, either. I initially thought this might be a problem with the Storefront client, but it appears to be any fetch request inside the loader.

[frandiox]

Try running in the new worker environment: h2 dev --worker.

If I add the following to the top of the server.ts file of a new project:

import {setupWorker} from 'msw/browser';

const worker = setupWorker();
worker.start();
worker.events.on('request:start', ({request}) => {
  console.log('-----> MSW intercepted', request.method, request.url);
});

I get these logs:

[MSW] Mocking enabled (fallback mode).
  Documentation: https://mswjs.io/docs
  Found an issue? https://github.com/mswjs/msw/issues

-----> MSW intercepted POST https://mock.shop/api

.......
[MSW] Warning: intercepted a request without a matching request handler:

  • query CartQuery (POST https://mock.shop/api)

If you still wish to intercept this unhandled request, please create a request handler for it.
Read more: https://mswjs.io/docs/getting-started/mocks
[MSW] Warning: intercepted a request without a matching request handler:

  • query FeaturedCollection (POST https://mock.shop/api)

If you still wish to intercept this unhandled request, please create a request handler for it.
Read more: https://mswjs.io/docs/getting-started/mocks
[MSW] Warning: intercepted a request without a matching request handler:

  • query Footer (POST https://mock.shop/api)

If you still wish to intercept this unhandled request, please create a request handler for it.
Read more: https://mswjs.io/docs/getting-started/mocks
[MSW] Warning: intercepted a request without a matching request handler:

  • query Header (POST https://mock.shop/api)

If you still wish to intercept this unhandled request, please create a request handler for it.
Read more: https://mswjs.io/docs/getting-started/mocks
[MSW] Warning: intercepted a request without a matching request handler:

  • query RecommendedProducts (POST https://mock.shop/api)

If you still wish to intercept this unhandled request, please create a request handler for it.
Read more: https://mswjs.io/docs/getting-started/mocks

Which means MSW is working, right?

[rmiller61]

@frandiox thank you - this actually does work. Very strange, though. Didn't even occur to me to use the browser package since I'm trying to intercept on the server. But all's well that ends well I guess. I'll mark this as closed.