tRPCttRPC
Powered by
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
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>
  )
}
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 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>
}
'use client'

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

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

  return <h1>customer</h1>
}
image.png
image.png
tRPCJoin
Move Fast & Break Nothing. End-to-end typesafe APIs made easy.
5,015Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

Prefetch using Next App router not working with useQuery but works with useSuspenseQuery
Gabriel BeltrãoGGabriel Beltrão / ❓-help
15mo ago
Prefetch forEach
eyalllEeyalll / ❓-help
4y ago
Error using prefetch query with TanStack Query
coder2000Ccoder2000 / ❓-help
11mo ago
What is a useSuspenseQuery?
rustclanRrustclan / ❓-help
2y ago