Conditional request handlers

[RobinClowers]

I have an API that's sort of similar to graphql, I'm always POSTing to the same endpoint with different bodies. I would like to be able register handlers that only match based on a predicate, but I don't see any way to do that. I tried using request.passthrough, but that doesn't seem to attempt to match other handlers. Do I have to create my own custom handler derived from RequestHandler?

[kettanaito]

Hi, @RobinClowers.

You can create a handler that would only match on a custom predicate by handling an intercepted request conditionally in a more permissive standard request handler.

For example, here's how you could handle a request differently based on its body:

import { rest } from 'msw'

export const handlers = [
  rest.post('/endpoint', (req, res, ctx) => {
    const requestBody = req.body

    if (typeof requestBody === 'object' && requestBody.query.includes('GetUser') {
      // Respond with a mocked GraphQL response in this case.
      return res(ctx.json({ data: { user: { id: 1 } }))
    }

    // Otherwise, perform the request as-is.
    return req.passthrough()
  })
]

Note that returning req.passthrough() also means that this POST /endpoint request will fall down to any other matching request handlers.

We are mentioning this pattern in the Conditional response resolver section of the docs.

Let me know if this achieves what you want.

[RobinClowers]

Thanks for getting back to me!

I'm confused, the docs you linked say:

When a response resolver returns the req.passthrough call, MSW will perform the captured request as-is, hitting the actual endpoint and returning its response.

In my tests I have code like this:

  beforeEach(() => {
    server.use(fooHandler);
    server.use(barHandler);
  });

In my test, I should be doing one query that is handled by each of the handlers, but by adding logs, I can see that the barHandler ever sees the both requests, and I end up getting this error for one of the queries:

 FetchError {
      message: 'request to https://example.com/api failed, reason: getaddrinfo ENOTFOUND example.com',
      type: 'system',
      errno: 'ENOTFOUND',
      code: 'ENOTFOUND'
    }

[kettanaito]

Sorry, I can't know what's going wrong without a reproduction repository to look at. If you can prepare one, I can help you figure out what's happening.

What's written in the docs stands true. Perhaps some of your handlers don't capture the request as you think they should (e.g. typos, wrong order of more permissive handlers).

[RobinClowers]

Here is a sandbox that shows the issue I'm running into, thanks again for looking at this: https://codesandbox.io/p/sandbox/msw-request-body-matching-vkk01f

[SangJunBak]

Note that returning req.passthrough() also means that this POST /endpoint request will fall down to any other matching request handlers.

I noticed this is incorrect. Returning undefined / null will allow the request to fall to any other matching request handlers however as stated here: https://mswjs.io/docs/api/request/passthrough