🔥 쿼리 재시도

358자

5분

강의 목차

재시도 지연

TanStack Query에서 useQuery 쿼리가 실패할 때(쿼리 함수가 오류를 발생시킬 때), 자동으로 쿼리를 다시 시도합니다. 이는 해당 쿼리 요청이 최대 연속 재시도 횟수(기본값 3)에 도달하지 않았거나, 재시도 허용 여부를 결정하는 함수를 제공한 경우에 해당합니다.

재시도 설정은 전역 수준과 개별 쿼리 수준 모두에서 구성할 수 있습니다.

retry = false로 설정하면 재시도를 비활성화합니다.
retry = 6으로 설정하면 실패한 요청을 6번 재시도한 후 함수가 던진 최종 오류를 표시합니다.
retry = true로 설정하면 실패한 요청을 무한히 재시도합니다.
retry = (failureCount, error) => ...와 같이 설정하면 요청 실패 이유에 따라 사용자 정의 로직을 적용할 수 있습니다.

서버에서는 서버 렌더링을 최대한 빠르게 하기 위해 재시도 기본값을 0으로 설정합니다.

import { useQuery } from '@tanstack/react-query'
 
// 특정 쿼리에 대해 일정 횟수의 재시도 설정
const result = useQuery({
  queryKey: ['todos', 1],
  queryFn: fetchTodoListPage,
  retry: 10, // 오류를 표시하기 전에 실패한 요청을 10번 재시도합니다
})
 typescript

참고: 오류 속성의 내용은 마지막 재시도 시도까지 useQuery의 failureReason 응답 속성의 일부가 됩니다. 따라서 위의 예에서 오류 내용은 처음 9번의 재시도 시도(총 10번의 시도) 동안 failureReason 속성의 일부가 되며, 모든 재시도 시도 후에도 오류가 지속되면 마지막에 error의 일부가 됩니다.

재시도 지연

TanStack Query에서 재시도는 요청 실패 직후 바로 이루어지지 않습니다. 표준적으로 각 재시도 시도에 점진적으로 백오프 지연을 적용합니다.

기본 retryDelay는 각 시도마다 두 배씩 증가하도록 설정되어 있습니다(1000ms부터 시작). 하지만 30초를 초과하지 않습니다:

// 모든 쿼리에 대한 설정
import {
  QueryCache,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'
 
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
    },
  },
})
 
function App() {
  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
}
 typescript

권장하지는 않지만, 프로바이더와 개별 쿼리 옵션 모두에서 retryDelay 함수/정수를 재정의할 수 있습니다. 함수 대신 정수로 설정하면 지연 시간은 항상 동일합니다:

const result = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodoList,
  retryDelay: 1000, // 재시도 횟수와 관계없이 항상 1000ms 후에 재시도합니다
})
 typescript

이 방식으로 쿼리 재시도를 설정하면 네트워크 오류나 일시적인 서버 문제에 대해 더 유연하게 대응할 수 있습니다. 또한 백오프 전략을 사용함으로써 서버에 과도한 부하를 주는 것을 방지할 수 있습니다. 하지만 재시도 횟수와 지연 시간을 설정할 때는 사용자 경험과 서버 리소스를 고려해야 합니다. 너무 많은 재시도나 긴 지연 시간은 사용자의 대기 시간을 증가시킬 수 있으므로 신중하게 결정해야 합니다.

강의 내용

재시도 지연