MSW V2 - Update Response Usages

verified codemod icon

This automation updates MSW handlers to use the new HttpResponse function for responses, replacing old res calls with this new method in msw v2.

MSW
ts-morph
Estimated time saving
Up to 10 minutes/occurrence
Change mode
Assistive
Applicability criteria

MSW version >= 1.0.0

Made by
Codemod.com
Codemod.com

Usage →

Codemod CLI:

intalling vs code extension tooltip icon
codemod msw/2/response-usages
copy CLI command icon

Codemod VS Code extension:

intalling vs code extension tooltip icon
vs code logo
Run in VS Code

Description

To send a response from MSW handler, one would previously use something like res(ctx.text("Hello world")). In msw v2, this is achieved by returning a native WebAPI Response object. msw v2 conveniently exposes a HttpResponse function that has useful methods for creating just that object with a desired body. This codemod replaces the old res calls with the new HttpResponse function calls and a bunch of ctx utilities that usually go with it. See examples below.

This codemod does not remove unused properties on the callback signature due to the fact that there are more changes in other codemods included in the upgrade-recipe that rely on it. To apply these changes, you will have to run the recipe or run a callback-signature codemod that will do only that and replace all the references of old signature arguments.

Example

Before

import { rest } from 'msw';
rest.get('/user', (req, res, ctx) => {
  return res(
    ctx.json({ id: "abc-123" }),
    ctx.cookie("roses", "red"),
    ctx.cookie("violets", "blue"),
    ctx.set("X-Custom", "value")
  );
});

After

import { rest } from 'msw';
rest.get('/user', (req, res, ctx) => {
  return HttpResponse.json({ id: 'abc-123' }, {
    headers: {
      'X-Custom': 'value',
      'Set-Cookie': 'roses=red;violets=blue;',
    },
  });
});

Before

import { rest } from 'msw';
rest.get('/user', (req, res, ctx) => {
  return res(
    ctx.text("Hello world!"),
    ctx.delay(500),
    ctx.status(401)
  );
});

After

import { rest, delay } from 'msw';
rest.get('/user', (req, res, ctx) => {
  await delay(500);

  return HttpResponse.text("Hello world", {
    status: 401,
  });
});

Before

import { rest } from 'msw';
rest.get('/user', (req, res, ctx) => {
  return res(
    ctx.body('Hello world!'),
    ctx.set('Content-Type', 'text/plain'),
  );
});

After

import { rest, delay } from 'msw';
rest.get('/user', (req, res, ctx) => {
  return HttpResponse.text("Hello world");
});

Before

import { rest } from 'msw';
rest.get('/user', (req, res, ctx) => {
  return res(ctx.text('Hello world!'));
});

After

import { rest } from 'msw';
rest.get('/user', (req, res, ctx) => {
  return HttpResponse.text("Hello world");
});

Before

graphql.query('GetUser', (req, res, ctx) => {
  return res(
    ctx.data({
      user: { firstName: 'John' },
    }),
    ctx.errors([
      { message: `Failed to login:  user "${username}" does not exist` },
    ]),
    ctx.extensions({
      requestId: 'abc-123',
    })
  )
})

After

graphql.query('GetUser', (req, res, ctx) => {
  return HttpResponse.json(
    data: {
      user: { firstName: 'John' },
    },
    errors: [
      { message: `Failed to login:  user "${username}" does not exist` },
    ],
    extensions: {
      requestId: 'abc-123',
    },
  )
})
``` ### Links for more info
-   [msw v1 to v2 migration guide -> response usages](https://mswjs.io/docs/migrations/1.x-to-2.x/#request-changes)

Links for more info