Нужно ли в react-router-dom перекладывать изначальную загрузку на loader при использовании с @tanstack/react-query с lazy компонентами?

Question

[Александр Антонов]

В проекте использую @tanstack/react-query, сейчас стал переводить некоторые страницы на ленивую загрузку и задался этим вопросом, загружает ли useQuery данные до того как мы загрузили этот самый ленивый бандл со страницей? скорее всего нет, значит скорее всего нужно прокидывать промис из лоадера в Suspense/Await, потом получать через useAsyncValue и далее передавать эти данные как initialData в useQuery, ну и плюс добавить опцию предотвращающая загрузку при монтировании и в итоге получим что то вроде этого

const Component = () => {
  const data = useAsyncValue()
  const query = useQuery({
    // ...
    refetchOnMount: false,
    initialData: data
  })

  return (
    <>
      {/* ... */}
    </>
  )
}

const ComponentLoader = () => {
  const loaderData = useLoaderData() as { promise: Promise<unknown> }

  return (
    <Suspense fallback={<Spinner />}>
      <Await
        resolve={loaderData.promise}
        errorElement={<ErrorPage />}
      >
        <Test />
      </Await>
    </Suspense>

  )
}