I'm using React Query with typescript to fetch data in my project and I'm trying to use the error the useQuery hook returns to display a message describing the error if it exists like this :
{isError && (error)? <p className=" text-[#ff0000] text-center font-semibold">{error?.response.data.message}</p> : null}
I'm having a problem with the error type :
How can I fix it, I couldn't find anything on the internet and if possible can anyone explain how to handle different thrown error with react query since you can throw anything in JS/TS
error
defaults to type unknown
because your queryFn
can throw anything, that's a javascript behaviour. throw 5
will give you number
as your error type. There is no good way to assert that, so unknown is the best possible type. It's also what TypeScript does now per default since v4.4 (useUnknownInCatchVariables)
The best way to make sure that your app runs as you want is to narrow the type at runtime. if (error instanceof Error)
does the trick, and the you can safely access error.message
.
If you are using axios
, the type is actually an AxiosError
, and axios has an axios.isAxiosError(error)
helper that checks for that and also narrows the type correctly.
The alternative is to provide generics to useQuery:
useQuery<Todo[], AxiosError>(['todos'], fetchTodos)
but this is bad for a couple of reasons:
select
, and a runtime error happens in there (because of some faulty logic), your error will be a "normal" Error
, but not an axios Error.Alas, as you can throw anything in JS, unknown is the most correct type.
I'm also going into more details in my blog:
https://tkdodo.eu/blog/react-query-and-type-script
Update: Since v4 "the type for error defaults to Error
".
Read more in the docs.