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-ui/settings

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