懸念が「React Query」ユーザーQueryで機能しない場合

この問題はRealct queryのホットな問題です。

これは、Suspenceが最初のPromiseに戻ってから動作しないためです。

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000, // 1분
      refetchOnMount: false,
      refetchOnReconnect: false,
      refetchOnWindowFocus: false,
      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(),
  },
])

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())