Controlling the network is the key to fast prototyping, bullet-proof tests, and efficient debugging. In this course, you will learn how to use Mock Service Worker for API mocking—from the setup and your first request handler to describing more complex network scenarios, such as dynamic requests, HTTP streams, and schema-first GraphQL mocking.

Hi! My name is [Artem](https://kettanaito.com). In this course, I will teach you how to mock REST and GraphQL APIs with [Mock Service Worker](https://mswjs.io). Together, we will build a movie streaming application and you will learn how to intercept both server-side and client-side requests and mock responses using standard JavaScript API. This is a state-of-the-art mock-first prototyping with MSW.

- Join my [Discord server](https://kettanaito.com/discord) to go through the course with others, ask questions, and share feedback. See you there!

Introduction to Mock REST and GraphQL APIs with Mock Service Worker

Before we begin, let's see how you can clone the Movie App repository from GitHub. This is not mandatory but will be helpful if you decide to follow along as we go through each lesson.

- [Movie App on GitHub](https://github.com/kettanaito/movie-app)

Clone the GitHub Repository for Mock REST and GraphQL APIs with Mock Service Worker

Let's add `msw` to the project and prepare the basic directory structure with our `handlers.ts` where you will describe the network behavior you want. 

Install Mock Service Worker (MSW) and Prepare Directory Structure

As the name implies, Mock Service Worker (MSW) uses the Service Worker API to intercept requests in the browser. By doing that, it can achieve API mocking without patching "fetch" or affecting the source code of your app in any way—all by using the platform. Learn how to copy the worker script and register the service worker to have API mocking enabled in for client-side development.

- [Browser integration](https://mswjs.io/docs/integrations/browser)

Set Up MSW in the Browser

Let's use the "setupServer" API from Mock Service Worker to enable API mocking on the server-side of our Remix application. This way you can intercept and mock server-side requests, like those happening in the "loader" and "action" functions, as well as reuse the same setup for any other Node.js process, like integration tests with tools like Vitest or Jest in the future.

- [Node.js integration](https://mswjs.io/docs/integrations/node)

Set Up MSW in Node.js

To control what happens to requests in Mock Service Worker, you need to intercept them first. Write your first **request handler** and learn how to intercept a server-side request our application makes in Remix's `loader`. And mocking a response? Using a Fetch API `Response` instance, of course!

- [Describing RESTful APIs](http://mswjs.io/docs/network-behavior/rest)

Intercept and Mock Server-Side HTTP Requests in MSW

Mock Service Worker relies heavily on the standard Fetch API classes like Request and Response when describing the network. But sometimes standards aren't enough. For example, you cannot mock a response cookie because JavaScript prohibits setting the "Set-Cookie" header on a Response instance. Learn how to side-step this limitation by using a new "HttpResponse" class from MSW. 

- [`HttpResponse` API](https://mswjs.io/docs/api/http-response)

Use the HttpResponse Class in MSW

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.

- [Path parameters](https://mswjs.io/docs/network-behavior/rest#reading-path-parameters)

Handle Dynamic Requests with Path Parameters in MSW

As you add more request handlers in Mock Service Worker, introducing a source of truth for the static data can help reduce the clutter and keep the network description focus on behavior instead of repeating fixtures. In this lesson, we will refactor our code by moving the static data outside and reusing it across existing request handlers.

Add a Single Source of Truth for Fixtures in MSW

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. 

Intercept and Mock Client-Side HTTP Requests in MSW

Learn how to use the native `URL` and `URLSearchParams` classes to parse the intercepted request's URL and access its query parameters inside your Mock Service Worker handlers.

- [Reading and writing request query parameters](https://mswjs.io/docs/recipes/query-parameters)

Read Request Query Parameters in MSW

Error handling is crucial for a great user experience. Learn how to reproduce _any_ error response with Mock Service Worker, be it a 404, 500, or any other HTTP error response. 

- [Mocking error responses](https://mswjs.io/docs/basics/mocking-responses#mocking-error-responses)

Mock Error Responses in MSW

Accounting for network errors is what makes a good application great. Unlike error responses, network errors represent issues when sending a request or receiving a response, but all the same can be mocked with standard JavaScript API. 

In this lesson, you will learn about `Response.error()` and how to use it to emulate network errors in your Mock Service Worker handlers. 

- [Network errors](http://mswjs.io/docs/basics/mocking-responses#mocking-network-errors)

Emulate Network Errors in MSW

The more your request handlers resemble the actual production behavior, the more confident you'll get when prototyping and testing with Mock Service Worker. But here's the thing—mocked responses arrive to the client **really quickly**. Learn how to control response timing and server-side latency by using the "delay" function.

- [`delay()` API](https://mswjs.io/docs/api/delay)

Control Response Timing in MSW

Mocking authentication comes down to how it's implemented. With Mock Service Worker, you can mock the "Set-Cookie" response header to emulate a user session, but with Remix you don't even have to. Instead, in this lesson we will intercept only the authorization call to a database, leaving Remix to handle sessions, cookies, and auth state for us. 

Use MSW to Mock Authentication in Remix

Let's spice things up by adding GraphQL to our application. 

Since you are prototyping mock-first, you don't have to write any GraphQL schemas or define any resolvers. Instead, you will utilize Mock Service Worker to intercept valid GraphQL queries by their _type_ and _name_, and respond with the same semantic JSON responses matching the queries.

- [Describing GraphQL APIs](http://mswjs.io/docs/network-behavior/graphql)

Intercept and Mock GraphQL Queries in MSW

In this lesson, you will use the Mock Service Worker `graphql.mutation()` request handler to allow the users to leave reviews for the movie they've watched. 

- [`graphql` namespace](http://mswjs.io/docs/api/graphql)

Intercept and Mock GraphQL Mutations in MSW

Error responses in GraphQL are a bit unique. They must still produce a "200 OK" response and list the errors in the response body instead. Let's follow the GraphQL specification to produce a valid GraphQL error response in our Mock Service Worker handlers. 

Mock GraphQL Errors in MSW

Operation-based GraphQL mocking allows you to move fast without investing time into schemas or resolvers. 

But, when integrating Mock Service Worker into an existing application, going schema-first can be advantageous. Here's how you can route every GraphQL request to be resolved against a GraphQL schema, mocked or real, and use mock resolvers to control individual types and fields. 

Resolve GraphQL Requests Against a Mock Schema in MSW

Let's improve our schema-first GraphQL mocks by intercepting _all_ GraphQL operations—both queries and mutations—using a single Mock Service Worker `graphql.operation()` request handler. 

- [`graphql.operation()`](https://mswjs.io/docs/api/graphql#graphloperationresolver)

Mock All GraphQL Operations in MSW

When your application communicates with multiple GraphQL services, it becomes problematic to distinguish them by operation type and name alone. Learn how to take the service's endpoint into account when intercepting GraphQL queries and mutations with Mock Service Worker.

- [`graphql.link()`](https://mswjs.io/docs/api/graphql#graphqllinkurl)

Endpoint-Based GraphQL Mocking in MSW

Mocking responses is great but what if you want to observe requests without affecting them? In this lesson, we will learn how to instruct Mock Service Worker to perform intercepted requests as-is.

- [`passthrough()`](https://mswjs.io/docs/api/passthrough)

Perform Intercepted Requests As-Is in MSW

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()`](https://mswjs.io/docs/recipes/response-patching)

Combine Original and Mocked Responses in MSW

You can send any data from your response resolvers. Let's implement a video streaming functionality by responding with a `ReadableStream` with Mock Service Worker. As a cherry on top, you will learn how to transform that video stream to inject server-side latency and see how our application's player handles it.

Mock REST and GraphQL APIs with Mock Service Worker

Instructor

Course content (24 lessons)

Instructor