Add an example to docs showcasing how to mock API endpoints

[schalkneethling]

Is your feature request related to a problem? Please describe. I would find it incredibly useful to be able to intercept and mock responses for API calls. When some components rely on external data for rendering or when submitting a form, being able to replicate this during development and presentation mode will save time and avoid having to:

1. Have the API available from day 1
2. Avoid the need to run the full stack from day 1

Both of these could potentially speed up development time, but also allow Miyagi to be used in presentation mode without depending on an external service.

Describe the solution you'd like I was thinking that integrating something like Mock Service Worker (MSW) could work really well. https://mswjs.io/

This service allows one to integrate in the browser or in Nodejs. The reason I am most interested in the browser integration is because it could then potentially be used in development mode and presentation mode. The latter could also be useful when Miyagi is embedded in something like Zeroheight.

Describe alternatives you've considered A network layer interception service but, here again, we are now depending on something in addition to Miyagi. Not always a bad thing, but in this case it might be better to have this integrated.

[mgrsskls]

Thanks, @schalkneethling! I'm not sure I can follow completely… can you give me an example what you would need this for? For example, a form submit does an ajax request and you want the response to be mocked? Or you render something based on an API response? Is that correct?

So, what you want miyagi to do is to provide API endpoints that return some mock responses defined by you?

[schalkneethling]

So, what you want miyagi to do is to provide API endpoints that return some mock responses defined by you?

Exactly, but it is configurable using something like https://mswjs.io/

• https://mswjs.io/docs/basics/intercepting-requests
• https://mswjs.io/docs/basics/mocking-responses
• https://mswjs.io/docs/network-behavior/rest
• https://mswjs.io/docs/integrations/browser

[mgrsskls]

If I am not missing something fundamental, I think this should work out of the box? I will try to set this up in an example repository.

[mgrsskls]

There you go using the browser integration: https://github.com/mgrsskls/miyagi-msw

Is that sufficient?

[schalkneethling]

There you go using the browser integration: https://github.com/mgrsskls/miyagi-msw

Is that sufficient?

This looks good. Can we make it configurable? We can also include it in presentation mode should that make sense for the use case. Something like:

serviceWorker: {
  mocksIndex: "src/mocks/browser.js"
}

We can then choose to generate the service worker and make it part of the project based on the presence of this entry in the config. The alternative is to add this to the documentation as a solution for mocking HTTP(s) calls, and provide instructions, but leave the bulk of adding MSW up to the end user.

I will try this out based on your example in one of my existing projects and let you know. Thanks!

[mgrsskls]

At the moment it is basically really just added in the same way any other JS file is added to your project. So, yes, it is configurable in the way that msw can be configured. But not via the miyagi config.

I think I would want to leave it out of miyagi as it is very easy to set this up manually and I don't want to bloat up miyagi too much. I would add a proper explanation to the docs though.

[schalkneethling]

@mgrsskls I took a bit more doing, but I have it working in a CircleDot project 🙌

[mgrsskls]

@schalkneethling Great! I will rename the issue and use it to add an example to the docs.

[mgrsskls]

Hey @schalkneethling, I created a recipe in the docs in https://github.com/miyagi-dev/miyagi/pull/370. Can you review that? I did not want to describe too much how the msw setup works as that might change on their end.