Handle Dynamic Requests with Path Parameters in MSW

Share this video with your friends

Social Share Links

Send Tweet
Published 7 months ago
Updated 6 months ago

When mocking a collection of resources in Mock Service Worker, such as our movies, you will encounter requests that have dynamic parts in their URL, like /movies/:slug. In this lesson, learn how to use path parameters to describe dynamic portions of the request's URL, access those parameters, and return a different response based on their values.

Lecturer: [0:00] Our application makes a GET request to fetch movie details and provides the slug of the movie we want to fetch as a dynamic part of that request URL. In other words, we don't know the exact URL until we fetch a particular movie. Let's create a handler for this dynamic request using HTTP GET.

[0:19] We will provide the static portion of the request URL and replace the dynamic parts with path parameters. A path parameter is a part of the request path that doesn't get interpreted literally, instead, it acts as an expression that takes whichever actual string will be present at this position and stores it under the parameter named slug.

[0:41] You may be familiar with path parameters if you worked on backend applications in the past. This is no different. We access the actual value of this parameter in the argument to the responseResolver function. Let's spread that object argument and get the key named params from it.

[0:57] Params is an object that holds all found path parameters, where its keys represent parameter names, like the slug we have over here, and its values equal to those parameters' values.

[1:09] The slug parameter will be different for every movie our application tries to fetch. We can check the individual movie slugs and return different responses for different movies. We will reuse the same static data from the featuredMovies handler we wrote before to stay consistent.

[1:40] To keep our network description robust, we will return a not-found response for any other slug by constructing an HTTP response instance and setting its status to 404. Once we save the changes, we can see that our application displays the correct details depending on the movie we click on.

~ 3 months ago

Complete noob here, Any idea why I am seeing just black screen without any errors in web console, when run the app using "npm run dev" command in the main folder ? I just cloned repository and run npm install in the main folder, and then try to run with no success. I didnt even started msw part of the tutorial. Thanks for any suggestions.

Artem Zakharchenko
Artem Zakharchenkoinstructor
~ 2 months ago

Hi! Thanks for letting me know. I believe the issue is fixed now, the app is functional. Don't hesitate to ping me in case you spot any other problems!

~ 2 weeks ago

Hi, I created a new Remix app v2.9.1 and copied/updated all necessary files for my starter project. So, I expect issues. Everything is working at the moment.

But FYI I have to restart the dev server every time I create a handler so it will take affect.

Artem Zakharchenko
Artem Zakharchenkoinstructor
~ 2 weeks ago

Hi! I believe this course has been recorded on an earlier version of Remix.

Please see our MSW + Remix usage example that features the latest Remix and doesn't have any HMR issues. Hope that helps!

~ a week ago

The MSW + Remix example seems to have an old version of Remix and no Vite. But the problem seems to have worked it's self out as I progressed through the course. Not sure what I changed or if it was actually a problem with my slow PC. Thanks though.

Markdown supported.
Become a member to join the discussionEnroll Today