[FEAT] useForm Support For Array of Records (ids)

[aress31]

Is your feature request related to a problem? Please describe.

The issue is that currently, useForm cannot be used together with useFieldArray because refineCoreProps.id only accepts the id of a single record, rather than an array of records to either create or update.

Describe alternatives you've considered

N/A

Additional context

Code snippet example:

const {
  control,
  formState: { defaultValues, isDirty, isSubmitting, isValid },
  handleSubmit,
  refineCore: { onFinish },
  reset,
  resetField,
  setValue,
  watch,
} = useForm({
  refineCoreProps: {
    action,
    // Should accept an array (ids).
    id: rowIds[0],
    queryOptions: { enabled: false },
  },
  values: { records: mergedArray },
});

const { fields: records } = useFieldArray({
  control,
  name: "records",
});

const onSubmit = async ({ records }) => {
  // Here, I am limited to passing a single record. I want to pass an array of records so that if one insert/create fails, the entire operation is reverted.
  await onFinish(records[0]);
  close();
  reset();
};

Describe the thing to improve

useForm.refineCoreProps.id should accept an array (useForm.refineCoreProps.ids), and the onFinish function returned by useForm should be adapted accordingly.

[BatuhanW]

Hello @aress31 thanks for the issue.

I think you can use useMany hook with useUpdateMany and/or useCreateMany hooks, if I understand the issue correctly.

https://refine.dev/docs/data/hooks/use-update-many
https://refine.dev/docs/data/hooks/use-create-many

Also could you elaborate your case in more details? I don't think we can update useForm to accept multiple ids, since that would be very complicated change because of dependencies on useForm, but we may think about a new hook if it's a common case that can't be handled with existing hooks.

[aress31]

@BatuhanW, this approach forces users to reimplement controls already available in useForm, adding unnecessary boilerplate code. A better solution would be to enhance the Refine useForm to natively support multiple records. For example, in my use case, I need to submit a FormArray.

It is entirely possible to submit an array of records, and RHF supports this out of the box. For reference, see:

• https://www.react-hook-form.com/api/usefieldarray/

Currently, with Refine.dev and its exported useForm are limited to handling single records. This limitation restricts the potential of building enterprise-grade applications that often need to manage hundreds of records at once.

For example, imagine a scenario with a DataGrid where multi-select is enabled. A user selects 5 rows, and an associated form using useFieldArray is created. Upon submission, all 5 records associated with the selected rows need to be updated. With Refine’s current implementation, handling this workflow is either highly challenging or outright impossible.

[BatuhanW]

@aress31 I think you have a misunderstanding with what a fieldArray is. It's a form for a single array field for the same resource.

If you check the examples in the link you provided and their sandboxes, form data is submitted to a single entity, with an array field, which includes items from the useFieldArray.

It doesn't send these fields to multiple entities.

I don't think it would be enterprise-grade UX to select multiple records in the list page, each records having an array of fields, updating all of them at once. Can't really wrap my head around the UI as well, when you select multiple records, you need to have fields for each of them, each of them being an array that user can append, remove records to the same field.

If you have an example with RHF, would like to inspect and see what we can do.

If you want to update single field of multiple records, it's possible with updateMany. User may select 5 records, and selects a status from the dropdown, let's say rejected. Then you can submit status: rejected to selected entities with useUpdateMany hook.

You can see the relevant example here: https://refine.dev/docs/examples/table/mui/useUpdateMany/

[aress31]

No misconception here—it is entirely feasible to use ArrayField to handle an array of records. Many applications, such as QuickBooks, support batch editing.

I’ll attach a video capture later to demonstrate a use case.