EmreE
tRPC•9mo ago•
1 reply
Emre

Pre-rendering Error with TRPC useSuspenseQuery – "fetch failed" During Build

Summary

During the build process, the application attempts to pre-render the page containing the Greeting component. Since the component uses 
useSuspenseQuery
 to call a TRPC endpoint, pre-rendering triggers the call and results in a "fetch failed" error because the route isn’t available during build time. Known workarounds—switching to 
useQuery
 or using prefetch on the page component—prevent the error; however, these solutions are not acceptable in this case.

Code Samples

src/app/page.tsx
import { Greeting } from "@/components/greeting";
import { ErrorBoundary } from "next/dist/client/components/error-boundary";
import { ErrorFallback } from "@/components/error-fallback";
import { Suspense } from "react";
// Note: Prefetching the data (e.g., using prefetch(trpc.greeting.hello.queryOptions()))
// prevents the error, but this approach is not acceptable as per current requirements.
export default function Home() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <ErrorBoundary errorComponent={ErrorFallback}>
        <Suspense fallback={<div>Loading...</div>}>
          <Greeting />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

src/components/greeting.tsx (using 
useSuspenseQuery
)

"use client";
import { useTRPC } from "@/trpc/client";
import { useSuspenseQuery } from "@tanstack/react-query";
import React from "react";
export const Greeting = () => {
  const trpc = useTRPC();
  const { data } = useSuspenseQuery(trpc.greeting.hello.queryOptions());

  return <div>{data}</div>;
};
Was this page helpful?