문제 상황
SWR은 api 요청이 실패하면, 정확히는 에러가 나게 된다면 defult값으로 몇 초 이내에
재요청을 해서 데이터를 업데이트 시키는 기능이 탑재되어 있는데요
해당 문서를 보시면 shouldRetryOnError: true 항목이 있습니다 fetcher에 400대 혹은 500대 에러가 발생할 경우 서버측으로 재요청하게 되는데 계속해서 에러가 나는 경우 서버에 부하를 줄 수 있는 상황이 생기게 됩니다
해결 방법
SWR을 사용하는 기본 방법은
const {data, error, isLoading, isValidating, mutate} = useSWR(key, fetcher, options)
// 여기서 option에 접근해 막아주어야 합니다
(...) useSWR('api/user', axios.get('api/user').then(res => res.data), {shouldRetryOnError: false})처럼 fetcher를 지정해주고, 옵션값을 지정해주면 됩니다
한가지 더 팁을 드리자면,
알고 계시겠지만 user라는 api는 로그인한 유저가,
즉 토큰이 있을 경우에만 호출할 수 있도록 예외처리를 해주어야 하기 때문에
const {data, isLoading, mutate} = useSWR(token ?? 'api/user', fetcher, options)
// 혹은
const {data, isLoading, mutate} = useSWR(token ? null : 'api/user', fetcher, options)위처럼 조건문을 걸어 제한을 줄 수도 있습니다
🌳