useLogin & useToken 훅

[hwisaac]

useLogin

로그인할 때 사용하는 훅입니다.

type TUseLogin = () => IToken;

사용예시

const Test = () => {
  // react-query 의 useMutation 이 리턴하는 값과 같습니다.
  const {mutate : login, isLoading} = useLogin() ;  

  const handleClick = () => {
    login({ email: "testt", password: "testt" }; // 로그인 요청을 보낸 뒤, tokens 객체를 을 캐싱합니다.
  }
  return (
    <button onClick={handleClick} >Login</button>
  )
}

정의

// libs/hooks/useLogin.tsx
import { useMutation, useQueryClient } from "@tanstack/react-query";
import React from "react";
import { ax } from "../axiosClient";

const useLogin = (options?) => {
  const queryClient = useQueryClient();

  const output = useMutation(
    ["login"],
    (loginInfo: ILoginInput) => ax.postLogin(loginInfo),
    Object.assign(
      {
        cacheTime: 1000 * 30,
        onSuccess: (data) => {
          queryClient.setQueryData(["token"], () => data);
        },
      },
      options
    )
  );

  return output;
};

export default useLogin;

useLogin 이 리턴하는 메서드

{
   data, // 로그인 요청의 응답
   error,
   isError,
   isIdle,
   isLoading,
   isPaused,
   isSuccess,
   mutate, // 로그인 요청을 보내는 메서드 
   mutateAsync, // 로그인 요청을 보내는 메서드 (Promise 버전)
   reset,
   status,
 }

options

{
  networkMode,
  onError, // 에러 발생시 작동할 함수
  onMutate, // 요청보낼때 작동하는 함수
  onSettled, // 응답을 받으면 작동할 함수
  onSuccess, // 성공시 작동할 함수
  retry,
  retryDelay,
}

---

useToken 훅

로그인할 때 사용하는 훅입니다.

주의!
이미 로그인으로 react-query 에 token 이 캐싱이 된 상태여야 합니다!!

사용예시

const useGetUser = (options?) => {
  const { accessToken, refreshToken } = useToken(); // 캐싱된 accesToken 을 가져온다

  // accessToken 을 적용한다.
  return useQuery(["user"], () => ax.getUser(accessToken), { 
    ...options,
  });

  
};

정의

import { useQueryClient } from "@tanstack/react-query";
import React from "react";
import { useEffect } from "react";
import { useState } from "react";

interface IToken {
  accessToken: string;
  refreshToken: string;
}

const useToken = (): IToken => {
  const queryClient = useQueryClient();
  if (queryClient.getQueryData(["token"]))
    return queryClient.getQueryData(["token"]);
  console.log("캐싱된 token 이 없습니다.");
  return { accessToken: "", refreshToken: "" };
};

export default useToken;