danspe Posts - Convex Community

danspe

•Created by danspe on 6/21/2024 in #support-community

Error handling with a query in React

Hey guys just want to say huge thank you to the developers of Convex absolutely amazing product they are producing that I've been building my project on and been loving it since day 1. 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!

6 replies