 Resources from Artem Zakharchenko in 2024

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.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Mock REST and GraphQL APIs with Mock Service Worker

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

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

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

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

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

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

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

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

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

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

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

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

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 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.

Respond With a ReadableStream in MSW

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

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

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

Remix is a full stack web framework that focuses on web standards and the server/client model so that you can develop the features your users want and need without being bogged down in over-abstractions. When you get good with Remix, you actually get good at the foundations of web development.

remix

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. 

Topics

Instructors

Content Type

Artem Zakharchenko