MSW V2 - Replace ctx.fetch() calls

verified codemod icon

This codemod replaces ctx.fetch(req) with fetch(bypass(req)).

MSW
ts-morph
Estimated time saving
5 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/ctx-fetch
copy CLI command icon

Codemod VS Code extension:

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

Use/edit codemod in Codemod Studio:

intuita logo without text
Open in Codemod Studio

Description

ctx.fetch(req) is now meant to be called as fetch(bypass(req)) where bypass is a new function available in the msw library. Changes applied by this codemod:

  • ctx.fetch(req) is replaced with fetch(bypass(req)).

NOTE: The bypass call is meant to wrap the new request object available on the callback argument. This object is not being destructured in this codemod, so you will have to do it manually or run a callback-signature codemod that will do that and replace the reference for you.

Example

Before

import { rest } from 'msw';

const handlers: RestHandler[] = [
  rest.get('/user', async (req, res, ctx) => {
    const originalRequest = await ctx.fetch(req);

    return res(ctx.json({ firstName: 'John' }));
  }),
]

After

import { rest } from 'msw';

const handlers: RestHandler[] = [
  rest.get('/user', async (req, res, ctx) => {
    const originalRequest = await fetch(bypass(req));

    return res(ctx.json({ firstName: 'John' }));
  }),
]
``` ### Links for more info -   [msw v1 to v2 migration guide -> ctx fetch](https://mswjs.io/docs/migrations/1.x-to-2.x/#ctxfetch)