I want to be able to provide a custom error (properly typed) to react-query’s useQuery hook. The reason for this custom error is to be able to provide to it the status code of the response in case it fails, so I can determine whether or not to use the useErrorBoundary option based on that status.
I’ve read that it’s not a very good idea to provide generics to useQuery like so:
<code>const { data, isLoading } = useQuery<DataType, CustomErrorType>(
['example'],
() => getData(),
{
useErrorBoundary: (error) => error.status >= 500
}
)
</code>
<code>const { data, isLoading } = useQuery<DataType, CustomErrorType>(
['example'],
() => getData(),
{
useErrorBoundary: (error) => error.status >= 500
}
)
</code>
const { data, isLoading } = useQuery<DataType, CustomErrorType>(
['example'],
() => getData(),
{
useErrorBoundary: (error) => error.status >= 500
}
)
And that it’s a better idea to let react-query infer the types by typing the queryFn instead. If I were using axios this wouldn’t be an issue since it provides some utilities and types for errors, but I’m working with fetch.
So, what would be the best way to get a correctly typed custom error in this case?