React React-Query で同期的に mutation を実行したい

React の fetcher ライブラリに React Query をよく使っています。
特定の mutation を実行してエラーになったら別の mutation を実行させたい仕様があり同期的に mutation を実行 (try 〜 catch 内で mutation を実行) させる方法のメモ

React-Query の mutation の基本

cf. Mutations | TanStack Query Docs

import { useMutation } from '@tanstack/react-query';

const useApiCreatePost = () => {
  return useMutation({
    mutationFn: (data) => createNewPost(data)
  })
};

const MyComponent = () => {
  const { mutate, isLoading, isSuccess , isError, error } = useMutation();
  const handleSubmit = () => {
    mutate(postData);
  };
  return (
    <>
      { isSuccess && <Toast>Success!</Toast> }
      { isError && <ErrorAlert>{error.message}</ErrorAlert> }
      <Button onClick={handleSubmit} disabled={isLoading}>Button</Button>
    </>
  );
};

mutation を同期的に実行するには `mutateAsync` を使う

Use mutateAsync instead of mutate to get a promise which will resolve on success or throw on an error. This can for example be used to compose side effects.
cf. Mutations | TanStack Query Docs

import { useMutation } from '@tanstack/react-query';

const useApiCreatePost = () => {
  return useMutation({
    mutationFn: (data) => createNewPost(data)
  })
};

const MyComponent = () => {
  const { mutateAsync, isLoading } = useMutation();
  const navigate = useNavigation();
  const handleSubmit = () => {
    try {
      const res = await mutateAsync(postData);
      console.log('Success', {res});
      navigate({ to: '/redirectPath' });
    } catch (error) {
      setErrorAlert(error.message);
    }
  };
  return (
    <>
      <Button onClick={handleSubmit} disabled={isLoading}>Button</Button>
    </>
  );
};