Combine Original and Mocked Responses in MSW

Share this video with your friends

Published a year ago

Updated a year ago

When working with existing APIs, especially those you don't own, being able to take the original response and manipulate it can be a life-changer when iterating on features or reproducing bugs. In this lesson, you will learn to perform the original request and then use Mock Service Worker to patch it with whichever data you want.

bypass()

Instructor: [0:00] With MSW, we can combine original and mock data in the same response using response patching. Let's create a new request handler for the featured movies endpoint that already responds with a list of actual production movies, and grab its request reference.

[0:21] Naturally, what we want to do is just fetch this intercepted request to get the original response. If we do this, this fetch call will create a new network entry for which MSW will find this matching request handler again, triggering another fetch call and resulting in an infinite loop.

[0:37] To prevent this from happening, MSW comes with a built-in API to bypass requests called bypass. Go to our fetch call and wrap the intercepted request instance in the bypass function call. This marks this request and instructs MSW to ignore any otherwise matching request handlers when it happens, which is precisely what we want to get the original response.

[0:59] The rest is regular fetch API response handling. We will await the response promise and then read its JSON body as the list of originalMovies. At this point, we can do whatever we want with the original response because it's just a plain JavaScript array.

[1:17] Let's return a new JSON response that will send back the originalMovies array, concatenated with the list of mock movies we have. With this request handler, our application receives a mix of the original data from the production API and the mock data from the request handler at the same time.

~ 7 months ago

In case anyone is wondering why this isn't working in your course app, in "_grid._index.jsx" in the loader it is still calling the mock api instead of a production api.

I copied api.recommendations and renamed the copy to api.featured and then changed the fetch url in the loader. I'm running vite so my port is different.

export async function loader() {
  const featuredMovies = await fetch(
    // "https://api.example.com/movies/featured"
    "http://localhost:5173/api/featured"
  ).then<Array<FeaturedMovie>>((response) => response.json());

  return {
    featuredMovies,
  };
}

Artem Zakharchenkoinstructor

~ 6 months ago

You're totally right! I believe I switched to the local /api/featured for this lesson only so it never made it to the repository.

Here's the code you have to adjust in _grid._index.tsx:

export async function loader({ request }: LoaderFunctionArgs) {
  const featuredMovies = await fetch(
-  'https://api.example.com/movies/featured',
+   new URL('/api/featured', request.headers.get('origin'))
  ).then<Array<FeaturedMovie>>((response) => response.json())

  return {
    featuredMovies,
  }
}

Refer to the Remix documentation on how to annotate the loader function arguments.

Thank you for pointing this out!

Markdown supported.

Become a member to join the discussionEnroll Today

Mock REST and GraphQL APIs with Mock Service Worker

Combine Original and Mocked Responses in MSW

Social Share Links