Implement Mock Service Worker with Storybook to intercept tRPC requests in Next.js 13 (app router)

main.ts

// .storybook/main.ts

const config: StorybookConfig = {
  // ...other config
  staticDirs: ["./public"],
};

export default config;

mocks.ts

import superjson from "superjson";
import { createTRPCMsw } from "msw-trpc";
import type { AppRouter } from "@acme/api";
import { todos } from "@acme/mocks";

export const mockTrpc = createTRPCMsw<AppRouter>({
  transformer: {
    input: superjson,
    output: superjson,
  },
});

export const mockGetTodos = mockTrpc.todos.all.query((_req, res, ctx) => {
  return res(ctx.status(200), ctx.data(todos));
});

MockTrpcProvider.tsx

// Wrap your stories with a tRPC provider.
// However, the msw-trpc package does not currently support request batching.
// Use httpLink instead so that tRPC requests are not batched within stories. 

trpc.createClient({
  transformer: superjson,
  links: [
    httpLink({
      url: `${getBaseUrl()}/api/trpc`,
      headers() {
        return {
          "content-type": "application/json",
        };
      },
    }),
  ],
}),

package.json

"devDependencies": {
  "msw": "1.3.2",
  "msw-storybook-addon": "1.9.0",
  "msw-trpc": "1.3.4",
},
"msw": {
  "workerDirectory": ".storybook/public" // <-- place your mockServiceWorker.js in here
}

preview.ts

// .storybook/preview.ts

import type { Preview } from "@storybook/react";
import { initialize, mswLoader } from "msw-storybook-addon";
import { mockGetTodos } from "@acme/mocks";

initialize(
  {
    onUnhandledRequest: ({ method, url }) => {
      if (!url.pathname.includes("trpc")) return;
      console.log(`MSW:onUnhandledRequest [method] ${method}, [url] ${url}`);
    },
  },
  [mockGetTodos], // default handlers
);

const preview: Preview = {
  // ...other config
  decorators: [MockTrpcProvider],
  loaders: [mswLoader],
};

export default preview;