[DAY57]TIL

tanstack query - mutation 사용하여 로그인기능 구현하기

1. 문제
   tanstack query를 사용해서 처음 로그인 기능을 구현해보았다.
   create, update, delete 는 useMutation을, read 는 useQuery를 사용해야 함.
   그런데 기존에 사용하던 redux THUNK에 비해 간단하지만 어떤 구조로 넣어야하는지 잘 모르겠었다.

2. 시도
   공식문서 500번 읽기..
   공식문서의 예제

const mutation = useMutation({
    mutationFn: (event) => {
      event.preventDefault()
      return fetch('/api', new FormData(event.target))
    },
  })

하지만 나는 fetch를 쓰지 않는다 !

3. 해결

  const login = useMutation(
    async (item: LoginInfo) => {
      const data = await guest.post(
        `${process.env.REACT_APP_SERVER_URL}/users/login`,
        item
      );
      return data;
    },
    {
      onSuccess(data) {
        const info = data.headers.authorization;
        const token = info.split(" ")[1];
        setCookie("token", token, { path: "/", maxAge: 3540 });
        navigate(-1);
      },
      onError(err) {
        alert("아이디와 비밀번호를 확인해주세요 !");
        setLoginInfo({ email: "", password: "" });
      },
    }
  );

4. 알게된 점
   redux THUNK보다 간편하게 성공, 에러 시의 처리를 해줄 수 있었다.
   onSuccess, onError, onSettled 등 여러가지 status에 대한 처리를 해줄 수 있다.