[240613 TIL] Auth with Tanstack Query

initializeUser 등의 메서드는 필요없다

Tanstack Query 로 Auth 를 구성 할 때, 로그인 등의 경우,
initializeUser 등을 따로 실행할 필요가 없습니다.

staleTime을 infinity 로 설정하고 로그인 등의 함수에 invalidateQueries 를 해주는 것이 더 좋습니다!

class AuthAPI {
    private axios: Axios;
    private token: string | null;

    constructor(axios: Axios) {
        const accessToken: string | null = localStorage.getItem("accessToken");
        this.axios = axios;
        this.token = accessToken;
    }

public async initializeUser(accessToken: string | null = this.token) {
    try {
        const user = await this.getUser(accessToken);
        if (user && user.id && user.nickname) {
            useAuthStore.getState().setUser({
            userId: user.id,
            avatar: user.avatar ? user.avatar : null,
            nickname: user.nickname,
        });
        useAuthStore.getState().setLoggedIn(true);
        } else {
            console.log("토큰 만료, 다시 로그인 하세요");
        }
    } catch (error) {
        console.log("유저 데이터 가져오기 실패 => ", error);
    }
}
// ... 하략 ...

 

이런 형식의 intializeUser 메서드를 만들고 매번 호출하여 쓰는 것보다

useQuery 해주고, useEffect 에서 initializeUser(zustand), invalidateQueries

function useAuth() {
    const queryClient = useQueryClient();
    const accessToken: string | null = localStorage.getItem("accessToken");

    const { user, isLoggedIn, logOut, setUser, setLoggedIn } = useAuthStore(
        useShallow((state) => ({
            user: state.user,
            isLoggedIn: state.isLoggedIn,
            logOut: state.logOut,
            setUser: state.setUser,
            setLoggedIn: state.setLoggedIn,
        }))
    );

// 쿼리 날리고, staleTime : Infinity, retry: 0  
const { data: userData, isLoading: userLoading } = useQuery({
    queryKey: ["user", accessToken ?? ""],
    queryFn: () => api.auth.getUser(accessToken),
    staleTime: Infinity,
    retry: 0,
});

// userData 가 바뀔때, 값이 있으면
// initializeUser 에서 하던 동작 수행
useEffect(() => {
    if (userData) {
        try {
            if (userData && userData.id && userData.nickname) {
                setUser({
                    userId: userData.id,
                    avatar: userData.avatar ? userData.avatar : null,
                    nickname: userData.nickname,
                });
                setLoggedIn(true);
            } else {
                console.log("토큰 만료, 다시 로그인 하세요");
            }
        } catch (error) {
            console.log("유저 데이터 가져오기 실패 => ", error);
        }
    }
}, [userData, setUser, setLoggedIn]);

const { mutateAsync: signUp } = useMutation({
    mutationFn: (data: AuthData) => api.auth.signUp(data),
});

// onSuccess 시 invalidateQueries 로 다시 쿼리 날림
const { mutateAsync: logIn } = useMutation({
    mutationFn: (data: AuthData) => api.auth.logIn(data),
    onSuccess: () => {
        queryClient.invalidateQueries({ queryKey: ["user"] });
    },
});

const { mutateAsync: getUser } = useMutation({
    mutationFn: (accessToken: string | null) =>
    api.auth.getUser(accessToken),
});

// onSuccess 시 invalidateQueries 로 다시 쿼리 날림
const { mutateAsync: changeProfile } = useMutation({
    mutationFn: ({ accessToken, data }: ChangeProfileParams) =>
    api.auth.changeProfile(accessToken, data),
    onSuccess: () => {
        queryClient.invalidateQueries({ queryKey: ["user"] });
    },
});

    return {
        user,
        isLoggedIn,
        signUp,
        logIn,
        getUser,
        changeProfile,
        logOut,
        userLoading,
    };
}

export default useAuth;

이렇게 엮어서 쓰는 편이 훨씬 좋습니다~!