yWilliamY
tRPC•2y ago
yWilliam

Prefetch | useSuspenseQuery | Error: redacted | updateDehydratedSuspenseComponent

I would like to know if there is any alternative for my requirements:

1) The page finishes loading, just render after all the prefetch that exist
2) If any of the prefetch returns some type of error, the component that depends on that prefetch will not render
3) Don't keep flooding Error: redacted in the server console as shown in the print
4) The prefetch only tries once and not 3 times, I cannot change this number of attempts

As it stands today, it loads the page before performing all the prefetch because of Suspense
ErrorBoundary solves the problem of the component giving an error and not rendering it.
However, if I don't use Suspense and ErrorBoundary the page loads, it stays completely white until the 3 prefetch attempts are completed to return the error

import { api, HydrateClient } from '@/trpc/server'
import { ErrorBoundary } from 'react-error-boundary'
import { Suspense } from 'react'

export default async function Page() {
  void api.budget.getMeta.prefetch()
  void api.customer.getMeta.prefetch()

  return (
    <HydrateClient>
      <Suspense fallback={null}>
        <ErrorBoundary fallback={null}>
          <BudgetsMeta />
        </ErrorBoundary>
      </Suspense>

      <Suspense fallback={null}>
        <ErrorBoundary fallback={null}>
          <CustomersMeta />
        </ErrorBoundary>
      </Suspense>
    </HydrateClient>
  )
}


'use client'

import { api } from '@/trpc/react'

export const BudgetsMeta = () => {
  const [meta] = api.budget.getMeta.useSuspenseQuery()

  return <h1>budget</h1>
}


'use client'

import { api } from '@/trpc/react'

export const CustomersMeta = () => {
  const [meta] = api.customer.getMeta.useSuspenseQuery()

  return <h1>customer</h1>
}
image.png
image.png
Was this page helpful?