react-query throwing errors question

[AlexMachin1997]

Hi everyone,

so I've created a custom hook at work and it was really easy to get everything work. However, after doing testing it seem's my custom hook never get's put into an "error" state it's always "loading" or "success".

As you can see in the image below I'm throwing an error which get's passed back to the catch block where I return data. Does react-query see this as a success internally hence the "success" state ? I can manually throw an error in the catch block but the only issue is I can't return any additional data to the UI which is a bit annoying.

Is this normal for react-query ? If so how can I pass additional data back as well.

Sorry if this is an obvious question, I'm sill working out how react-query handles things internally.

[TkDodo]

It's not react-query specific, but about Promises. React Query expects a resolved or rejected Promise. In async functions, thrown Errors get transformed to a failed Promise.

But here, you:

• throw an Error
• catch it
• return [], which will give you a resolved Promise with an empty Array as data

and that is what react-query will see.

I can manually throw an error in the catch block

If you catch an Error, you have to re-throw it so that RQ can see it. Not sure what you mean

but the only issue is I can't return any additional data to the UI which is a bit annoying.

not sure what you mean by that at all.

---

if you only catch the error because you want to log it, it would be better to not catch it all and use the onError callback provided by react-query to do that.

[AlexMachin1997]

Hey @TkDodo

Actually that helps me out. So in order to put a react-query query into an "error" state you need to rethrow the error even after successfully catching it.

Let me clear the last part up. The problem I'm having is when you throw an error you can't pass any additional data back. When I created my own version of react-query in an old project I had total control so I could return a blank API response and put the query into an error state, though this seems slightly different with react-query.

How can you throw an error and pass some data back ? I can see the onError call-back for the useQuery hook but that's probably only useful for when you want to trigger some notifications like you have in your blog post about error handling.

[TkDodo]

1. it doesn’t have to be an error, it needs a rejected promise. You can do Promise.reject({ data: 'foo' }) and then that object will be available in the error field returned from useQuery.
2. you can also throw anything in js, so even throw myObject would do
3. I think it’s best to create a subclass of error and then throw that, like throw MyError(data). This still identifies as Error with an instanceof check and also has a .message property, so it will conform to all types of runtime errors, but it’s really up to you.

[AlexMachin1997]

Ah gotcha that make'se sense now.

Thank's for clearing that up @TkDodo I understand where I'm going wrong now 👍