How to type a reusable resolver in Typescript

[javipuche]

Hello, I have some questions about typing when using a reusable resolver. Is it something like this?:

import type { ResponseResolver } from 'msw'

export const mockUser: ResponseResolver = (req, res, ctx) => {
  return res(
    ctx.json({
      firstName: 'John',
      age: 38,
    }),
  )
}

This show an error in ctx.json. The property json doesn't exists in DefaultContext.

Or maybe, Is it something like this? (I don't know what to use for "res" in this case):

import type { RestContext, RestRequest } from 'msw'

export const mockUser = (req: RestRequest, res, ctx: RestContext) => {
  return res(
    ctx.json({
      firstName: 'John',
      age: 38,
    }),
  )
}

Thank you for clearing up my doubts

[kettanaito]

Hi, @javipuche. Thanks for raising this.

Getting to know ResponseResolver better

Take a look at the ResponseResolver type:

msw/src/handlers/RequestHandler.ts

Lines 73 to 81 in ad27719

	export type ResponseResolver<
	RequestType = MockedRequest,
	ContextType = typeof defaultContext,
	BodyType extends DefaultBodyType = any,
	> = (
	req: RequestType,
	res: ResponseComposition<BodyType>,
	context: ContextType,
	) => AsyncResponseResolverReturnType<MockedResponse<BodyType>>

It accepts three generics:

• RequestType, this is the type for the req provided to the response resolver function.
• ContextType, the type of the ctx object.
• BodyType, the response body type to narrow down what responses res function should compose.

The way MSW works is that there are common ctx utilities, and then utilities specific to particular request types: REST (like ctx.json() and ctx.set()) and GraphQL (like ctx.data()). By default, ResponseResolver doesn't know what kind of requests you mean to intercept with it, so you have to explicitly provide that on the type level.

How to fix this?

MSW ships with pre-defined request and context types you can reuse directly. For example, if you are annotating your custom resolver that's meant to handle REST API requests, use this type:

import type { ResponseResolver, RestRequest, RestContext } from 'msw'

interface User {
  firstName: string
  age: number
}

export const mockUser: ResponseResolver<RestRequest, RestContext, User> = (req, res, ctx) => {
  return res(
    ctx.json({
      firstName: 'John',
      age: 38,
    }),
  )
}

Learn more

Looking at MSW's source code is a great place to see how to use these types, for example:

msw/src/rest.ts

Lines 19 to 28 in ad27719

	resolver: ResponseResolver<
	RestRequest<
	Method extends RESTMethods.HEAD | RESTMethods.GET
	? never
	: RequestBodyType,
	Params
	>,
	RestContext,
	ResponseBody
	>,

msw/src/graphql.ts

Lines 34 to 37 in ad27719

	resolver: ResponseResolver<
	GraphQLRequest<Variables>,
	GraphQLContext<Query>
	>,

You opening this discussion also helped me realize that the Type-safe API Mocking With Mock Service Worker article I wrote a while ago has an incorrect example of annotating custom response resolver. It's fixed now! Feel free to refer to that article for more examples on how to use MSW with TypeScript. Hope this helps.

[javipuche]

Thank you very much for the assistance and for the explanation. I will take a look at the article ;)