Handling api response errors with react query

[idenyigabriel]

Hello,
I've been on a project for a while, and can't seem to find a solution to a react-query problem. React query hooks seems to work perfectly fine when my fetch request returns a status 200. But when an error is caught and thrown via a fetch request, react-query permanently stays in fetching state.
I'd love to know, is throwing an error via a request not enough to trigger that react query error status. How can I go about it?

[TkDodo]

I'd love to know, is throwing an error via a request not enough to trigger that react query error status.

It should be enough. Throwing in an async function will convert the Error to a failed promise. react-query will then give you the result in an error state (isError: true and state === 'error'). You can see that in action here: https://codesandbox.io/s/nostalgic-feynman-wrm60

Please note that react-query retries queries per default (3 times, with an exponential backoff). So you will not "immediately" see the error (it takes a couple of seconds in the example). You can customize this in the query options: https://react-query.tanstack.com/docs/guides/query-retries

If this is not working for you, it would be good if you could post a codesandbox example that shows what is not working.

[idenyigabriel]

Thanks a lot, it was of great help!
Apparently, it wasn't the code, it was me 🤕
seems promise chaining has some effect on how react-query resolves success and error, am hoping to find out why.
Thanks again!