ReactQuery await .mutate

Question

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

useUpdateUserSettings is a import from a custom hook.

I have a page that calls this function:

  const updateUserSettingsMutation = useUpdateUserSettings();

  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.

UPDATE: It can be done like this:

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) || "",
  },
}, { onSuccess: () => { Some code }})

Answer 1

Instead of calling updateUserSettingsMutation.mutate, you would use updateUserSettingsMutation.mutateAsync. This allows you to await the completion of the mutation.

const updateUserSettingsMutation = useUpdateUserSettings()

await updateUserSettingsMutation.mutateAsync({
    userName: user.preferred_username,
    settings: {
        // ... your settings object
    },
})

For more details: https://tanstack.com/query/v4/docs/react/guides/mutations#promises

Answer 2

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) || "",
  },
}, { onSuccess: () => { Some code }})