tRPC useQuery Promise Rejected Without Error — Hook Stuck in pending
Context
I'm using tRPC in a Next.js App Router project and encountering an issue where the result of useQuery is stuck in a pending state. The promise is marked as rejected, but there's no error provided, and the backend is actually returning valid data.
Setup
Here's how I'm calling the query inside a client component:
"use client";
const event = trpc.viewer.public.event.useQuery(
{
username: "bird-dog.com",
eventSlug: "helo",
isTeamEvent,
org: org ?? null,
fromRedirectOfNonOrgLink: props?.fromRedirectOfNonOrgLink,
},
{
refetchOnWindowFocus: false,
enabled: Boolean(username) && Boolean(eventSlug),
}
);
Issue
Even though the server returns valid event data, the hook returns the following state:
{
"status": "pending",
"fetchStatus": "idle",
"isPending": true,
"isSuccess": false,
"isError": false,
"error": null,
"promise": {
"status": "rejected",
"reason": {}
},
"trpc": {
"path": "viewer.public.event"
}
}
Notably:
The promise is rejected
error is null
Backend Handler
Here's the tRPC handler:
export const event = publicProcedure.input(ZEventInputSchema).query(async (opts) => {
const { user } = await getUserSession(opts.ctx);
const handler = await importHandler(namespaced("event"), () => import("../event.handler"));
return handler({ input: opts.input, userId: user?.id });
});
Actual Server Response
The server logs show a valid response like this:
{
"id": 1156,
"title": "helo",
"description": "<p>gelo</p>",
"slug": "helo",
"length": 15,
"price": 0,
"currency": "usd",
"owner": {
"id": 48,
"username": "bird-dog.com"
},
"schedule": {
"id": 124,
"timeZone": "America/Phoenix"
},
]
Why is the useQuery's underlying promise being rejected with an empty reason ({})?
If the backend resolves successfully, what could cause the client-side useQuery to enter this inconsistent state?
I'm using tRPC in a Next.js App Router project and encountering an issue where the result of useQuery is stuck in a pending state. The promise is marked as rejected, but there's no error provided, and the backend is actually returning valid data.
Setup
Here's how I'm calling the query inside a client component:
"use client";
const event = trpc.viewer.public.event.useQuery(
{
username: "bird-dog.com",
eventSlug: "helo",
isTeamEvent,
org: org ?? null,
fromRedirectOfNonOrgLink: props?.fromRedirectOfNonOrgLink,
},
{
refetchOnWindowFocus: false,
enabled: Boolean(username) && Boolean(eventSlug),
}
);
Issue
Even though the server returns valid event data, the hook returns the following state:
{
"status": "pending",
"fetchStatus": "idle",
"isPending": true,
"isSuccess": false,
"isError": false,
"error": null,
"promise": {
"status": "rejected",
"reason": {}
},
"trpc": {
"path": "viewer.public.event"
}
}
Notably:
The promise is rejected
error is null
Backend Handler
Here's the tRPC handler:
export const event = publicProcedure.input(ZEventInputSchema).query(async (opts) => {
const { user } = await getUserSession(opts.ctx);
const handler = await importHandler(namespaced("event"), () => import("../event.handler"));
return handler({ input: opts.input, userId: user?.id });
});
Actual Server Response
The server logs show a valid response like this:
{
"id": 1156,
"title": "helo",
"description": "<p>gelo</p>",
"slug": "helo",
"length": 15,
"price": 0,
"currency": "usd",
"owner": {
"id": 48,
"username": "bird-dog.com"
},
"schedule": {
"id": 124,
"timeZone": "America/Phoenix"
},
]
Why is the useQuery's underlying promise being rejected with an empty reason ({})?
If the backend resolves successfully, what could cause the client-side useQuery to enter this inconsistent state?
