React Query: isLoading does not update on Axios error

Question

I am using a React Query mutation to make a server side request, however, the isLoading property does not change when there is an axios error (500 server side error) and the isError property also stays false. For reference, I have the following setup.

Base HTTP client class:

export class HttpClient {
  static async post(url, data, options) {
    const response = await Axios.post(url, data, options);

    return response.data;
  }
}

Mutation:

export const useRegisterMutation = () => {
  const queryClient = useQueryClient();
  return useMutation((vars) => {
    return HttpClient.post(API_ENDPOINTS.REGISTER, vars);
  }, {
    onSuccess: () => {
      toast.success('Your account was successfully created!');
    },
    // Always refetch after error or success:
    onSettled: () => {
      queryClient.invalidateQueries(API_ENDPOINTS.REGISTER);
    },
    onError: (error) => {
      toast.error('There was a problem while creating your account. Please try again later!')
    }
  });
};

Usage:

const { mutate: registerUser, isLoading, isError } = useRegisterMutation();
async function onSubmit({ email, password }) {
    registerUser(
      {
        email,
        password,
      },
      {
        onSuccess: (data) => {
          // set login creds
        },
        onError: (error) => {
          // set form errors
        },
      }
    )
  }

Problem

With this setup, isLoading stays true and isError remains false even if Axios throws an error due to a server side 500 error.

Tried

I:

Updated the library version.
Checked whether the code is executed in the right place.
Lost all hope.

You're not actually setting isLoading or isError anywhere - or am I completely missing something? — Yesthe Cia
– Yesthe Cia, Commented Jan 5, 2023 at 15:44
@YestheCia they're provided by the useRegisterMutation hook. — Catalin Vasile
– Catalin Vasile, Commented Jan 6, 2023 at 8:38
code looks correct. please show a codesandbox or stackblitz reproduction — TkDodo
– TkDodo, Commented Jan 15, 2023 at 14:46

Bogdan Iasinovschi · Accepted Answer · 2023-01-20 13:12:47Z

1

I used to have the same problem, but in a useQuery hook. Turned out it was because of the retries - if you set the retry flag to zero, you'll have the error flag set to true instantly. Otherwise, the error will show up by the end of the retry period, which by default I think it is 3 attempts * 5 minutes each.

answered Jan 20, 2023 at 13:12

Bogdan Iasinovschi

215 bronze badges

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

Collectives™ on Stack Overflow

React Query: isLoading does not update on Axios error

Problem

Tried

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Problem

Tried

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related