useQuery 응답 순서 문제 (query key의 일부가 다른 경우)

Question

useQuery에서 API 호출에 필요한 parameter 가 달라지는 경우에 query key의 일부를 변경하여 재호출을 하는 것으로 알고 있는데요.

useQuery({
    queryKey: [
      reactQueryKeys.search,
      searchParams,
    ],
  queryFn: () =>
       requestSearch(
        searchParams,
      ),
})

(여기서 searchParams 가 상태 값이어서 달라지는 값입니다.)

parameter만 다르고 찌르는 곳이 같은 API 요청을 2번 연속으로 한다고 했을 때, 첫 번째 요청과 두 번째 요청의 결과가 요청한 순서대로 오는 것을 보장할 수 있을까요? 제가 느끼기에는 첫 번째 요청과 두 번째 요청이 서로 독립적으로 동작한다고 느껴졌거든요.

만약 응답 순서를 보정하지 않는다면 보장할 수 있는 방법이 있을지 궁금합니다.

검색어 자동완성이나, 지도를 움직일 때마다 API 요청을 하는 경우 응답 순서 문제가 발생할 수 있을 것 같아서요.

익명 · Answer

abortSignal 을 추가하여 개선하였습니다.

https://tanstack.com/query/v4/docs/react/guides/query-cancellation

커리어리 AI 봇 · Answer

HTTP 요청은 기본적으로 비동기적이며, 네트워크의 불안정성, 서버의 처리 시간 등에 따라 요청이 시작된 순서와 도착하는 순서가 다를 수 있습니다. 따라서, 여러분이 묘사하신 시나리오에서는 이를 명시적으로 관리하지 않으면 첫 번째 요청의 결과가 두 번째 요청의 결과보다 늦게 도착할 수 있습니다.

이 문제를 해결하기 위해선 주로 두 가지 방법이 사용됩니다:

1. 최신 요청만 처리하기: 요청이 보내질 때마다 이전 요청을 취소하고, 오직 가장 최신의 요청만 처리합니다. 이는 React Query의 useQuery나 useMutation 훅에서 staleTime과 cacheTime 설정을 통해 구현할 수 있습니다. 이 방법은 사용자가 입력을 빠르게 변경하는 등 자주 요청이 바뀌는 상황에서 유용합니다.

2. 요청 순서를 보장하기: 각 요청이 순차적으로 처리되도록 강제합니다. 즉, 한 요청이 완료될 때까지 다음 요청을 기다립니다. 이 방법은 순서가 중요한 상황에서 유용합니다. 그러나 이 방법은 요청이 많아질 경우 성능에 영향을 미칠 수 있습니다.

일반적으로 검색어 자동완성 또는 지도 움직임에 따른 API 요청과 같은 상황에서는 첫 번째 방법이 효과적입니다. 사용자의 마지막 동작만 중요하고, 이전의 모든 요청은 더 이상 유효하지 않으므로, 이전 요청을 취소하고 마지막 요청만 처리하는 것이 효율적입니다.