Modify many handlers at once?

[Geddard]

Hi there again, I was asking last time about modifying the delay globally, i figured out how to make this work but now I'm wondering if i can modify many handlers at once to add values for the context for example.

This would be an example scenario:

import { rest } from 'msw'

const handler1  = rest.get('/handler1', (req, res, ctx) => {
 return res(ctx.status(200), ctx.json({ data: 'ok' }))
})

const handler2  = rest.get('/handler2', (req, res, ctx) => {
 return res(ctx.status(200), ctx.json({ data: 'ok 2' }))
})

const handlers = [
  handler1,
  handler2
]

/* I wonder if I could grab the handlers list, map it and do some extra customization like
* handlers.map(handler => wrapWithSOmethingThatAddsDelay(handler)) 
* or handlers.map(handler => handler.use(doSomethingHere)) 
*/

export default handlers

Does this make sense? or is it too late to modify the handlers at that point?

[kettanaito]

Hey, @Geddard. Thanks for reaching out.

Take a look at the updated Custom response composition recipe. It features a globally defined delay set on all mocked responses.

You can transform handlers as you wish, just be careful not to dive too deep into the internals.

Does this make sense? or is it too late to modify the handlers at that point?

Response transformations are bound to the resolver function. Once you've called rest[method]/graphql[method], the resolver's logic is hoisted under the returned RequestHandler instance:

msw/src/handlers/RequestHandler.ts

Line 93 in 8a816e0

protected resolver: ResponseResolver<any, any>

I wouldn't recommend modifying these instances directly, as you'd be coupling your customization logic with the library's internals way too close. The recommended way is still to write either a custom context utility or response composition.

[Geddard]

got it, i guess im still looking for ways to avoid refactoring all the existing handlers and adding something more global that requiers less effort to reconfigure, but i suspected there was no way of modifying these handlers at this point, just taking a change

[kettanaito]

You may stub the default res composition function with your own by doing something like this:

import { context, createResponseComposition } from 'msw'

const delayedResponse = createResponseComposition(null, [
  context.delay('real')
])

const handlers = [...]

export const changedHandlers = handlers.map((handler) => {
  const originalResolver = handler.resolver

  handler.resolver = (req, res, ctx) => {
    // Rewrite the original resolver, substituting the "res"
    // composition function with your custom one that always
    // uses a realistic response delay time.
    return originalResolver(req, delayedResponse, ctx)
  }
})

This still creates a coupling between your abstraction and the library's internals (handler.resolver), so proceed at your own risk.

[Geddard]

Brilliant!
I understand the risks of this, but it's exactly what i needed and it will make my life and the DX much better at my company.
Thx!