genetic-orange

How to hide error messages in console when throwing in queryFn()?

In the docs it says to throw on errors in the queryFn, but when I do I get this error displayed in the console This is the code I use to throw to test

export const organisationQueryOptions = (orgName: string) => queryOptions({
    queryKey: ['organisation'],
    queryFn: async (): Promise<Organization> => {throw new UnauthenticatedError("User authentication invalid, can't access " + orgName)},
})

export const organisationQueryOptions = (orgName: string) => queryOptions({
    queryKey: ['organisation'],
    queryFn: async (): Promise<Organization> => {throw new UnauthenticatedError("User authentication invalid, can't access " + orgName)},
})

I use router to catch the error higher up in an errorboundry, but if I step through the code, the error gets printed to the console before it steps out of query. I checked both in a dev and production build and using both firefox and chrome, all display the same error I feel like I'm missing something simple here, would appreciate a hand

4 Replies

genetic-orangeOP•9mo ago

Route component

import { createFileRoute } from '@tanstack/react-router'
import {organisationQueryOptions} from '@/api/organisation.ts'
import {useSuspenseQuery} from "@tanstack/react-query";

export const Route = createFileRoute('/_dashboardLayout/o/$name/')({
  component: Index,
  loader: (opt) => {
      opt.context.queryClient.ensureQueryData(organisationQueryOptions(opt.params.name))
  },
})

function Index() {
  const params = Route.useParams()
  const org = useSuspenseQuery(organisationQueryOptions(params.name))

  return <>{org.data.name}</>
}

import { createFileRoute } from '@tanstack/react-router'
import {organisationQueryOptions} from '@/api/organisation.ts'
import {useSuspenseQuery} from "@tanstack/react-query";

export const Route = createFileRoute('/_dashboardLayout/o/$name/')({
  component: Index,
  loader: (opt) => {
      opt.context.queryClient.ensureQueryData(organisationQueryOptions(opt.params.name))
  },
})

function Index() {
  const params = Route.useParams()
  const org = useSuspenseQuery(organisationQueryOptions(params.name))

  return <>{org.data.name}</>
}

I set the error component in the __root route

export const Route = createRootRouteWithContext<{userStore: StoreApi<UserState>, queryClient: QueryClient}>()({
    component: RootComponent,
    errorComponent: FetchErrorComponent,
    beforeLoad: async ({context: { userStore }}) => {
        const user = await getUser()
        userStore.setState({activeUser: user})
    }
})

export const Route = createRootRouteWithContext<{userStore: StoreApi<UserState>, queryClient: QueryClient}>()({
    component: RootComponent,
    errorComponent: FetchErrorComponent,
    beforeLoad: async ({context: { userStore }}) => {
        const user = await getUser()
        userStore.setState({activeUser: user})
    }
})

correct-apricot•9mo ago

genetic-orangeOP•9mo ago

hmm, I don't follow Docs says to throw on error: https://tanstack.com/query/latest/docs/framework/react/guides/query-functions#handling-and-throwing-errors

Query Functions | TanStack Query React Docs

A query function can be literally any function that returns a promise. The promise that is returned should either resolve the data or throw an error. All of the following are valid query function conf...

genetic-orangeOP•9mo ago

I think I got what you mean, after a bit more poking at it, it looks like it a router issue. Errors in the loader isn't handled properly I've moved this across to the router section as it sounds like it's an issue with how I use router https://discord.com/channels/719702312431386674/1313718746984087574

Gaming

Programming

How to hide error messages in console when throwing in queryFn()?

Did you find this page helpful?