Handling cached query errors

[hoffmanilya]

First of all, thanks for an amazing library!

I'm running into an issue and I'm trying to understand whether I'm missing something or if there's an alternative pattern that would work better. I have a form component that displays either a loading spinner, an error message or the queried data:

const UserForm = () => {
    const { data, error, isLoading, isError } = useGetUserQuery()

    return isLoading ? (
        <Spinner />
    ) : isError ? (
        <ErrorMessage error={error}/>
    ) : (
        <form>...</form>
    )
}

Take this scenario for example:

• A user is presented with a list of all of the users in the system.
• They click 'Edit' for a particular user and are presented with the UserForm above.
• The query to load the user encounters an error and instead of the form they see the ErrorMessage.
• The user goes back to the list of users and tries to edit the user again. The UserForm component is re-mounted and briefly shows the error message before the query is fired again.

Is there a way to prevent this behavior? Basically, I don't want the error message to be rendered when the component is re-mounted and the query's last result is an error.