Save multiple fields from record in different collection in react-admin Form - react-admin

Question

I'm using react-admin to manage a MongoDB database. A simplified example of the collections in the database:
contacts = [
{ id: 8, name: "Joe", country: "UK" },
]
tasks = [
{ id: 0, description: "", dev: { contact_id: 8, name: "Joe" } },
]
The documents in tasks have to store both contact_id (contact doc reference) and name (shown in many different views, so the number of API calls can be reduced). In this case, I'd use an AutocompleteInput within a ReferenceInput to save contact_id.
<ReferenceInput source="dev.contact_id" reference="contacts">
<AutocompleteInput
source="dev.contact_id"
optionText="name"
optionValue="id"
/>
</ReferenceInput>
However, once the contact is selected in the Autocomplete, I can't find a way to save the field name, so the task document looks like in the example. So far I've tried getting the contact record and adding the name field before submitting the form, but it's not working (hooks can only be called inside the body of a function component):
export const TaskForm = ({ children }) => {
const { handleSubmit } = useForm()
const onSubmit = async (data) => {
const contact = await useGetOne('contacts', { id: data?.dev?.contact_id })
console.log(contact)
}
return (
<Form onSubmit={handleSubmit(onSubmit)}>
{children}
</Form>
)
}
Any suggestions?

Answer 1

Perhaps you can use the dataProvider-hook instead of the useGetOne:
export const TaskForm = ({ children }) => {
const { handleSubmit } = useForm()
const dataProvider = useDataProvider();
const onSubmit = async (data) => {
const contact = await dataProvider.getOne('contacts', { id: data?.dev?.contact_id });
console.log(contact)
}
return (
<Form onSubmit={handleSubmit(onSubmit)}>
{children}
</Form>
)
}