blitzjs form renders initial values while waiting for update mutation

Question

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?

Answer 1

Adding this property to the final form element:

initialValuesEqual={deepEqual}

where deepEquals comes from

import deepEqual from "fast-deep-equal"

fixed the problem.