Emre Posts - tRPC

Emre

•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