reactjstypescriptreact-querytanstackreact-querytanstack

Getting 'isLoading' state undefined in react query

After I updated react query to the latest version, I am getting undefined for 'isLoading' state when using useMutation. Here is the code:

const useAddUserNote = (owner: string) => {
  const queryClient = useQueryClient();
  const { mutate, error, data, isLoading } = useMutation({
    mutationFn: (note: CreateNoteData) => addUserNote(note),
    onSuccess: () => {
      queryClient.invalidateQueries(["allUserNotes", owner]);
    },
  });

  if (error instanceof Error) error;

  return { mutate, data, error, isLoading };
};

Here is the type error

Property 'isLoading' does not exist on type 'UseMutationResult<any, Error, CreateNoteData, unknown>'.

When I console log the 'isLoading', it is undefined

Solution

  • Take a look at the API reference for your version. In the latest documentation, isLoading no longer exists -- it appears to have been removed after version 4.

    This is also explicitly called out in the upgrade guide from version 4 to version 5. Make sure to read these when you upgrade!

    You should update your code to use isPending:

    const { mutate, error, data, isPending } = useMutation({