Await .mutate to finish

[D-Thrane]

Ok, I'n new to reactQuery and cant wrap my head around this.

I have a page that calls this function:

      updateUserSettingsMutation.mutate({
        userName: user.preferred_username,
        settings: {
          ...settings,
          treatmentCountryGuid: country?.id || "",
          legalDepartmentGuid: division?.legalDepartmentGuid || "",
          defaultLanguage: selectedLanguage || "",
          treatmentCountryCode: country?.code || "",
          shopCode: division?.shopName?.substring(0, 2) || "",
        },
      });

Here is the function:

export function useUpdateUserSettings() {
  const queryClient = useQueryClient();
  return useMutation(
    async (vars: { userName: string; settings: IUserSettingsForUpdate }) =>
    await putAccountSettings(vars.userName, vars.settings),
    {
      onMutate: async () => {
        queryClient.cancelQueries(useUserSettings.queryKey);
      },
      onSettled: () => queryClient.invalidateQueries(useUserSettings.queryKey),
    },
  );
}

On the page that calls updateUserSettingsMutation I need to await it to finish before the code continues.

[TkDodo]

.mutate doesn't return a Promise because it does error handling for you. you can use either the provided onSuccess callback on .mutate to continue:

updateUserSettingsMutation.mutate({...}, { onSuccess: () => { continue here })

or use mutateAsync, which returns a Promise. But if you use mutateAsync, please make sure to also handle errors with either .catch or with try/catch in an async function to avoid unhandled promise rejections.