Error handling with new create-t3-app app dir template

Since the OnError callback got removed from usequery in tanstack query v5, how can i now handle (read: catch) errors when calling a protected procedure that is not a mutation? I am trying to call the "post.getSecretMessage" endpoint which is a protected procedure without being logged in, and it obviously is throwing an TRPCError. The problem is that this error stops the whole application and is not being handled correctly. I read the blog post from TkDodo (https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose) about how to do error handling in v5, but it doesnt work. This is the code as suggested in the blog:
const [queryClient] = useState(() => new QueryClient({
queryCache: new QueryCache({
onError: (error, query) => {
console.log("THIS IS AN ERROR MESSAGE HALLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO")
if(query.meta?.errorMessage) {
console.log(query.meta.errorMessage)
return
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
if(error?.message) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
console.log("THIS IS AN ERROR MESSAGE HALLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO")
}
}
})
}));
const [queryClient] = useState(() => new QueryClient({
queryCache: new QueryCache({
onError: (error, query) => {
console.log("THIS IS AN ERROR MESSAGE HALLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO")
if(query.meta?.errorMessage) {
console.log(query.meta.errorMessage)
return
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
if(error?.message) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
console.log("THIS IS AN ERROR MESSAGE HALLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO")
}
}
})
}));
When an error message is thrown, none of the console logs are being called and the error is not handled properly, thus breaking the application. The console log on api/trpc/[trpc]/route.ts is being called however.
const handler = (req: NextRequest) =>
fetchRequestHandler({
endpoint: "/api/trpc",
req,
router: appRouter,
createContext: () => createTRPCContext({ req }),
onError:
env.NODE_ENV === "development"
? ({ path, error }) => {
console.error(
`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
);
}
: undefined,
});
const handler = (req: NextRequest) =>
fetchRequestHandler({
endpoint: "/api/trpc",
req,
router: appRouter,
createContext: () => createTRPCContext({ req }),
onError:
env.NODE_ENV === "development"
? ({ path, error }) => {
console.error(
`❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
);
}
: undefined,
});
Breaking React Query's API on purpose
Why good API design matters, even if it means breaking existing APIs in the face of resistance.
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server