How to type async higher-order resolver in Typescript?

[nik-webdevelop]

How can I type this higher-order resolver? I keep getting different errors no matter what approach I use

import { delay } from 'msw';

export const withDelay =
  (resolver) =>
  async (...args) => {
    if (import.meta.env.MODE !== 'test') await delay();

    return resolver(...args);
  };

msw 2.0.0
ts 4.9.3

[kettanaito]

Hi, @nik-webdevelop. I gave it a try here but soon learned we need to ship better public-facing types to make higher-order resolvers a more pleasant experience. Thanks for making this surface.

[nik-webdevelop]

@kettanaito thanks for such a quick response! I guess I will do some typecastings for now and looking forward to the type updates. Thank you

[kettanaito]

I need to think of a better way to achieve this. It's a bit tangled since the response resolver infers data from the handler. But you can see that inference working even in my playground—we don't have to expose any types to support it, TypeScript is extremely good at this.

It's mainly the type incompatibility of the <R>(resolver: R): R that bewilders me.

[singhAmandeep007]

Here is my approach with authorization validation.

// middleware.ts

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

export function withAuth<RequestBodyType extends DefaultBodyType, ResponseBodyType extends DefaultBodyType>(
  resolver: HttpResponseResolver
): HttpResponseResolver<PathParams, RequestBodyType, ResponseBodyType> {
  // @ts-expect-error - ignore type checking for now
  return async (args) => {
    const { request } = args;

    // get Authorization header
    const authHeader = request.headers.get("Authorization");

    // check if Authorization header exists
    if (!authHeader) {
      return new HttpResponse(null, { status: 401 });
    }

    // validate Bearer token format
    const [scheme, token] = authHeader.split(" ");
    if (scheme !== "Bearer" || !token) {
      return new HttpResponse(
        JSON.stringify({
          error: "Invalid token format",
          message: "Authorization header must be in the format: Bearer <token>",
        }),
        {
          status: 401,
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
    }

    return resolver(args);
  };
}

// posts.ts

import { http, HttpResponse } from "msw";

import { faker } from "@faker-js/faker/locale/en";

export const getPosts = http.get(
  "/posts",
  withAuth(({ request, cookies }) => {
    const generatePosts = () => {
      const posts = [];
      for (let i = 0; i < 10; i++) {
        posts.push({
          id: faker.string.uuid(),
          title: faker.lorem.sentence(),
          userId: faker.string.uuid(),
        });
      }
      return posts;
    };

    return HttpResponse.json(generatePosts());
  })
);