trpc-msw

tRPC for Mock Service Worker. Register a resolver per procedure, typed off your router, and every call your client makes is answered at the network by tRPC's own handlers — so batching, your transformer, your error formatter, FormData input and subscriptions over server-sent events or WebSockets all behave exactly as they do against the real server.

Table of Contents

• 🚀 Getting Started
• 📖 Documentation
• ⚖️ License

🚀 Getting Started

pnpm i -D trpc-msw msw @trpc/server

import type { AppRouter } from "./server/router";

import { initTRPC } from "@trpc/server";
import { setupServer } from "msw/node";
import superjson from "superjson";
import { createTRPCMsw } from "trpc-msw";

const { handlers, reset, trpc } = createTRPCMsw<AppRouter>({
  endpoint: "http://localhost:3000/api/trpc",
  // The same options your server's initTRPC.create takes, so mocked answers are shaped like real ones
  t: initTRPC.create({ transformer: superjson }),
  webSocketUrl: "ws://localhost:3000/api/trpc",
});
const server = setupServer(...handlers);

beforeAll(() => server.listen());
afterEach(() => reset());
afterAll(() => server.close());

test("reads a post", async () => {
  trpc.post.byId.query(({ input }) => ({ id: input.id, title: "" }));
  trpc.post.onAdd.subscription(async function* () {
    yield { id: "", title: "" };
  });
  // ...drive your client
});

📖 Documentation

We highly recommend you take a look at the documentation to level up. How it works and every upstream msw-trpc issue it answers are on the trpc-msw docs page.

Key exports

| Export | Description | | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | | createTRPCMsw | The factory — returns the msw handlers, the typed trpc registration proxy and reset | | TRPCMswOptions | t, endpoint, and optionally webSocketUrl, createContext, allowMethodOverride and onUnhandledProcedure | | UnhandledProcedureAction | Error (default) answers an unregistered procedure with tRPC's NOT_FOUND; Bypass passes the request on to the next handler |

A resolver receives what a real one does — ctx, input, path, signal — and returns the procedure's output before the transformer, which runs on the way out as it does on the server. A thrown TRPCError reaches the client through your error formatter.

Commands

Run from packages/trpc-msw/:

pnpm build        # compile to dist/
pnpm test         # vitest watch mode (coverage is run from the repo root)
pnpm lint:fix     # auto-fix lint
pnpm typecheck    # type check

⚖️ License

This project is licensed under the Apache-2.0 license.