tRPC - nextjs - app router - build fail on timeout error when using useSuspenseQuery

Question

I created T3-app and my build fail on timeout error. If I change this line:

const [leads] = api.lead.getLeads.useSuspenseQuery();

to

const { data: leads } = api.lead.getLeads.useQuery();

the build pass.

How can I use useSuspenceQuery? What am I doing wrong? Besides not having a loading/error state, is there any other benefit of suspenceQuery?

the complete error:

Failed to build /page: / (attempt 1 of 3) because it took more than 60 seconds. Retrying again shortly.
Failed to build /page: / (attempt 2 of 3) because it took more than 60 seconds. Retrying again shortly.
Failed to build /page: / after 3 attempts.
Export encountered an error on /page: /, exiting the build.
 ⨯ Static worker exited with code: 1 and signal: null

this is the page component:

import { api, HydrateClient } from "@/trpc/server";
import { Leads } from "./_components/Leads/Leads";

export default async function Home() {
  await api.lead.getLeads.prefetch();

  return (
    <HydrateClient>
      <Leads />
    </HydrateClient>
  );
}

This is the leads table component where the useSuspenseQuery is at:

"use client";

import { api } from "@/trpc/react";
import { Table } from "../../UI";
import { columns } from "./LeadsTable.columns";

export const LeadsTable = () => {
  const [leads] = api.lead.getLeads.useSuspenseQuery();

  return (
    <Table
      rows={leads}
      columns={columns}
      initialState={{
        sorting: {
          sortModel: [
            {
              field: "id",
              sort: "desc",
            },
          ],
        },
      }}
    />
  );
};

This is the entire repo: https://github.com/ItayTur/sohnim-io

It's hard to answer your question directly, but here’s some information that might be useful. useQuery fetches data on the client, so your page will be statically generated (if eligible) without data. On the other hand, useSuspenseQuery fetches data on both the server and the client, meaning your page will be statically generated (if eligible) with data. Refer to this answer for more details. Your backend server might be blocking requests from the Node.js server, or there could be something preventing the Node.js server from sending requests. — Duannx
– Duannx, Commented Jan 6 at 3:19
The issue you're encountering with useSuspenseQuery in your Next.js app using the App Router and tRPC is likely due to the way Suspense and server-side rendering (SSR) interact. When using useSuspenseQuery, the component expects the data to be available immediately, and if it's not, it will suspend the rendering until the data is fetched. This can cause issues during the build process, especially if the data fetching takes too long or if it's not available at build time. I will provide an answer asap — rizzling
– rizzling, Commented Jan 6 at 16:41

Amany Mohamed · Accepted Answer · 2025-01-09 13:49:30Z

1

I agree with rizzling about that::

"useSuspenseQuery()" block rendering until the data fetching, but useQuery() handle rendering and loading data at the same time.

you know that rendering time is limited to 60 sec:: so in first hook(useSuspenseQuery) the rendering won't start until data fetched (whatever time it takes), but in second hook(useQuery)the rendering will start immediately in parallel with fetching data.

let say that fetching data takes 90sec , if u use useSuspenseQuery :: you will not face any issue because the rendering will start after 90 sec if u user useQuery :: you will face the timeout error because you reach 60th sec and no data has been fetched yet ...

you need to revise your api performance and need to use(logging,monitoring tools) to see bottlenecks

Use Suspense in Home Component to handle asynchronous rendering like ::

await api.lead.getLeads.prefetch(); return ( <Suspense fallback={Loading...}> {/* use whatever u want to display here inside div :) */} );

edited Jan 9 at 13:49

answered Jan 8 at 12:14

Amany Mohamed

338 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Itay Tur Jan 9 at 8:59

Its the otherway around. The build fail on timeout with useSuspenseQuery. but pass successfully with useQuery.

Amany Mohamed Jan 9 at 13:33

Sorry, I was confused.

Amany Mohamed Jan 9 at 13:50

I edit my answer now , hope this help you

Collectives™ on Stack Overflow

tRPC - nextjs - app router - build fail on timeout error when using useSuspenseQuery

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related