Make it possible to mock client-side API calls

[janhesters]

The mocks directory currently only mocks server side requests.

It is intended to enable local development without internet access.

However, if you need to do API requests on the client-side, we loose this ability.

Context

One valid reason for having to do client-side API requests - even when using Remix - can be if you have large file uploads.

Using multipart form data forces you to save the file in memory on the server at least temporarily. If you have many people uploading medium-size files, or one person uploading a large file, it can blow up your Fly.io instance.

Therefore, you'll need to directly upload, e.g. to S3 from the client.

I'm sure there are more use cases, but this one is fresh on my mind since I ran into it on the weekend.

[kentcdodds]

Understandable. You can stream straight to S3 without requiring loading the whole file in memory, but I do still think it could be useful to have an example of using MSW in the client. Would you like to put an example together?

We need to find a good way to manage these examples, but for now could you make a repository with that setup?

[janhesters]

You can stream straight to S3 without requiring loading the whole file in memory

Hmm, I wasn't able to do that with the new AWS SDK V3.

They always gave me memory spikes when I use composeUploadHandlers with multipart form data.

In fact, my current implementation has memory leaks, that I just can't seem to fix 😕 Which is why I'm switching to client side uploads in my app.

Would you like to put an example together?

Yes!

But I'm still figuring out how to do that best with Remix.

If you @kentcdodds have any ideas about how to approach this with Remix, would you kindly point me to that direction please?

---

Edit:

I found this repo: https://github.com/kettanaito/msw-with-remix/blob/main/app/entry.client.tsx

They use environment variables to run MSW, so its a little different from the approach you used - at least on the server - with Binode.

[kentcdodds]

That approach looks pretty good to me. We're using the MOCKS environment variable instead. To access that in the client, we'll want to set that on the ENV global (check utils/env.server.ts). We don't need binode with the way we're doing things.

This is the sort of thing we'll want an example for rather than having it built into the starter because I really don't think it's worth having MSW setup in the client for most people.

[janhesters]

@kentcdodds Would you like this example to be included in the epic stack? If yes, how?

[kentcdodds]

I think we'll have a docs page for examples that will link to other repositories

[kentcdodds]

I have created that doc here: https://github.com/epicweb-dev/epic-stack/blob/main/docs/examples.md

I'm going to close this issue since it's not a bug with the stack. I definitely would still love to have an example for this though. Thanks!

[janhesters]

@kentcdodds would you allow examples in other Remix stacks, or does it have to be a fork of the Epic Stack?

[kentcdodds]

It's easiest for people to follow the example if they can look at the commit history of your example to see what changes you made to the epic stack to make it work. I only plan on adding Epic Stack-specific examples to the examples page.