useQuery + suspense
는 정상적으로 작동되지만 useQueries + suspense
는 suspense가 작동하지 않습니다.
그래서 하나의 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를 적용하기 전처럼 분기를 통해 로딩을 처리해주었습니다.