How to type async higher-order resolver in Typescript?

[Lee-Minhoon]

I referred to the "https://mswjs.io/docs/best-practices/typescript/#higher-order-response-resolvers page and wrote the code as follows.

import {
  DefaultBodyType,
  HttpResponse,
  HttpResponseResolver,
  PathParams,
} from "msw";

type HigherOrderResolver = <
  Params extends PathParams,
  RequestBodyType extends DefaultBodyType,
  ResponseBodyType extends DefaultBodyType ,
>(
  resolver: HttpResponseResolver<Params, RequestBodyType, ResponseBodyType>
) => HttpResponseResolver<Params, RequestBodyType, ResponseBodyType>;

export const withAuth: HigherOrderResolver = (resolver) => {
  return (input) => {
    const { request } = input;

    if (!request.headers.get("Authorization")) {
      return HttpResponse.json(
        { data: null, message: "Unauthorized" },
        { status: 401 }
      );
    }

    return resolver(input);
  };
};

However, a TypeScript error appears where the response is returned.

Argument of type '{ data: null; message: string; }' is not assignable to parameter of type 'NoInfer<ResponseBodyType>'.
  Type '{ data: null; message: string; }' is not assignable to type 'ResponseBodyType'.
    '{ data: null; message: string; }' is assignable to the constraint of type 'ResponseBodyType', but 'ResponseBodyType' could be instantiated with a different subtype of constraint 'DefaultBodyType'.ts(2345)

This is probably due to the application of the 'NoInfer' type.

Injecting the exact type into the generic makes it difficult to write a general-purpose type.

Is there a good way to solve this?

[trbagley-gresham]

I'd also be interested to know if there's a good solution for this. I'm trying to replicate the auth example given for plain JavaScript but with TypeScript.

[grgmo]

was getting the same error, changed it to throw the error instead which stopped ts error, followed this example https://mswjs.io/docs/basics/mocking-responses/#throwing-responses

throw HttpResponse.json(
        { data: null, message: "Unauthorized" },
        { status: 401 }
      );

[kettanaito]

Hi. We've simplified the annotations for higher-order handlers/resolvers since this question has been posted. Please use the following types:

• HttpHandler:

  msw/src/core/index.ts

  Line 8 in 3cc9d9f

  export { HttpHandler, HttpMethods } from './handlers/HttpHandler'

• HttpResponseResolver:

  msw/src/core/index.ts

  Line 46 in 3cc9d9f

  export type { HttpRequestHandler, HttpResponseResolver } from './http'

You can find the same types for GraphQL.