I am using a form (react-final-form) that is by and large generated by blitzjs. Here are the relevant parts:
const [updateEventMutation] = useMutation(updateEvent)
...
<EventForm
onCancel={() => router.push(Routes.ShowEventPage({ eventId: event.id }))}
schema={updateEventSchema}
initialValues={event}
onSubmit={async (values) => {
try {
// at this point new values are shown
const updated = await updateEventMutation(values)
// at this point initial values are shown
await setQueryData(updated)
// at this point new values are shown again
router.push(Routes.ShowEventPage({ eventId: event.id }))
} catch (error: any) {
console.error(error)
return {
[FORM_ERROR]: error.toString(),
}
}
}}
/>
What happens is that before the call to updateEventMutation, the form shows the new data. After the call to updateEventMutation, the form shows the initial values. After the call to setQueryData, the form shows the new values again.
How can I prevent showing the initial values after the updateEventMutation call?
Adding this property to the final form element:
initialValuesEqual={deepEqual}
where deepEquals comes from
import deepEqual from "fast-deep-equal"
fixed the problem.