Getting to work with Gatsby

[danielholmes]

I've been trying to get msw to work with a gatsby site in development mode and just can't seem to make any headway. I've got a minimal example here showing the issue:

https://github.com/danielholmes/gatsby-msw-integration

In the example I try mocking 2 calls, one to a remote host (https://testserver/call1) and one to the gatsby site's host (/call2). I'm registering the msw worker in gatsby-browser.js -> onClientEntry but i've also tried registering in other places with the same result: the fetches are performed as if msw isn't registered.

// gatsby-browser.js
exports.onClientEntry = () => {
  require("./src/mock-services");
}

// src/mock-services.js
import {rest, setupWorker} from 'msw';

const worker = setupWorker(
  rest.get(
    'http://testserver/call1',
    async (req, res, ctx) => {
      return res(ctx.json("Success 1"))
    },
  ),
  rest.get(
    '/call2',
    async (req, res, ctx) => {
      return res(ctx.json("Success 2"))
    },
  )
)

worker.start({
  onUnhandledRequest(req) {
    console.error(
      'Found an unhandled %s request to %s',
      req.method,
      req.url.href,
    )
  },
});
console.info('Mock services started');

I have used msw before a few times with success with create react app and in test runners. I don't have a lot of experience with it though so I think it's most likely I'm making some newbie mistake. But I'm wondering if there's potentially some service worker within the gatsby develop environment that is intercepting the requests instead.

[danielholmes]

facepalm Newbie error it was.

I messed up the Integration Step in the main project where i was seeing this error, then forgot to do it entirely in this example repo. For anyone else who comes here, see:

https://mswjs.io/docs/getting-started/integrate/browser

For this very simple instructions.

[kettanaito]

I'm glad you got it resolved! 🎉 Great job.