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


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

useQuery + suspenseは正常に動作しますが、useQueries + suspenseは停止して動作しません.

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


したがって、useQueryが1つのPromiseを返すのは問題ないが、複数の非同期要求を並列に処理する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をしましたが、懸念は動いていません.
でも、
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をそれぞれ処理することで、懸念が正常に動作することを確保することができる.
したがって,useQuriesを用いた部分では,懸念を適用する前のように分岐処理によりロードした.
できるだけ早くこの問題を解決したいのですが...