Intercept and Mock Client-Side HTTP Requests in MSW

Share this video with your friends

Social Share Links

Send Tweet
Published a year ago
Updated a year ago

Request handlers you write in Mock Service Worker apply for both Node.js and the browser simultaneously. In this lesson, you will handle a client-side request for movie recommendations using the same http namespace you already know. We will also take a sneak peek at the browser's Network to see what happens to the requests when we mock them.

Lecturer: [0:00] let's render a list of recommended movies for each movie we are browsing. Since it's non-blocking information, we will perform this request on the client. In this case, it's a GET request to the api/recommendations root we've defined in Remix.

[0:16] We don't know how this route will be implemented just yet, but that doesn't stop us from developing and testing this UI. In our handlers module, let's add a new request handler for the recommendations endpoint.

[0:34] Notice that we don't have to provide the absolute request URL because this endpoint is served by our application. We can drop the application's host altogether and let MSW resolve the relative URL against the current location automatically. As a response, let's send back the first two movies we have in our movies collection.

[0:55] Pay attention to how we don't mention the environment or even the request client when defining our handlers. None of that is relevant because the network description should remain consistent no matter how or where a request is being sent.

[1:11] Save the changes and see the bottom of this page shining with recommended movies. Take a look at the network tab. Although we are clearly receiving the mock data right now, we can still see the actual request being sent, observe its properties, and check the response as we would do with a regular request because when using MSW, it remains a regular request.

[1:33] It gets intercepted on the network level using the service worker we registered earlier, which is indicated next to the response status code. This means our application actually performs the request as it would in production, and receives an actual response as if there is no mocking involved...

Toni Laukka
Toni Laukka
~ a year ago

I think this Recommendations part is missing from the source code...

Artem Zakharchenko
Artem Zakharchenkoinstructor
~ a year ago

Hi, Toni! Thanks for pointing that out. A Git rebase issue. I've just pushed a fix.

Kushal Mahajan
Kushal Mahajan
~ a year ago

I cloned it today and Recommendations error is displayed. How should I resolve this rebase issue?

Artem Zakharchenko
Artem Zakharchenkoinstructor
~ a year ago

Hey, Kushal. Note that the main branch of the repo contains the clean state of the project (before lesson #1). You are supposed to go through the lessons to add the handlers and resolve that recommendations error. Or you can jump straight to the completed state of the course (after the last lesson) by running git checkout completed. All the instructions are in the README, please see.

Kushal Mahajan
Kushal Mahajan
~ a year ago

Yeah, I am following along each lesson. If I switch to completed, I won't be able to code along. I think I found the issue. Can I submit a fix?

Kushal Mahajan
Kushal Mahajan
~ a year ago

Anyway, here's the PR for fix. https://github.com/kettanaito/movie-app/pull/1

Artem Zakharchenko
Artem Zakharchenkoinstructor
~ a year ago

Kushal, absolutely! Thanks, I will take a look and we will get to the bottom of this.

Markdown supported.
Become a member to join the discussionEnroll Today