Persisting error state in react-query until successful refetch

Question

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>
        );
    }

TkDodo · Accepted Answer · 2025-01-17 10:46:33Z

2

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.

answered Jan 17 at 10:46

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chibuokem Onyekwelu · Accepted Answer · 2024-12-13 19:20:31Z

0

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?

answered Dec 13, 2024 at 19:20

Chibuokem Onyekwelu

3182 silver badges8 bronze badges

1 Comment

Thore Dec 14, 2024 at 10:35

That’s correct - React Query sets isRefetching to true, isError to false. error is being set to null when refetch() is called. My question is whether there’s a way to persist the error state until a successful fetch is completed, or if I need to handle this outside react-query.

Collectives™ on Stack Overflow

Persisting error state in react-query until successful refetch

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related