CODEWITHSUNDEEP
reactjsreact-querytanstackreact-query
Thore
Thore

Reputation: 1838

Persisting error state in react-query until successful refetch

I'm using React Query to fetch a list of users via the useQuery hook. When the fetch fails, I display an error message along with a retry button. When I call refetch, both isError and error are immediately reset to false and null. This results in the error message disappearing momentarily, which I want to avoid.

Is there a way to persist the error state in React Query until the data is successfully fetched without using additional React useState to track the error manually? Ideally, I'd like to keep everything managed with react-query.

Any suggestions or best practices would be greatly appreciated!

    const { data, isLoading, isFetching, isError, refetch } = getUsers();

    if (isError) {
        return (
            <div className='border border-neutral-200 py-8 px-4 rounded-md text-center'>
                <div>
                    <Typography variant='base' as='h1' weight={500} className='text-black'>
                        Oh no, something went wrong!
                    </Typography>
                    <Typography variant='small' as='h1' weight={500} className='text-black'>
                        Sorry, we ran into an issue fetching the information. A quick retry might solve it.
                    </Typography>
                </div>
                <div className='mt-4'>
                    <Button impact='light' color='blue' onClick={() => refetch()} className='inline-flex px-4'>
                        {isFetching ? <Icon name='Loader' className='animate-spin' /> : 'Retry'}
                    </Button>
                </div>
            </div>
        );
    }

Upvotes: 2

Views: 72

Answers (2)

TkDodo
TkDodo

Reputation: 28833

When I call refetch, both isError and error are immediately reset to false and null.

This “depends” on the situation. If you have once successfully fetched data, this will not happen. However, for a state where we have no data, the query goes back into pending state, and that state is defined as having neither error nor data.

This is mostly per design, as clicking a retry button would usually want the pending fallback to be displayed. This is also the same UX you get when you use error boundaries from react.

Likely the best thing you can do is to keep the error around in react state yourself.

Upvotes: 1

Chibuokem Onyekwelu
Chibuokem Onyekwelu

Reputation: 128

I think react-query changes the value of isRefetching to true, and isError to false when you call refetch().

Why not try using error instead of isError?

Upvotes: 0

Related Questions