Grpc-web

[Jeffhabs]

Does this work with grpc-web?

If not, would it be possible to add to the road map?

[kettanaito]

Hey, @Jeffhabs.

Mock Service Worker will work with any library that issues request that can be intercepted by the Service Worker's fetch event. This includes most (if not all) requests, regardless of the protocol or request issuing library.

There are a few exceptions at the moment:

• No support for WebSockets (Support mocking WebSocket APIs #156).
• No support for XMLHttpRequest in Firefox (FF officially deprecated XHR support in Service Worker API).

Regarding grpc, I haven't tried using it with MSW, but I'm quite confident it will work just fine. If you have an opportunity, just try using them together, and let me know how it goes.

You can reference the Getting started tutorial to set up MSW in your app.

[Jeffhabs]

I was successfully able to get the mock to register. However now I'm facing the issue with the response type. Since we are using proto messages as the response types, I'm not sure how to facilitate that.

import { setupWorker, rest } from 'msw';
import { GetHuntGroupPauseCodesRes } from 'protos/api/v0alpha/p3api_pb';

const hgpRes = new GetHuntGroupPauseCodesRes();
hgpRes.setName('Pause Codes');
hgpRes.setDescription('My Pause Codes');
hgpRes.setPauseCodesList(['Lunch', 'Bathroom', 'Lazy']);

const mocks = [
  rest.post(
    '/GetHuntGroupPauseCodes',
    (_req, res, ctx) => {
      return res(ctx.body(hgpRes));
    }
  ),
];

const worker = setupWorker(...mocks);
worker.start();

My response in the network tab just looks like [object object]

Is this related to serialization issue #221?

[kettanaito]

Thanks for trying that out! The concept looks amazing.

Could you try using ctx.json(hgpRes) instead? ctx.body() will treat the given argument as a textual response, which, in your case, looks to be a JSON (thus [object Object]). Let me know if using ctx.json() helps.

[kettanaito]

Hey, @Jeffhabs! Please, have you tried my suggestion above? I feel your feedback would be valuable, so would love to hear from you. Thanks.

[Jeffhabs]

@kettanaito Yes, unfortunately I could not get it to work as our UI is expecting a serialized proto message as the response not JSON.

[kettanaito]

@Jeffhabs, hey! Could you please try this using the version msw@0.20.x?

We've added a binary response type to the latest minor version, and it may have solved your unexpected serialization issue. Please let me know.

[didiercapozzi]

I also have the same problem where grpc-web will encode the request using Uint8Array and base64 that will result in a none human readable string payload sent to the server. If we want to mock grpc-web, we need then to return a response with the right headers and an encoded body like:

return res(
      ctx.status(200),
      ctx.set("Content-Type", "application/grpc-web-text"),
      ctx.body("AAAAAAYHHAWNvb2w=")
    );

The problem I found using this method is that the coding/decoding the body depends on the proto file structure and creating a mocked response requires to correctly encode it first before returning it using handlers. For now I unfortunately I'm not able to use this good library to mock grpc-web responses.

[kettanaito]

We'd love to have GRPC support but don't have enough manpower to implement it. If you use MSW and would like it to handle GRPC requests, consider contributing this support. We'd be more than happy to help you along the way.

[ides15]

This would also be great to have on Node (@grpc/grpc-js)!

[dlog6649]

const res = new ResponseV1(); res.setId("hello world abc d e f g"); rest.post("PATH", (req, res, ctx) => res(ctx.body(res.serializeBinary())))

I am using grpc-web and there is something problem

[ritchieanesco]

So i'm assuming msw is yet to support grpc-web?

[kettanaito]

@ritchieanesco, yes. See this.

[lucaslcode]

Hi all, you can mock grpc-web requests with msw, you just have to imitate the binary format. I wrote a blog post with an example here.

[kettanaito]

@lucaslcode, this is absolutely outstanding. I will share that on Twitter. Thank you for writing this!