🐛 query enabled 옵션 수정 (#77)

soma-dalda · Nov 3, 2022 · 59470b0 · 59470b0
1 parent 4413f75
commit 59470b0
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 37 deletions.
diff --git a/src/hooks/useGetCompany.ts b/src/hooks/useGetCompany.ts
@@ -16,7 +16,7 @@ const useGetCompany = (options?: UseQueryOption) => {
     () => getCompany({ companyDomain: domain }),
     {
       ...options,
-      enabled: Boolean(domain) && options?.enabled,
+      enabled: domain ? options?.enabled : false,
     }
   )
 

diff --git a/src/hooks/useGetOrderByOrderId.ts b/src/hooks/useGetOrderByOrderId.ts
@@ -16,7 +16,7 @@ const useGetOrderByOrderId = (options?: UseQueryOption) => {
     () => getOrderByOrderId({ orderId: id }),
     {
       ...options,
-      enabled: options?.enabled && Boolean(id),
+      enabled: id ? options?.enabled : false,
     }
   )
 }

diff --git a/src/hooks/useGetOrders.ts b/src/hooks/useGetOrders.ts
@@ -28,7 +28,7 @@ const useGetOrders = (type: 'company' | 'consumer', options?: UseQueryOption) =>
     () => getConsumerOrdersByUserId(),
     {
       ...options,
-      enabled: options?.enabled && Boolean(user?.id),
+      enabled: user?.id ? options?.enabled : false,
     }
   )
 }

diff --git a/src/hooks/useGetUser.ts b/src/hooks/useGetUser.ts
@@ -1,3 +1,4 @@
+import { AxiosError } from 'axios'
 import { useQuery, UseQueryOptions, QueryKey } from 'react-query'
 import { getUser } from '@/apis/service'
 import { RequestError, User } from '@/type'
@@ -10,21 +11,39 @@ type UseQueryOption = Omit<
 >
 
 const useGetUser = (options?: UseQueryOption) => {
-  const [value] = useLocalStorage('accessToken')
+  const [value, setValue, refetch] = useLocalStorage('accessToken')
 
-  return useQuery<User, RequestError>('getUser', getUser, {
-    ...options,
-    enabled: options?.enabled && Boolean(value),
-    onError: async (error) => {
-      if (typeof options?.onError === 'function') {
-        options?.onError(error)
-      }
-      if (error.response?.status === 401) {
-        const res = await http.post<string>('/api/user-auth/refresh')
-        window.localStorage.setItem('accessToken', res.data)
-      }
+  const query = useQuery<User, RequestError>(
+    'getUser',
+    async () => {
+      refetch()
+      return getUser()
     },
-  })
+    {
+      ...options,
+      enabled: value ? options?.enabled : false,
+      onError: async (error) => {
+        if (typeof options?.onError === 'function') {
+          options?.onError(error)
+        }
+        if (error.response?.status === 401) {
+          try {
+            const res = await http.post<string>('/api/user-auth/refresh')
+            setValue(res.data)
+          } catch (err) {
+            setValue('')
+            throw new AxiosError()
+          }
+        } else {
+          setValue('')
+        }
+        query.remove()
+      },
+      retry: 0,
+    }
+  )
+
+  return query
 }
 
 export default useGetUser
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
@@ -1,25 +1,9 @@
 import { useEffect, useState } from 'react'
 
-const useLocalStorage = <T = string>(key: string, initialValue?: T) => {
-  const [storeValue, setStoreValue] = useState<T>()
+const useLocalStorage = <T = string>(key: string, initialValue: T | string = '') => {
+  const [storeValue, setStoreValue] = useState<T | string>()
 
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      setStoreValue(initialValue)
-    }
-    try {
-      const prevValue = window.localStorage.getItem(key)
-      if (prevValue) {
-        setStoreValue(JSON.parse(prevValue))
-      } else {
-        setStoreValue(initialValue)
-      }
-    } catch (err) {
-      setStoreValue(initialValue)
-    }
-  }, [])
-
-  const setValue = (data: T | ((val?: T) => T)) => {
+  const setValue = (data: string | T | ((val?: T | string) => T)) => {
     const value = data instanceof Function ? data(storeValue) : data
 
     setStoreValue(value)
@@ -33,7 +17,31 @@ const useLocalStorage = <T = string>(key: string, initialValue?: T) => {
     }
   }
 
-  return [storeValue, setValue] as const
+  const refetch = () => {
+    if (typeof window === 'undefined') {
+      setValue(initialValue)
+    }
+    try {
+      const prevValue = window.localStorage.getItem(key)
+      if (prevValue) {
+        if (typeof prevValue === 'string') {
+          setValue(prevValue)
+        } else {
+          setValue(JSON.parse(prevValue))
+        }
+      } else {
+        setValue(initialValue)
+      }
+    } catch (err) {
+      setValue(initialValue)
+    }
+  }
+
+  useEffect(() => {
+    refetch()
+  }, [window.localStorage])
+
+  return [storeValue, setValue, refetch] as const
 }
 
 export default useLocalStorage
diff --git a/src/pages/Domain/hooks/useGetCompanyRequest.ts b/src/pages/Domain/hooks/useGetCompanyRequest.ts
@@ -13,7 +13,7 @@ const useGetCompanyRequest = (options?: UseQueryOption) => {
 
   return useQuery<Company, RequestError>(`${domain}`, () => getCompany({ companyDomain: domain }), {
     ...options,
-    enabled: Boolean(domain) && options?.enabled,
+    enabled: domain ? options?.enabled : false,
   })
 }