Error: Switched to client rendering because the server rendering errored: UNAUTHORIZED

export const dynamic = 'force-dynamic'

export default function Settings() {
  prefetch(trpc.categories.getMany.queryOptions())
  return (
    <HydrateClient>
      <CategoriesView />
    </HydrateClient
  )
}

export const dynamic = 'force-dynamic'

export default function Settings() {
  prefetch(trpc.categories.getMany.queryOptions())
  return (
    <HydrateClient>
      <CategoriesView />
    </HydrateClient
  )
}

'use client'
export const CategoriesView = () => {
  return <CategoriesSection />
}

'use client'
export const CategoriesView = () => {
  return <CategoriesSection />
}

export const CategoriesSection = () => {
  return (
    <Suspense fallback={<p>Loading...</p>}
      <ErrorBoundary fallback={<p>Error</p>}
        <CategoriesSectionSuspense />
      </ErrorBoundary>
    </Suspense>
  )
}

const CategoriesSectionSuspense = () => {
  const trpc = useTRPC()
  const { data } = useSuspenseQuery(trpc.categories.getMany.queryOptions())

  return <CategoriesDataTable data={data} />
}

export const CategoriesSection = () => {
  return (
    <Suspense fallback={<p>Loading...</p>}
      <ErrorBoundary fallback={<p>Error</p>}
        <CategoriesSectionSuspense />
      </ErrorBoundary>
    </Suspense>
  )
}

const CategoriesSectionSuspense = () => {
  const trpc = useTRPC()
  const { data } = useSuspenseQuery(trpc.categories.getMany.queryOptions())

  return <CategoriesDataTable data={data} />
}