Adjust a field in a SimpleForm's value - react-admin

Question

I have a React Admin Edit form with a field which by default doesn't exist in the record. I could manually type it in, save it and it would work. However I wish to retrieve the value of this field programmatically when a user clicks a button then adjust it.
I use a useMutation hook to access a custom API which performs an expensive operation and returns a result for the field. I only want to perform this operation when the user clicks a button.
So inside a Edit form I have this field called key I want to apply the data from this useMutation hook to it.
export const PostEdit = (props) => (
<Edit title={<PostTitle />} {...props}>
<SimpleForm>
<TextInput disabled source="id" />
<RetrieveKey />
<TextInput source="key" />
</SimpleForm>
</Edit>
);
The RetrieveKey button is like this
const RetrieveKey = ({ record }) => {
const [retrieve, { loading }] = useMutation(
{
type: "retrieveKey",
resource: "posts",
payload: { id: record.id }
},
{
onSuccess: ({ data }) => {
if (data) {
// Set the key field here.
} else {
console.log("No Key");
}
},
onFailure: (error) => console.log("Error");
}
);
return (
<Button
onClick={retrieve}
disabled={loading}
label={"Retrieve Key"}
></Button>
);
};
I have looked through the various Form Hooks but can't find anything documented which would let me accomplish this.
Note, I don't want to instantly call the UpdateMethod or this would be trivial and I could use the DataProvider useUpdate to call it. Instead I want to prefill in the form for the user from the responsed key.
A codesandbox is provided here: https://codesandbox.io/s/nifty-firefly-k13g7?file=/src/App.js

Answer 1

I needed to access the underlying React-Final-Form API in order to edit the form.
The React-Admin Docs briefly touch on it here: https://marmelab.com/react-admin/Inputs.html#linking-two-inputs
So in this case I needed to use the useForm hook which then allowed me to update the form value.
const RetrieveKey = ({ record }) => {
const form = useForm();
const [retrieve, { loading }] = useMutation(
{
type: "retrieveKey",
resource: "posts",
payload: { id: record.id }
},
{
onSuccess: ({ data }) => {
console.log(form);
if (data) {
form.change("key", data);
} else {
console.log("No Key found");
}
},
onFailure: (error) => console.log("Error");
}
);
return (
<Button
onClick={retrieve}
disabled={loading}
label={"Retrieve Key"}
></Button>
);
};