mswjs / http-middleware

Hi there, am working on implementing with the recent msw2 updates and wanted to ask if this has been seen before:

import { HttpResponse, RequestHandler, graphql } from 'msw'
import { createServer } from '@mswjs/http-middleware'

export const handlers: RequestHandler[] = [
  graphql.query('ListPosts', () => {
    return HttpResponse.json({
      data: {
        // Convert all posts to an array
        // and return as the "posts" root-level property.
        posts: [{ test: true }],
      },
    })
  }),
]
const httpServer = createServer(...handlers)

console.log('server listening on 9090')
httpServer.listen(9090)

I am seeing some failing types here where the createServer expects some type HttpHandler.

Ironically, everything works fine when I cast as any, just curious if this is expected or a bad pattern.

Hey, @andrewmartin. Thanks for reporting this.

Can you drop the manual type right here?

-export const handlers: RequestHandler[] = [
+export const handlers = [

Let TypeScript infer the handler types based on the request handlers you provide. There's no value in annotating that handlers array manually. Let me know if that helps.

Oh, there also seems to be a bug right here:

http-middleware/src/server.ts

Line 5 in 50d95e9

    
           export function createServer(...handlers: Array<HttpHandler>): express.Express {

We annotate the accepted handlers argument as HttpHandler only but it should be RequestHandler. That's the root case of this.

@andrewmartin, would you like to open a pull request with a fix? We could get it merged this week then.

So, the issue is actually with allowing both types of handlers in I believe, shouldn't be harmful for me to annotate. I'd prefer to annotate alongside the const declaration so the failing type is caught earlier in the tree.

src/api/msw/runner.ts:23:33 - error TS2345: Argument of type 'GraphQLHandler[]' is not assignable to parameter of type 'HttpHandler'.
  Type 'GraphQLHandler[]' is missing the following properties from type 'HttpHandler': checkRedundantQueryParameters, parse, predicate, matchMethod, and 9 more.

23 const httpServer = createServer(handlers)
                                   ~~~~~~~~

Let me look into opening a fix, but want to clarify the fix just so you're aware. Sorry, should've included that example in my first pass.

I can confirm that @andrewmartin issue happens to me when attempting to migrate from v1 to v2, being an inline server using graphql.mutation or passing a list of handlers, the type seems to be mismatched

Can someone please confirm if this issue is reproducible anymore?

We should allow any handler types since RequestHandler is the base type for both http and graphql handlers:

http-middleware/src/middleware.ts

Line 14 in dfd8c68

...handlers: Array<RequestHandler>

There's also been a lot of work done around the types in v2 so I strongly encourage everyone to upgrade (it is the required MSW version to use this package anyway). If you encounter any issues, please report them, including a reproduction repository. Thanks.

Typescript failing with `graphql` handlers