기록 & 참고용 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에서 동일한 방식으로 할 수 있다.