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

Answer 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 :) */} );

Answer 2

Here are some steps and considerations to help you use useSuspenseQuery correctly and avoid build timeouts

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.

Home component

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

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

  return (
    <HydrateClient>
      // you can change the loading div to some nice loader component or else
      <Suspense fallback={<div>Loading...</div>}>
        <Leads />
      </Suspense>
    </HydrateClient>
  );
}

LeadsTable Component

"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",
            },
          ],
        },
      }}
    />
  );
};

Explanation:

1. Suspense Fallback: The Home component now includes a Suspense fallback. This ensures that the build process and the user experience have a fallback UI while the data is being fetched.

2. useSuspenseQuery: The LeadsTable component uses useSuspenseQuery to fetch the data. This ensures that the component will suspend rendering until the data is available.

Additional Considerations:

• API Performance: Ensure that your API is performing well and responding quickly. Slow API responses can cause the build process to timeout.

• Error Handling: Consider adding error handling to manage cases where the data fetching fails. This can be done using the useSuspenseQuery hook's error state.