Next.js 15 에서 MSW 적용하기 (feat. GraphQL)

{
  "operationName": "Me",
  "variables": {},
  "query": "query Me {...}"
}

src/mocks
├── browser.ts
├── graphql.ts
├── handlers.ts
├── initServerMsw.ts
└── server.ts

// browser.ts
 
import { setupWorker } from 'msw/browser';
 
import { handlers } from './handlers';
 
export const worker = setupWorker(...handlers);

// server.ts
 
import { setupServer } from 'msw/node';
 
import { handlers } from './handlers';
 
export const server = setupServer(...handlers);

// initServerMsw.ts
 
export async function initServerMsw() {
  if (typeof window === 'undefined') {
    const { server } = await import('./server');
    server.listen({ onUnhandledRequest: 'bypass' });
  }
}

// handler.ts
 
import { gqlHandlers } from './graphql';
 
export const handlers = [ gqlHandlers({}) ];

async function parseRequestBody(
  request: Request,
): Promise<GqlOperation | GqlOperation[] | null> {
  try {
    return await request.clone().json();
  } catch (error) {
    console.error('[MSW] Failed to parse JSON:', error);
    return null;
  }
}

function createGraphQLInterceptor(operationHandlers: GqlHandler) {
  // 1. 핸들러가 비어 있으면 passthrough만 수행하는 핸들러를 반환
  if (!Object.keys(operationHandlers).length) {
    return http.post(BASE_URL, passthrough);
  }
 
  // 2. 핸들러가 있는 경우
  return http.post(BASE_URL, async ({ request, cookies }) => {
    // 2-1. 요청 본문 파싱 — 실패 시 원본 서버로 요청 전달
    const parsedBody = await parseRequestBody(request);
    if (!parsedBody) {
      return passthrough();
    }
 
    // 2-2. batch 요청(operation 2개 이상)은 단일 응답으로 답할 수 없으므로
    //      모킹하지 않고 원본 서버로 전달
    if (Array.isArray(parsedBody) && parsedBody.length > 1) {
      console.warn('[MSW] Batched GraphQL requests are not supported. Passing through.');
      return passthrough();
    }
 
    // 2-3. batchMax: 1 환경에서는 body가 길이 1의 배열로 오므로 단일 operation으로 정규화
    const { operationName, query, variables } = Array.isArray(parsedBody)
      ? parsedBody[0]
      : parsedBody;
 
    // 2-4. operationName에 대응하는 핸들러가 없으면 원본 서버로 전달
    const handler = operationHandlers[operationName];
    if (!handler) {
      return passthrough();
    }
 
    // 2-5. 핸들러를 호출하고 결과를 응답으로 반환
    console.info(`[MSW] Intercepted operation: ${operationName}`);
    return handler({ request, query, variables, operationName, cookies });
  });
}

export function gqlHandlers(handlers: GqlHandler) {
  return createGraphQLInterceptor(handlers);
}

import { http, passthrough } from 'msw';
 
export interface GqlOperation {
  operationName: string;
  query: string;
  variables: Record<string, unknown>;
}
 
export interface GqlHandler {
  [operationName: string]: (
    args: GqlOperation & {
      request: Request;
      cookies: Record<string, string>;
    },
  ) => Response | Promise<Response>;
}
 
const BASE_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/graphql`;
 
async function parseRequestBody(
  request: Request,
): Promise<GqlOperation | GqlOperation[] | null> {
  try {
    // Request body는 한 번 읽으면 재사용할 수 없으므로 복제본으로 파싱한다
    return await request.clone().json();
  } catch (error) {
    console.error('[MSW] Failed to parse JSON:', error);
    return null;
  }
}
 
function createGraphQLInterceptor(operationHandlers: GqlHandler) {
  if (!Object.keys(operationHandlers).length) {
    return http.post(BASE_URL, passthrough);
  }
 
  return http.post(BASE_URL, async ({ request, cookies }) => {
    const parsedBody = await parseRequestBody(request);
    if (!parsedBody) {
      return passthrough();
    }
 
    if (Array.isArray(parsedBody) && parsedBody.length > 1) {
      console.warn('[MSW] Batched GraphQL requests are not supported. Passing through.');
      return passthrough();
    }
 
    const { operationName, query, variables } = Array.isArray(parsedBody)
      ? parsedBody[0]
      : parsedBody;
 
    const handler = operationHandlers[operationName];
    if (!handler) {
      return passthrough();
    }
 
    console.info(`[MSW] Intercepted operation: ${operationName}`);
    return handler({ request, query, variables, operationName, cookies });
  });
}
 
export function gqlHandlers(handlers: GqlHandler) {
  return createGraphQLInterceptor(handlers);
}

import { HttpResponse } from 'msw';
 
import { gqlHandlers, type GqlHandler } from './graphql';
 
const userHandlers: GqlHandler = {
  Me: () =>
    HttpResponse.json({
      data: {
        me: {
          id: 1234,
          uuid: '5d7cb8f4-21d4-410b-b212-28208180b708',
          name: 't',
          email: 'test@gmail.com',
          organization: {
            subdomain: 'test.dev',
            code: 'test',
            url: 'https://test.example.com',
          },
        },
      },
    }),
};
 
export const handlers = [ gqlHandlers({ ...userHandlers }) ];

const batchHttpLink = new BatchHttpLink({
  fetch,
  uri,
  // dev: 배치당 operation 1개 → 요청이 개별 전송된다 (사실상 배칭 비활성화)
  batchMax: process.env.NEXT_PUBLIC_ENV === 'prod' ? 10 : 1,
});

// apollo-client/src/link/batch-http/batchHttpLink.ts
const loadedBody = optsAndBody.map(({ body }) => body); // 항상 배열
options.body = serializeFetchParameter(loadedBody, 'Payload');

// msw/src/core/utils/internal/parseGraphQLRequest.ts
const requestJson = await requestClone.json().catch(() => null);
if (requestJson?.query) {
  return { query, variables };
}
return null; // ← 배열 body는 여기로 떨어진다

import { http, HttpResponse, getResponse, bypass } from 'msw';
 
export function batchedGraphQLQuery(url, handlers) {
  return http.post(url, async ({ request }) => {
    const requestClone = request.clone();
    const payload = await request.clone().json();
 
    // 배치가 아닌 요청은 다른 핸들러가 처리하도록 넘긴다
    if (!Array.isArray(payload)) {
      return;
    }
 
    const responses = await Promise.all(
      payload.map(async (query) => {
        const queryRequest = new Request(requestClone, {
          body: JSON.stringify(query),
        });
        const response = await getResponse(handlers, queryRequest);
        return response || fetch(bypass(queryRequest));
      }),
    );
 
    const queryData = await Promise.all(responses.map((response) => response?.json()));
 
    return HttpResponse.json(queryData);
  });
}

const graphqlHandlers = [
  graphql.query('Me', () => HttpResponse.json({ data: { me: { id: 1234 } } })),
];
 
export const handlers = [
  batchedGraphQLQuery('/graphql', graphqlHandlers),
  ...graphqlHandlers,
];