[React-Query] Login

📝 react qyery를 이용한 로그인 및 로그아웃

예시 - react qyery를 이용한 로그인

📌 axios (request 설정 보기)

📌 PrivateRoute

import React from 'react'
import {useLocation} from 'react-router'
import {Navigate, Outlet} from 'react-router-dom'
import useQuery from 'react-query path'

// 로그인 없이 볼 수 있는 페이지 URL
export const publicPage = ['/', '/exam']
export const danamicPage = ['/exam/detail'] // /exam/detail/15

function PrivateRoutes() {
  const {user} = useAuthsQuery.useAuth()
  const {pathname, search} = useLocation()
  const from = pathname + search
  const danamicPath = pathname.replace(/\/[\d]+/g, '')

  const isPublicPage = publicPage.includes(pathname)
  const isDynamicPage = danamicPage.includes(danamicPath)

  if (user || isPublicPage || isDynamicPage) {
    return <Outlet />
  }

    return <Navigate to="/login" replace state={{from}} />
}

export default PrivateRoutes

📌 PublicRoute

import React from 'react'
import {Navigate, useLocation} from 'react-router'
import {Outlet} from 'react-router-dom'
import useQuery from 'react-query path'

function PublicRoute() {
  const location = useLocation()
  const redirectPath = location.state?.from || '/'
  const {user} = useAuthsQuery.useAuth()

  return user ? <Navigate to={redirectPath} replace /> : <Outlet />
}

export default PublicRoute

📌 login

const {signIn} = useAuthsQuery.useAuth()

const formik = useFormik({
  initialValues: {
    email: '',
    password: ''
  },
  validationSchema,
  onSubmit: async ({email, password}) => {
    signIn(email, password)
  }
})

📌 logout

const {user, signOut} = useAuthsQuery.useAuth()

const onClickSignout = useCallback(() => signOut(), [])

📌 register

const {signUp} = useAuthsQuery.useAuth()

const formik = useFormik({
  initialValues,
  validationSchema,
  onSubmit: async ({email, password, phoneNumber}) => {
    signUp(email, password, phoneNumber)
  }
})

📌 react Query

import {useQuery, useQueryClient} from 'react-query'
import {useNavigate} from 'react-router'
import {useToast} from '/toast'
import {publicPage} from '/PrivateRoute'
import {deleteAuth, getAuth, postAuth, postRegister} from '/api/auth'
import {queryKeys} from 'react-query/constants'
import {clearStoredUser, getStoredUser, setStoredUser} from 'react-query/storage'
import {onlyNumberRegExr} from '/reg'

function useAuth() {
  const queryClient = useQueryClient()
  const toast = useToast()
  const navigate = useNavigate()
  const home = publicPage.includes(location.pathname)

  const {data: user} = useQuery([queryKeys.user], () => getAuth(), {
    initialData: getStoredUser,
    refetchOnWindowFocus: !home,
    refetchOnReconnect: !home,
    retry: false,
    onSuccess: (received) => {
      if (received) {
        setStoredUser(true)
      } else {
        clearUser()
      }
    },
    onError: (err) => {
      if (err?.status === 404) {
          clearUser()
    }
    }
  })

  // 로그인
  async function signIn(email, password) {
    try {
      await postAuth({
        email,
        password
      }).then(() => {
        toast.success('로그인 성공했습니다.')
        updateUser(true)
      })
    } catch (e) {
      toast.error('로그인 실패했습니다.')
    }
  }

  // 회원가입
  async function signUp(email, password, phone) {
    try {
      await postRegister({
        email,
        phone,
        password
      })

      navigate('/login')
      toast.success('회원가입 성공.')
    } catch (e) {
      toast.error('회원가입에 실패했습니다.')
    }
  }

  // 로그아웃
  async function signOut() {
    try {
      await deleteAuth()
      clearUser()
    } catch (e) {
      toast.error('로그아웃에 실패했습니다.')
    }
  }

  function updateUser(value) {
    queryClient.setQueryData(queryKeys.user, value)
  }

  function clearUser() {
    queryClient.setQueryData(queryKeys.user, null)
    clearStoredUser()
  }

  return {user, signIn, signUp, signOut}
}

export default {useAuth}

📌 storage

const USER_KEY = 'userId'

// helper to get user from localstorage
export function getStoredUser() {
  const storedUser = localStorage.getItem(USER_KEY)
  return storedUser ? storedUser : null
}

export function setStoredUser(value) {
  localStorage.setItem(USER_KEY, value)
}

export function clearStoredUser() {
  localStorage.removeItem(USER_KEY)
}

👉 react query 옵션

queryClient.removeQueries() - 모든 캐쉬 제거