Handling multiple mutations in one handler

[User6531]

Hello everyone, I have two mutations that I'm triggering with a click. To handle this, I'm utilizing the isLoading property to display a loading message when it's set to true. However, I'm encountering a slight blink in the UI between these requests. This occurs because the first request completes, setting isLoading to false, and then the second request begins, setting isLoading back to true.

I'm aware that I can merge these requests inside the queryFn, but I'm hesitant to do so because I also require these requests separately in another part of my app. Additionally, I don't want to create a new mutation that would duplicate my endpoints.

Does anyone have any ideas on how to resolve this issue?

example:

const Example = () => {
  const [createUser, { isLoading: isLoadingUser }] = useCreateUserMutation();

  const [createCustomer, { isLoading: isLoadingCustomer }] =
    useCreateCustomerMutation();

  const isLoading = isLoadingUser || isLoadingCustomer;

  const handleCreateUser = async () => {
    try {
      const { data } = await createCustomer().unwrap();
      // blink there
      await createUser({ customerId: data.id }).unwrap();

      toast.success("Success");
    } catch (e) {
      toast.error(e);
    }
  };

  if (isLoading) {
    return <div>loading...</div>;
  }

  return (
    <div>
      {/* content */}

      <button type="button" onClick={handleCreateUser}>
        Create
      </button>
    </div>
  );
};

[User6531]

I'm using the workaround below to fix this issue.
Is it the best approach for handling multiple mutations in one handler?

const Example = () => {
  const [isCustomLoading, setIsCustomLoading] = useState(false);

  const [createUser] = useCreateUserMutation();
  const [createCustomer] = useCreateCustomerMutation();

  const handleCreateUser = async () => {
    setIsCustomLoading(true);
    
    try {
      const { data } = await createCustomer().unwrap();
      // blink there
      await createUser({ customerId: data.id }).unwrap();

      toast.success("Success");
    } catch (e) {
      toast.error(e);
    }

    setIsCustomLoading(false);
  };

  if (isCustomLoading) {
    return <div>loading...</div>;
  }

  return (
    <div>
      {/* content */}

      <button type="button" onClick={handleCreateUser}>
        Create
      </button>
    </div>
  );
};

Also, I believe this issue is related to #2203 .