[React Query] useQueries에서 suspense가 작동하지 않을 때

해당 문제는 React query의 이슈 중 하나입니다.

useQuery + suspense는 정상적으로 작동되지만 useQueries + suspense는 suspense가 작동하지 않습니다.

그 이유는 Suspense가 첫번째 Promise를 반환한 뒤에 작동되지 않아서입니다.

그래서 하나의 Promise만을 반환하는 useQuery에서는 문제가 없지만, 여러 비동기 요청들이 병렬적으로 진행되는 useQueries에서는 제대로 작동하지 않는 것입니다.

그래서 저도 테스트해본 결과,

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000, // 1분
      refetchOnMount: false,
      refetchOnReconnect: false,
      refetchOnWindowFocus: false,
      suspense: true,
    },
  },
})

이런 식으로 default option에 suspense: true 옵션을 주고,

const [
  {
    data: nowPlaying,
    isFetched: isNowPlayingFetched,
    isError: isNowPlayingError,
  },
  { data: upcoming, isFetched: isUpcomingFetched, isError: isUpcomingError },
  { data: popular, isFetched: isPopularFetched, isError: isPopularError },
] = useQueries([
  {
    queryKey: ['nowPlaying'],
    queryFn: () => moviesApi.nowPlaying(),
  },
  {
    queryKey: ['upcoming'],
    queryFn: () => moviesApi.upcoming(),
  },
  {
    queryKey: ['popularMovie'],
    queryFn: () => moviesApi.popular(),
  },
])

useQueries를 하니 suspense가 동작하지 않았습니다.

하지만,

const {
  data: nowPlaying,
  isFetched: isNowPlayingFetched,
  isError: isNowPlayingError,
} = useQuery(['nowPlaying'], () => moviesApi.nowPlaying())
const {
  data: upcoming,
  isFetched: isUpcomingFetched,
  isError: isUpcomingError,
} = useQuery(['upcoming'], () => moviesApi.upcoming())
const {
  data: popular,
  isFetched: isPopularFetched,
  isError: isPopularError,
} = useQuery(['popularMovie'], () => moviesApi.popular())

이런 식으로 useQuery로 각각 처리하게 되면 suspense가 정상적으로 작동하는 것을 확인할 수 있었습니다.

그래서, 저는 useQuries를 사용하는 부분에서는 suspense를 적용하기 전처럼 분기를 통해 로딩을 처리해주었습니다.

빠른 시일 내에 해당 이슈가 해결되기를 바라는 마음입니다...