How to have typesafe custom errors returned from useQuery

[spaansba]

Hi,

I recently got into tanstack Query and I am amazed by how smooth everything works, so first of all massive thanks to the creators/maintainers ♥.

I was wondering one thing, is it possible to get an extend of an Error through useQuery.

Example query:

export function createLoggedInUserQueryOptions(userId: string | undefined) {
  return queryOptions({
    queryKey: ["loggedInUser", userId],
    queryFn: async () => {
      if (!userId) {
        throw new Error("user Id is undefined")
      }
      const { data, error, status } = await supabase
        .from("profiles")
        .select(`id, username, avatar_url`) // asd to throw an PostGrest error
        .eq("id", userId)
        .single()

      if (error && status !== 406) {
        throw error as PostgrestError
      }

      return data
    },
    enabled: !!userId, // This doesnt effect prefetched queries.
  })
}

this query can return a PostgrestError which looks like this:

export default class PostgrestError extends Error {
  details: string
  hint: string
  code: string

  constructor(context: { message: string; details: string; hint: string; code: string }) {
    super(context.message)
    this.name = 'PostgrestError'
    this.details = context.details
    this.hint = context.hint
    this.code = context.code
  }
}

However, the Error returned in the useQuery hook is still of type Error. This makes a lot of sense since how would useQuery know what kind of Error is returned, and an Error can basically be anything.

Was just wondering how other developers handle these kind of cases, to still get typesafety on Errors returned from useQuery.

For some reason type assertion is not working either for me (the following never logs anything):

  if (error instanceof PostgrestError) {
    console.log(error.code) 
  }

Help is greatly appreciated!

[TkDodo]

• https://tanstack.com/query/v5/docs/framework/react/typescript#typing-the-error-field
• https://tanstack.com/query/v5/docs/framework/react/typescript#registering-a-global-error