Error handling with a query in React
Okay so my question is lets say you are calling in a query on the frontend via useQuery but then it could throw an error usually with mutation you can wrap it in a try catch block that gets triggered on click and what not but what about useQuery, Im using convexError as per documentation but in the docs it only shows how to implement error handling for mutation, I just cant wrap my head around how to gracefully handle an error.
Frontend:
const makingAQuery = useQuery(
api.foo.getBar,
foo ? { fooId } : "skip"
);ConvexBackend:
export const getBar = query({
args: { fooId: v.id("foo") },
handler: async (ctx, args) => {
const foo = await ctx.db.get(fooId);
//How Can you handle this error on the frontend?
if (!foo) {
throw new ConvexError({
message: "Foo not found"
});
}
return {
....
};
},
});As per Convex docs only covers the mutation part that im aware of:
const handleSomething = async () => {
try {
await doSomething({ a: 1, b: 2 });
} catch (error) {
const errorMessage =
// Check whether the error is an application error
error instanceof ConvexError
? // Access data
error.data.message
: // Must be some developer error,
// and prod deployments will not
// reveal any more information about it
// to the client
"Unexpected error occurred";
// do something with errorMessage
}How can similarly be done with a query
Hope this makes sense!
