Overwrite the form data before insert

[pinale]

I've a form in a <Create> component to insert a Post (with categories managed by the <Autocomplete> of "@pankod/refine-mui";)
when i press the save button, on thecreateData method of the dataProvider(firebaseDataProvider), the data arrives with this shape (accordind to the form structure)

async createData<TVariables = {}>(args: ICreateData<TVariables>): Promise<any> {
	
	console.log("createData --> args",args);
	...

"resource": "posts",
"variables": {
      "id": "d336363e-0899-4312-902c-d0577eed02ec",
      "title":"first post",
      "status": "draft",
      "category": {
		"id" : "b0925c18-a201-4b67-a15c-11352195c697"
		"title" : "news"
	  }
    }

but i need something like this: (to save in the db only the categoryId and not the whole category object)

"resource": "posts",
"variables": {
      "id": "d336363e-0899-4312-902c-d0577eed02ec",
      "title":"first post",
      "status": "draft",
      "categoryId": "b0925c18-a201-4b67-a15c-11352195c697"
    }

Is there some callback/hook/trick to manipulate this data at the <Create/> or form level? (just before the dataprovider's createData method is invoked) in order to reshape the data according my needs?

this is my form:

import { HttpError } from "@pankod/refine-core";
import {
    Box,
    TextField,
    Autocomplete,
    useAutocomplete,
    Create,
} from "@pankod/refine-mui";
import { useForm, Controller } from "@pankod/refine-react-hook-form";

import { IPost, ICategory } from "interfaces";

export const PostCreate: React.FC = () => {
    const {
        refineCore: { formLoading },
        saveButtonProps,
        register,
        control,
        formState: { errors },
    } = useForm<IPost, HttpError, IPost & { category: ICategory }>();

    const { autocompleteProps } = useAutocomplete<ICategory>({
        resource: "categories",
    });

    return (
        <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
            <Box
                component="form"
                sx={{ display: "flex", flexDirection: "column" }}
                autoComplete="off"
            >
                <TextField
                    {...register("title", { required: "Title is required" })}
                    error={!!errors?.title}
                    helperText={errors.title?.message}
                    margin="normal"
                    required
                    fullWidth
                    id="title"
                    label="Title"
                    name="title"
                    autoFocus
                />
                <Controller
                    control={control}
                    name="status"
                    rules={{ required: "Status is required" }}
                    render={({ field }) => (
                        <Autocomplete
                            {...field}
                            options={["published", "draft", "rejected"]}
                            onChange={(_, value) => {
                                field.onChange(value);
                            }}
                            renderInput={(params) => (
                                <TextField
                                    {...params}
                                    label="Status"
                                    margin="normal"
                                    variant="outlined"
                                    error={!!errors.status}
                                    helperText={errors.status?.message}
                                    required
                                />
                            )}
                        />
                    )}
                />
                <Controller
                    control={control}
                    name="category"
                    rules={{ required: "Category is required" }}
                    render={({ field }) => (
                        <Autocomplete
                            {...autocompleteProps}
                            {...field}
                            onChange={(_, value) => {
                                field.onChange(value);
                            }}
                            getOptionLabel={(item) => {
                                return item.title ? item.title : "";
                            }}
                            isOptionEqualToValue={(option, value) =>
                                value === undefined || option.id === value.id
                            }
                            renderInput={(params) => (
                                <TextField
                                    {...params}
                                    label="Category"
                                    margin="normal"
                                    variant="outlined"
                                    error={!!errors.category}
                                    helperText={errors.category?.message}
                                    required
                                />
                            )}
                        />
                    )}
                />
            </Box> 
        </Create>
    );
};

[pinale]

i'm thinking that i should have to use onFinish taken from useForm

something like in the "real world example"

<button
	className="btn btn-lg pull-xs-right btn-primary"
	type="button"
	onClick={(e) => {
		e.preventDefault();
		clearErrors();
		handleSubmit(async (values) => {
			await onFinish(values);
		})();
	}}
>
	Publish Article
</button>

but i'm using the MUI template and i don't have a button to control directly.

So i'm trying doing something similar, to perform a "save click" and invoke the onFinish method manually, but nothing is fired in this way

export const PostEdit: React.FC = () => {
    const {
        refineCore: { formLoading, queryResult, onFinish },
        saveButtonProps,
        register,
        control,
        formState: { errors }
    } = useForm<IPost, HttpError, IPost & { category: ICategory }>();

const extendedSaveButtonProps = (e : any) => {
	return {
		...saveButtonProps,
		onClick: (e: React.BaseSyntheticEvent<object, any,any>) => {
			console.log("save click fired!");
			//manupulate data here and call onFinish;
			
			saveButtonProps.onClick(e);
		}
	}
}

return (
        <Edit isLoading={formLoading} saveButtonProps={extendedSaveButtonProps} >

[omeraplak]

Hey @pinale ,
Thank you for contacting us. I've created an example for you! I hope it works for you 🚀

 const {
    handleSubmit,
    saveButtonProps,
    refineCore: { queryResult, onFinish },
    register,
    control,
    formState: { errors },
  } = useForm<
    IPost,
    HttpError,
    IPost & {
      category: ICategory;
    }
  >();


  return (
    <Edit
      saveButtonProps={{
        ...saveButtonProps,
        onClick: (e: React.BaseSyntheticEvent) => {
          handleSubmit(
            (values) => {
              onFinish({
                ...values,
              });
            },
            () => false
          )(e);
        },
      }}
    >
      <Box
        component="form"
        sx={{ display: 'flex', flexDirection: 'column' }}
        autoComplete="off"
      >

Live example: https://stackblitz.com/edit/refinedev-refine-agaf9m?file=src%2Fpages%2Fposts%2Fedit.tsx&preset=node