useMutation status is always 'idle' and 'isLoading' always 'false' - react-query

Question

So I use react-query to handle API requests. Current problem is that when i try to submit form data, post request, mutation state is always idle, and loading is always false. I also use zustand for state management.

This is useSubmitFormData hook. Post request executes as expected, just mutation status and isLoading does not get changed.

export const useSubmitFormData = () => {
  const { postDataPlaceholder } = usePlaceholderApi();
  // data which is submiting is getting from the store - reducer
  const { data, filesToUpload } = useFormDataStore();

  const { mutate, status, isLoading } = useMutation(() => postDataPlaceholder({ data }), {
    onMutate: () => console.log('onMutate', status),
    onSuccess: (res) => console.log(res),
    onError: (err) => console.log('err', err),
  });

  return {
    submitForm: mutate,
    isLoading,
  };
};

Now on FormPage.jsx it is triggered like this:

const { submitForm, isLoading } = useSubmitFormData();

const onSubmit = () => submitForm();

And this is how usePlaceholderApi looks like. It is kind of custom hook in purpose to use axios in combination with interceptors to handle authorization token.

const usePlaceholderApi = () => {
  const { post } = usePlaceholderAxios();

  return {
    postDataPlaceholder: async (data) => post('/posts', { data }),
  };
};

export default usePlaceholderApi;

And this is usePlaceholderAxios.

import axios from 'axios';

const usePlaceholderAxios = () => {
  axios.interceptors.request.use(async (config) => {
    const api = 'https://jsonplaceholder.typicode.com';

    if (config.url.indexOf('http') === -1) {
      // eslint-disable-next-line no-param-reassign
      config.url = `${api}${config.url}`;
    }

    return config;
  });

  return {
    get: (url, config) => axios.get(url, config),
    post: (url, data, config) => axios.post(url, data, config),
  };
};

export default usePlaceholderAxios;

Any ideas what could go wrong here ? Am I missing something ? Also tried to call axios directly in mutation, without usePlaceholderApi hook in between, but same outcome.

Duprey

Would it be possible for you to create a running codesandbox demo of this code for us to inspect and debug live? – Antonantone

I see nothing obviously wrong with the code, so a codesandbox reproduction would be appreciated – Bybidder

@Duprey I have the same issue here, have you found a solution? – Hooey

Answer 1

I managed to solve exactly the same problem by creating a flow of hooks. In my case, I changed importing two separated hooks into one hook.

From this

const { tasks, createTask, deleteTask } =
    useMutateTask()

  const { handleSubmit, onSubmit, register } =
    useTaskForm()

To this

  const {
    handleSubmit,
    onSubmit,
    register,
    tasks,
    createTask,
    deleteTask,
  } = useTaskForm()

Detach