문제

분명히 @tanstack/react-query의 QueryClientProvider로 감싼 페이지 안에서 mutation을 사용하고 있다. 그럼에도 왜 이런 에러가 발생하는 걸까.

해결 과정

회원가입의 step3와 같은 api, 같은 mutation이다. useMutation을 주석처리하니 정상적으로 동작하는 걸 보니 mutation의 문제가 확실한데.

export const useEmailVerifyMutation = () => useMutation(postEmailVerify);
export const postEmailVerify = (emailVerifyData: EmailVerifyRequest) =>
  publicApi.post('/auth/verify-code', emailVerifyData);

원인

QueryProvider가 ModalProvider 안에 있어서 발생한 문제였다. QueryProvider에서 서버 에러에 대한 처리(토스트 띄우기)를 일괄적으로 처리하기 위해 ModalProvider를 안에 넣었던 것인데.

ModalProvider가 더 안에 있으면 Query에서 Modal을 못쓰고, QueryProvider가 안에 있으면 Modal에서 Query를 못쓴다. 우선, 후자로 하고, 전자를 예외처리 하면 될 듯하다.

결론

<QueryProviderWrapModal>
  <ModalProvider>
    <QueryProvider>{children}</QueryProvider>
  </ModalProvider>
</QueryProviderWrapModal>

위와 같이 ModalProvider를 QueryProvider로 감싸고, 그안에 QueryProvider를 하나 더 두었다. 바깥 QueryProvider는 Modal에서 Query를 사용할 수 있도록 만든 것이다. 이렇게 QueryProvider는 가장 가까운 것을 사용하니 에러는 없을텐데, 성능 상에 혹은 다른 부작용이 있는지 걱정이다.