login with react-query, useMutation

기록 & 참고용 login with react-query, useMutation 간단 예시

// loginContainer
import { useMutation } from "react-query";

  const mutation = useMutation<
    AxiosResponse<LoginResponse>,
    AxiosError,
    LoginFrm,
    unknown
  >((loginInfo: LoginFrm) => login({ ...loginInfo }), {
    onSuccess: (loginData: AxiosResponse<LoginResponse>) => {
      localStorage.setItem("access", loginData.data.access_token);
      setCookie("refresh_token", loginData.data.refresh_token, {
        path: "/",
        secure: true,
      });
      setLoginSuccess(() => true);
      setUserInfo({
        id: loginData.data.user.pk,
      });
      sessionStorage.setItem("login_state", "true");
    },
  });

  
  const onSubmit = () => {
    mutation.mutate(loginInfo, {
      onSuccess: (loginData: AxiosResponse<LoginResponse>) => {
        history.push("/home");
      },
    });
  };
  
  <LoginComponent 
  mutation={mutation}
  onSubmit={onSubmit}
  />

// LoginComponent
import { UseMutationResult } from "react-query";
import { LoginFrm, LoginResponse } from "src/types";

interface Props {
  mutation: UseMutationResult<
    AxiosResponse<LoginResponse>,
    AxiosError,
    LoginFrm,
    unknown
  >;
  onSubmit: () => void;
  }
    
  <InputWrapper>
    <SubmitBtn onClick={onSubmit}>로그인</SubmitBtn>
  </InputWrapper>

최상위 component 에서 mutation에 대한 에러 핸들링을 할 수 있다.

// index.tsx

const queryClient = new QueryClient({
  mutationCache: new MutationCache({
    onError: (error: unknown | AxiosError) => {
      if (axios.isAxiosError(error)) {
        const errorCode: number = error.response?.data.code;
        HandleErrors(errorCode); // 에러 팝업 띄우기
      } else {
        throw error; // error boundary로 전달
      }
    },
  }),
});

// query에 대한 에러 핸들링은 new QueryCache에서 동일한 방식으로 할 수 있다.