next.js - tRPC - nextjs - app router - build fail on timeout error when using useSuspenseQuery - Stack Overflow

admin管理员组

文章数量:1134570

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:

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

• next.js
• trpc
• t3

Share Improve this question Follow edited Jan 5 at 12:38 Itay Tur asked Dec 30, 2024 at 11:40 Itay TurItay Tur 1,62533 gold badges2626 silver badges5252 bronze badges 2

• 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 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 Commented Jan 6 at 16:41

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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 :) */} );

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.

本文标签： nextjstRPCnextjsapp routerbuild fail on timeout error when using useSuspenseQueryStack Overflow