MSW 쿼리 파라미터 값 가져오기

지난 글에 이어서 MSW를 사용하다가 마주한 오류에 대해 이야기해보려고 한다.

🚨 오류 상황

API에 쿼리 파라미터가 포함된 요청을 모킹하고 있었다.

import { http, HttpResponse } from "msw";

const baseUrl = process.env.EXPO_PUBLIC_BASE_URL;

export const couponHandlers = [
  http.get(`${baseUrl}/coupons/deadline?page=0&size=10`, () => {
    return HttpResponse.json(...);
  }),
  http.get(`${baseUrl}/coupons/deadline?page=1&size=10`, () => {
    return HttpResponse.json(...);
  }),
];

페이지네이션을 이용한 데이터를 가져오는 핸들러를 작성했다.

그러나 페이지 수가 증가하여도 계속 page=0인 경우만 가져오고 있었다. 그래서 FlatList에서 중복된 키가 존재한다는 오류가 발생했다.

💡 해결 과정

MSW에서 쿼리 파라미터를 따로 빼내는 방법이 있나 검색을 해보니 바로 나왔고, 이를 이용해서 해결을 할 수 있었다.

import { http, HttpResponse } from "msw";

const baseUrl = process.env.EXPO_PUBLIC_BASE_URL;

export const couponHandlers = [
  http.get(`${baseUrl}/coupons/deadline`, ({ request }) => {
    const url = new URL(request.url);

    const page = url.searchParams.get("page");

    if (page === "0") {
      return HttpResponse.json(...);
    }

    return HttpResponse.json(...);
  }),
];

이런 식으로 url 문자열을 파싱하여 searchParams에 접근 후 추출할 수 있고, searchParams 값에 따라 반환 값을 다르게 해주었다.

🤔 왜 하드코딩은 인식을 못 할까?

공식 문서를 보니 아래와 같은 내용이 있었다.

When providing request pathnames, make sure to exclude any query parameters. Query parameters have no effect on resource identification and instead serve as the means to send additional information to the server. If MSW encounters a query parameter, it removes it and prints a warning that you should remove it too. The values of the query parameters is still available to you in the request.url property in the response resolver.

요약하자면 MSW에서 쿼리 파라미터를 만난다면 해당 부분을 제거한다는 것이다. 그리고 response resolver에서 request.url로 접근해서 사용할 수 있다고 한다.

내가 /coupons/deadline?page=0&size=10으로 보내든 /coupons/deadline?page=1&size=10으로 보내든 상관없이 두 개 모두 쿼리 파라미터가 제거된 /coupons/deadline로 인식이 된다는 것이었다. 그래서 맨 처음에 있던 /coupons/deadline?page=0&size=10에 대한 response가 반환이 되는 것 이었다.

마무리하며

MSW에 대해 조금 더 알게 되었고, 해결 방법은 언제나 공식 문서에 있다는 것을 다시 한번 깨닫게 되었다.

참고

• MSW - Intercepting requests