Documentation/example for rest generics in TypeScript

[philals]

Scope

Improves an existing behavior

Compatibility

• This is a breaking change

Feature description

Morning

First off, thanks for msw. It's great!

I'm upgrading to the latest version and having an issue quickly understanding the generics on rest (there might have been changes 0.34.0 -> 0.42.3).

Is there an example on this? I could not find it. Some times reading the code and type definitions can be a bit hard. I don/t mind writing it up (once I know what is what). Something like the first generic is X and the second is Y and examples.

I can see quite a few tickets related to the development of generics support (#352) but cannot find it on the main docs/example page.

Cheers

Edit: just worked out there is now 3 generics! Body, PathParams, Response. Cool! The definition file was really wide and I could not parse it :).

[kettanaito]

Hey, @philals. Thanks for raising this.

I highly recommend reading Type-safe API mocking with MSW. If you spot it not being up to date please let me know. That article should explain the usage of rest/graphql generics.

[philals]

Morning @kettanaito Yes! That was exactly what I was after! Thanks

[philals]

Morning @kettanaito just coming back to this.

I think the ordering of these changed. I think Params is now the second one. Mixed me up for a little.

[kettanaito]

You are correct. I believe this is mentioned in the release notes as a breaking change.

[philals]

[Kamahl19]

@kettanaito Hey, I noticed that while the deprecated req.body type was set by using a generic in rest method, the new req.json() method's return type is just any. Same applies to the ctx.json().

rest.post<LoginPayload, PathParams, LoginResponse>('...', async (req, res, ctx) => {
    // body is any unless I explicitly use a generic LoginPayload again 
    const body = await req.json<LoginPayload>();
    
    // This is correctly inferred as LoginPayload automatically
    req.body

    return res(
      // I have to use explicit generic again here for the response, otherwise I can send anything into the ctx.json
      ctx.json<LoginResponse>({
        token: 'token',
        userId: '1',
      })
    );
  }),

Am I missing something? Should I use generics for both the rest method and for req.json() and ctx.json() again? What is the purpose of the rest method generics then?

Thanks a lot!

[plgagnon2]

bump, I have the same problem as @Kamahl19

[kettanaito]

Hey. A good question. Could you try updating to the latest version? I believe we've added generic support for request body to annotate ctx.json.

[plgagnon2]

Hey. A good question. Could you try updating to the latest version? I believe we've added generic support for request body to annotate ctx.json.

Im using 0.48, was this added in 0.48.1?

[the-ult]

What would be the proper way to use the Generics with the next MSWjs version?

• https://github.com/mswjs/msw/blob/feat/standard-api/MIGRATING.md#migration-guide
• https://dev.to/kettanaito/type-safe-api-mocking-with-mock-service-worker-and-typescript-21bf

What do you provide, when you don't have PathParams or a RequestBodyType.
I'm mostly interested in providing the ResponseBodyType, cause I need the proper return Type.

Is this the correct way? (providing undefined feels a bit icky 🤔 😇 )

/**
   * Handle the requests for POPULAR Movies
   * @see: https://developers.themoviedb.org/3/movies/get-popular-movies
   */
//get: <PathParams<string>, RequestBodyType_2 extends DefaultBodyType, ResponseBodyType_2 extends DefaultBodyType = undefined>
  rest.get<{ movieId: string }, undefined, MovieDetail | MovieError>(
    'movie/:movieId',
    ({ params }) => {
      const movieId = +params['movieId'];

      if (movieId === 436_270) {
        return HttpResponse.json<MovieDetail>(BlackAdam);
      }

      if (movieId === 505_642) {
        return HttpResponse.json<MovieDetail>(WakandaForever);
      }

      return HttpResponse.json<MovieError>({
        status_code: 56,
        status_message: `Movie with ID: ${movieId} not found`,
      });
    }
  ),

N.B.

• WakandaForever and BlackAdam are JSON files, with slightly different content.

[cmacdonnacha]

You should be able to just used the PathParams type including in the MSW library.