optimistic-gold

usequery error typing

Hello everyone, When I use a queryKey created with queryOptions in useQuery, the data type is automatically inferred from the return value of queryFn. However, the error type is inferred as Error. Is there a reason for this? Other than using generics in useQuery to define the error type or using declare, are there any other options?

9 Replies

foreign-sapphire•2w ago

there is no way to type what a function throws in TS, so they cannot be inferred from the throws inside of your queryFn, if you want typed errors, you need to pass them yourself errors are only typed when used as values, like this:

class MyCustomError extends Error {
  someProperty = 123
}

const myError = new MyCustomError()
myError.someProperty // TS knows this is a number

class MyCustomError extends Error {
  someProperty = 123
}

const myError = new MyCustomError()
myError.someProperty // TS knows this is a number

See: - https://github.com/microsoft/TypeScript/issues/13219 - https://github.com/microsoft/TypeScript/issues/56365

optimistic-goldOP•2w ago

Thank you for the kind explanation — it was really helpful!

genetic-orange•2w ago

You could register a global error type: https://tanstack.com/query/latest/docs/framework/react/typescript#registering-a-global-error

TypeScript | TanStack Query React Docs

React Query is now written in TypeScript to make sure the library and your projects are type-safe! Things to keep in mind: Types currently require using TypeScript v4.7 or greater Changes to types in...

foreign-sapphire•2w ago

sure, but imo this is a footgun, what if another error gets thrown from some other place and you think it's an AxiosError? I'd rather recommend using stuff like axios.isAxiosError(error) to narrow the typing

genetic-orange•2w ago

Sure, for runtime safety. Just showing documented options

deep-jade•2w ago

yeah I don't really recommend setting the global registry to AxiosError or something. Especially if select throws an error, it won't be one. The better example for this is to actually set it to unknown, as we default to Error. Maybe updating those docs would be good 🙂

optimistic-goldOP•2w ago

Thank you! Would it be okay if I update the examples in the docs accordingly and open a PR? I was thinking about this again — is there a specific reason why the default type of error is Error rather than unknown? Wouldn’t it be more meaningful to change the default error type itself to unknown, rather than only setting the type of global errors to unknown? I believe the default error type should be set to unknown to enforce stricter type checking, while still allowing users to explicitly specify the error type via generics when they know it. If you agree, I’ll include this change in the PR as well.

other-emerald•2w ago

It was changed from unknown to error a while back: https://tkdodo.eu/blog/react-query-and-type-script#what-about-error https://github.com/TanStack/query/pull/4706

GitHub

feat(TError) : Make TError default to Error instead of unknown by j...

This PR makes the TError default to Error instead of unknown, more info about this here

React Query and TypeScript

Combine two of the most powerful tools for React Apps to produce great user experience, developer experience and type safety.

optimistic-goldOP•2w ago

I see, that makes sense. So by default, unknown would be the more accurate type for errors, but since queryFn usually returns a promise, it was changed to Error. I’ll go ahead and update the docs and submit a PR.

Gaming

Programming

usequery error typing

Did you find this page helpful?