Edit Page: Submit Only Changed Fields

• The edit page example uses transform to compute a shallow diff and only send changed fields.
• mutationMode="pessimistic" makes the update process more controlled.

src/customers/CustomersEdit.tsx

import { Edit, SimpleForm, TextInput, NumberInput } from "@/components/admin";
import { required } from "ra-core";

// Compute shallow diff: only return fields different from previousData
const diffChanged = (
  data: Record<string, any>,
  previous?: Record<string, any>,
) => {
  if (!previous) return data;
  const changed: Record<string, any> = {};
  const isEqual = (a: any, b: any) => {
    try {
      return JSON.stringify(a) === JSON.stringify(b);
    } catch {
      return a === b;
    }
  };
  for (const key of Object.keys(data)) {
    if (!isEqual(data[key], previous[key])) {
      changed[key] = data[key];
    }
  }
  return changed;
};

export const CustomersEdit = () => (
  <Edit
    mutationMode="pessimistic"
    // Only send changed fields before save to avoid updating untouched values
    transform={(data, options) => diffChanged(data as any, options?.previousData as any)}
  >
    <SimpleForm>
      <TextInput source="name" label="Name" validate={required()} />
      <NumberInput source="age" label="Age" />
      <TextInput source="email" label="Email" type="email" />
    </SimpleForm>
  </Edit>
);

export default CustomersEdit;