joshpachner•4mo ago

useQuery never enters Error state

When an error is thrown within the query the query stays in isLoading state. Within the query we throw expected errors. When a resource isn't found (ie the id doesn't exist in the database). We are using svelte. What do we need to do to get the useQuery to get into the error state? 🙏🙏🙏

5 Replies

Convex Bot•4mo ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

joshpachnerOP•4mo ago

For more context. within my svelte file <script> tag

  import { useQuery } from "convex-svelte";

  const params = $page.params;
  const tournamentId = params.tournamentId as Id<"tournaments">;
  let group = $state("tournament");
  const query = useQuery(api.tournaments.getTournamentToRun, {
    tournamentId: tournamentId,
  });

  import { useQuery } from "convex-svelte";

  const params = $page.params;
  const tournamentId = params.tournamentId as Id<"tournaments">;
  let group = $state("tournament");
  const query = useQuery(api.tournaments.getTournamentToRun, {
    tournamentId: tournamentId,
  });

and then accessing the results of the query

        {#if query.error}
        <!-- query.error never occurs even when throwing a new ConvexError in the convex function -->
          <p>Error: {query.error.toString()}</p>
        {:else if query.isLoading}
          <p>Loading...</p>
        {:else}
          <TournamentContent tournamentRun={query.data} />
        {/if}

        {#if query.error}
        <!-- query.error never occurs even when throwing a new ConvexError in the convex function -->
          <p>Error: {query.error.toString()}</p>
        {:else if query.isLoading}
          <p>Loading...</p>
        {:else}
          <TournamentContent tournamentRun={query.data} />
        {/if}

within the getTournamentToRun function

export const getTournamentToRun = query({
  args: { tournamentId: v.id("tournaments") },
  handler: async(ctx, args) => {
    await requireIdentity(ctx);
    const tournament = await ctx.db.get(args.tournamentId);
    if (tournament == null) {
      throw new ConvexError("Tournament not found");
    }
....

export const getTournamentToRun = query({
  args: { tournamentId: v.id("tournaments") },
  handler: async(ctx, args) => {
    await requireIdentity(ctx);
    const tournament = await ctx.db.get(args.tournamentId);
    if (tournament == null) {
      throw new ConvexError("Tournament not found");
    }
....

joshpachnerOP•4mo ago

the example found here https://docs.convex.dev/functions/error-handling/application-errors I already use elsewhere in my app. But there's no example of how to properly handle the errors from a useQuery

Application Errors | Convex Developer Hub

If you have expected ways your functions might fail, you can either return

joshpachnerOP•4mo ago

and we are using "useQuery" according to the example found here https://github.com/get-convex/convex-svelte/tree/main?tab=readme-ov-file

GitHub

GitHub - get-convex/convex-svelte

Contribute to get-convex/convex-svelte development by creating an account on GitHub.

jamwt•4mo ago

might be a good thing to bring into the #sveltekit forum, where the eyes on it are all pretty invested into svelte + convex

useQuery never enters Error state

Did you find this page helpful?