Emre
Emre
TtRPC
Created by Emre on 4/13/2025 in #❓-help
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>
);
}
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>;
};
"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>;
};
2 replies